A11y: Increase the target area for single-letter index links - #103
pradyunsg merged 2 commits into
Conversation
Sorry, something went wrong.
|
|
||
| div.genindex-jumpbox a { | ||
| padding: 0 0.5em; | ||
| } |
There was a problem hiding this comment.
Another option would be to use width and/or min-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.
Sorry, something went wrong.
There was a problem hiding this comment.
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:
<div class="genindex-jumpbox">
<p> [all the A-Z links] </p>
<p> [full index link] </p>
</div>The second is:
<div class="genindex-jumpbox"> [all the A-Z links] </div><div class="genindex-jumpbox">
<p><a href="genindex-Symbols.html"><strong>Symbols</strong></a>
| <a href="genindex-_.html"><strong>_</strong></a>
| <a href="genindex-A.html"><strong>A</strong></a>
| <a href="genindex-B.html"><strong>B</strong></a>
| <a href="genindex-C.html"><strong>C</strong></a>
| <a href="genindex-D.html"><strong>D</strong></a>
| <a href="genindex-E.html"><strong>E</strong></a>
| <a href="genindex-F.html"><strong>F</strong></a>
| <a href="genindex-G.html"><strong>G</strong></a>
| <a href="genindex-H.html"><strong>H</strong></a>
| <a href="genindex-I.html"><strong>I</strong></a>
| <a href="genindex-J.html"><strong>J</strong></a>
| <a href="genindex-K.html"><strong>K</strong></a>
| <a href="genindex-L.html"><strong>L</strong></a>
| <a href="genindex-M.html"><strong>M</strong></a>
| <a href="genindex-N.html"><strong>N</strong></a>
| <a href="genindex-O.html"><strong>O</strong></a>
| <a href="genindex-P.html"><strong>P</strong></a>
| <a href="genindex-Q.html"><strong>Q</strong></a>
| <a href="genindex-R.html"><strong>R</strong></a>
| <a href="genindex-S.html"><strong>S</strong></a>
| <a href="genindex-T.html"><strong>T</strong></a>
| <a href="genindex-U.html"><strong>U</strong></a>
| <a href="genindex-V.html"><strong>V</strong></a>
| <a href="genindex-W.html"><strong>W</strong></a>
| <a href="genindex-X.html"><strong>X</strong></a>
| <a href="genindex-Y.html"><strong>Y</strong></a>
| <a href="genindex-Z.html"><strong>Z</strong></a>
</p>
<p><a href="genindex-all.html"><strong>Full index on one page</strong>
(can be huge)</a></p>
</div><div class="genindex-jumpbox">
<a href="#Symbols"><strong>Symbols</strong></a>
| <a href="#_"><strong>_</strong></a>
| <a href="#A"><strong>A</strong></a>
| <a href="#B"><strong>B</strong></a>
| <a href="#C"><strong>C</strong></a>
| <a href="#D"><strong>D</strong></a>
| <a href="#E"><strong>E</strong></a>
| <a href="#F"><strong>F</strong></a>
| <a href="#G"><strong>G</strong></a>
| <a href="#H"><strong>H</strong></a>
| <a href="#I"><strong>I</strong></a>
| <a href="#J"><strong>J</strong></a>
| <a href="#K"><strong>K</strong></a>
| <a href="#L"><strong>L</strong></a>
| <a href="#M"><strong>M</strong></a>
| <a href="#N"><strong>N</strong></a>
| <a href="#O"><strong>O</strong></a>
| <a href="#P"><strong>P</strong></a>
| <a href="#Q"><strong>Q</strong></a>
| <a href="#R"><strong>R</strong></a>
| <a href="#S"><strong>S</strong></a>
| <a href="#T"><strong>T</strong></a>
| <a href="#U"><strong>U</strong></a>
| <a href="#V"><strong>V</strong></a>
| <a href="#W"><strong>W</strong></a>
| <a href="#X"><strong>X</strong></a>
| <a href="#Y"><strong>Y</strong></a>
| <a href="#Z"><strong>Z</strong></a>
</div>
Sorry, something went wrong.
|
(Rebased to build RTD preview: https://python-docs-theme-previews--103.org.readthedocs.build/en/103/genindex.html) |
Sorry, something went wrong.
Fixes python/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":