Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork66
A11y: Increase the target area for single-letter index links#103
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
Uh oh!
There was an error while loading.Please reload this page.
Conversation
| @@ -230,6 +230,10 @@ dl > dt span ~ em { | |||
| padding-left: 20px; | |||
| } | |||
| div.genindex-jumpbox a { | |||
| padding: 0 0.5em; | |||
| } | |||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
Another option would be to usewidth and/ormin-width, even though that only works on block elements IIRC, so you would have to turn the list into a flexbox.
The advantage of doing this is that the target box and the distance between the|s will be the same for all letters, and that the list will stay relatively compact.
You could even try to use negative margins to expand the clickable area on the space characters between the|s and the letters, but for accessibility purposes there should be enough space between a link target and the other, so it's probably not worth messing with negative margins.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
Good idea! Updated and rebuilt the demo:
https://hugovk-cpython.readthedocs.io/en/accessibilty-index-target-area/genindex.html
https://hugovk-cpython.readthedocs.io/en/accessibilty-index-target-area/genindex-all.html
Applied the flexbox container to two places here:
div.genindex-jumpbox,div.genindex-jumpbox>p {display: inline-flex;flex-wrap: wrap;}
Because the structure is slightly different on the two pages.
The first is:
<divclass="genindex-jumpbox"><p> [all the A-Z links]</p><p> [full index link]</p></div>
The second is:
<divclass="genindex-jumpbox"> [all the A-Z links]</div>
HTML details
<divclass="genindex-jumpbox"><p><ahref="genindex-Symbols.html"><strong>Symbols</strong></a> |<ahref="genindex-_.html"><strong>_</strong></a> |<ahref="genindex-A.html"><strong>A</strong></a> |<ahref="genindex-B.html"><strong>B</strong></a> |<ahref="genindex-C.html"><strong>C</strong></a> |<ahref="genindex-D.html"><strong>D</strong></a> |<ahref="genindex-E.html"><strong>E</strong></a> |<ahref="genindex-F.html"><strong>F</strong></a> |<ahref="genindex-G.html"><strong>G</strong></a> |<ahref="genindex-H.html"><strong>H</strong></a> |<ahref="genindex-I.html"><strong>I</strong></a> |<ahref="genindex-J.html"><strong>J</strong></a> |<ahref="genindex-K.html"><strong>K</strong></a> |<ahref="genindex-L.html"><strong>L</strong></a> |<ahref="genindex-M.html"><strong>M</strong></a> |<ahref="genindex-N.html"><strong>N</strong></a> |<ahref="genindex-O.html"><strong>O</strong></a> |<ahref="genindex-P.html"><strong>P</strong></a> |<ahref="genindex-Q.html"><strong>Q</strong></a> |<ahref="genindex-R.html"><strong>R</strong></a> |<ahref="genindex-S.html"><strong>S</strong></a> |<ahref="genindex-T.html"><strong>T</strong></a> |<ahref="genindex-U.html"><strong>U</strong></a> |<ahref="genindex-V.html"><strong>V</strong></a> |<ahref="genindex-W.html"><strong>W</strong></a> |<ahref="genindex-X.html"><strong>X</strong></a> |<ahref="genindex-Y.html"><strong>Y</strong></a> |<ahref="genindex-Z.html"><strong>Z</strong></a></p><p><ahref="genindex-all.html"><strong>Full index on one page</strong> (can be huge)</a></p></div>
<divclass="genindex-jumpbox"><ahref="#Symbols"><strong>Symbols</strong></a> |<ahref="#_"><strong>_</strong></a> |<ahref="#A"><strong>A</strong></a> |<ahref="#B"><strong>B</strong></a> |<ahref="#C"><strong>C</strong></a> |<ahref="#D"><strong>D</strong></a> |<ahref="#E"><strong>E</strong></a> |<ahref="#F"><strong>F</strong></a> |<ahref="#G"><strong>G</strong></a> |<ahref="#H"><strong>H</strong></a> |<ahref="#I"><strong>I</strong></a> |<ahref="#J"><strong>J</strong></a> |<ahref="#K"><strong>K</strong></a> |<ahref="#L"><strong>L</strong></a> |<ahref="#M"><strong>M</strong></a> |<ahref="#N"><strong>N</strong></a> |<ahref="#O"><strong>O</strong></a> |<ahref="#P"><strong>P</strong></a> |<ahref="#Q"><strong>Q</strong></a> |<ahref="#R"><strong>R</strong></a> |<ahref="#S"><strong>S</strong></a> |<ahref="#T"><strong>T</strong></a> |<ahref="#U"><strong>U</strong></a> |<ahref="#V"><strong>V</strong></a> |<ahref="#W"><strong>W</strong></a> |<ahref="#X"><strong>X</strong></a> |<ahref="#Y"><strong>Y</strong></a> |<ahref="#Z"><strong>Z</strong></a></div>
17690a2 to574eb98Compare574eb98 to75b8026Compare(Rebased to build RTD preview:https://python-docs-theme-previews--103.org.readthedocs.build/en/103/genindex.html) |
Uh oh!
There was an error while loading.Please reload this page.
Fixespython/cpython#101109.
Sphinx auto-generates index pages for entries with
.. index::.At the top of these pages:
It generates a list of links to each index initial letter:
However, these links are narrow and have very small clickable target areas, most around 10-15 pixels wide, and "I" is only ~5 pixels wide:
They can be hard to click for those with physical issues that make small, precision movements difficult.
WebAIM say:
So let's improve accessibility and make:
Here's a demo with this PR:
Which gives us a width of around 25-30px for most and ~21px for "I":