May 2024 PyData Theme audit findings

[gabalafou]

Associated project board

This PR is used as the filter for an associated project board to track and manage the tasklist.

Tasks

Beta Give feedback

1. Two H1s #75
   area: PyData-Sphinx area: accessibility ♿ size: L +3
2. The light/dark toggle button does not communicate its state #76
   area: PyData-Sphinx area: accessibility ♿ size: S +3
   
3. Sphinx-togglebutton expand/collapse button does not communicate its state #77
   area: PyData-Sphinx area: accessibility ♿ size: S +3
   
4. Sphinx-copybutton is not visible until code block is hovered or focused #78
   area: PyData-Sphinx area: accessibility ♿ size: S +3
   
5. [S] Sphinx-copybutton has two tooltips (custom and native) #100
   area: PyData-Sphinx area: accessibility ♿ size: S +3
6. [S] Sphinx-copybutton not enough contrast on hover #99
   area: PyData-Sphinx area: accessibility ♿ size: S +3
7. Sphinx-copybutton not visible in high contrast mode #101
   area: PyData-Sphinx area: accessibility ♿ size: M +3
8. Sphinx Design tabs need other hover indicator other than just color change #79
   area: PyData-Sphinx area: accessibility ♿ size: S +3
   
9. Dropdown admonition chevrons hover effect is a little too subtle? #80
   area: PyData-Sphinx area: accessibility ♿ size: M +3
   
10. Not enough space between navbar icon buttons #81
    area: PyData-Sphinx area: accessibility ♿ size: S +3
    
11. Not enough space between the links in the "on this page" navigation #82
    area: PyData-Sphinx area: accessibility ♿ size: S +3
    
12. Search input modal allows user to tab away from it without explicitly dismissing it #83
    area: PyData-Sphinx area: accessibility ♿ size: M +3
    
13. Mobile sidebar modal allows user to tab away from it without explicitly dismissing it #84
    area: PyData-Sphinx area: accessibility ♿ size: M +3
    
14. Search input modal does not return focus to opener (search button) when modal is closed #85
    area: PyData-Sphinx area: accessibility ♿ size: S +3
    
15. Read The Docs version switcher is not reachable using only keyboard (tab key) #86
    0 of 1
    area: PyData-Sphinx area: accessibility ♿ size: S +3
    
16. Read The Docs switcher is not consistently placed #87
    0 of 1
    area: PyData-Sphinx area: accessibility ♿ size: S +3
    
17. [L] Divergent links (same name, different URLs) #88
    0 of 3
    area: PyData-Sphinx area: accessibility ♿ size: L +3
18. [L] Convergent links (different names, same URL) #89
    area: PyData-Sphinx area: accessibility ♿ size: L +3
19. Text spacing adjustment doesn't work on buttons #90
    area: PyData-Sphinx area: accessibility ♿ +2
    
20. Tooltips for the icon links/buttons in nav bar are neither dismissible nor hoverable #91
    area: PyData-Sphinx area: accessibility ♿ size: S +3
21. Search icon button on mobile may not meet requirements #92
    area: PyData-Sphinx area: accessibility ♿ size: S +3
22. [M] External link icon is not accessible #93
    area: PyData-Sphinx area: accessibility ♿ size: M +3
23. All the icon links in the nav bar are just a tiny bit too narrow (less than 24 css pixels) #94
    area: PyData-Sphinx area: accessibility ♿ size: S +3
24. The hover+focus state of the nav bar icon links do not look good #95
    area: PyData-Sphinx area: accessibility ♿ size: S +3
25. Heading anchors do not have sufficient contrast #96
    area: PyData-Sphinx area: accessibility ♿ size: S +3
    
26. [M] Missing hover colors in high contrast #98
    area: PyData-Sphinx area: accessibility ♿ size: M +3
27. H2 and H3 headings too similar visually #97
    area: PyData-Sphinx area: accessibility ♿ size: M +3
28. [M] Sphinx-copybutton SVG may be incorrectly marked as decorative #102
    area: PyData-Sphinx area: accessibility ♿ size: M +3
29. Follow up audit: turn off CSS, identify issues
30. Follow up audit: turn off JavaScript, identify issues
31. Follow up audit: use disability simulation tools, identify issues
32. Follow up audit: ATAG
33. Follow up audit: screen reader audit (maybe through Fable)

[gabalafou]

Derived from #70 and our shared Google Drive folder where the Accessibility Insights audits were saved

[gabalafou]

Notes from today's sync (May 23)

Gabriel: Question - other audit checks beyond accessibility insights?

• Turn off CSS, what happens?
• Turn off JavaScript, what happens?
• Quick checks with browser extension disability simulation tools (green-red colorblindness for example)

Tania suggests:

• a screen reader audit through Fable. Clarify: after we address our own audit.
• check against ATAG. For example, Wagtail recently did an ATAG audit

[trallard]

copybutton identified issues:

• there is not enough contrast on hover (light mode, dark mode needs checks)
• there are two tooltips displayed at all times -> need to remove one
• whichever we use need to be visible in high contrast mode
• needs check: ARIA should be applied accordingly in which case the SVG is purely decorative (icon)

[Carreau]

Derived from #70 and our shared Google Drive folder where the Accessibility Insights audits were saved

Can/should this be made public ?

[Carreau]

Accessibility insight is a browser extension. I'll try to move some of the relevant files to this repository and try to add some details on how to use it.