Skip to content
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 our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Summary of Axe accessibility issues #1428

Closed
15 tasks done
gabalafou opened this issue Sep 6, 2023 · 2 comments · Fixed by #1905
Closed
15 tasks done

Summary of Axe accessibility issues #1428

gabalafou opened this issue Sep 6, 2023 · 2 comments · Fixed by #1905
Assignees
Labels
tag: accessibility Issues related to accessibility issues or efforts
Milestone

Comments

@gabalafou
Copy link
Collaborator

gabalafou commented Sep 6, 2023

If you run the accessibility checks right now:

nox -s a11y

It opens several pages and runs the Axe checker against them to find accessibility issues. There are many test failures, but only several root causes.

This issue groups the failures and links to issues to fix them. Note that some of the issues exist outside this repo (in dependencies).


  • color-contrast - Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds
    Root cause: insufficiently strong color palette for the a11y-light Accessible Pygments theme
    Related GitHub issue:
    a11y-light fails WCAG AA contrast with gray background Quansight-Labs/accessible-pygments#30
    Pages where this shows up:
    • /examples/kitchen-sink/blocks.html (light theme)
    • /examples/pydata.html (light theme)
    • /user_guide/theme-elements.html (light theme)
    • /user_guide/styling.html (light theme)


  • duplicate-id-aria - Ensures every id attribute value used in ARIA and in labels is unique
    This is a site-wide issue so it shows up only on /user_guide/page_toc.html page in the test results.
    Fixed by: Fix duplicate HTML IDs #1425

The following two site-wide issues are both fixed by the same PR:


There are also some color contrast issues that have to do with running Axe core (the accessibility checker) before certain animations (color transitions) finish running on the page. This results in false positive contrast failures. This is tracked in the following issue:


The following violations are site-wide and appear at /user_guide/page-toc.html, which runs Axe against the entire page. These site-wide violations are fixed by #1454:

  • landmark-main-is-top-level - Ensures the main landmark is at top level
  • landmark-no-duplicate-main - Ensures the document has at most one main landmark
  • landmark-unique - Landmarks should have a unique role or role/label/title (i.e. accessible name) combination
  • region - Ensures all page content is contained by landmarks

The following site-wide violation has to do with the PyData Theme logo in the header. The alt text for the logo is PyData Theme, but text that immediately follows the logo icon is also PyData Theme. This causes the screen reader to say it twice. This issue is fixed in #1472 and #1471:

  • image-redundant-alt - Ensure image alternative is not repeated as text

This is an issue in Sphinx Design with link cards:




@gabalafou
Copy link
Collaborator Author

cc @trallard

@gabalafou gabalafou changed the title [WIP] Summary of Axe issues [WIP] Summary of Axe-detected accessibility issues Sep 6, 2023
@gabalafou gabalafou changed the title [WIP] Summary of Axe-detected accessibility issues [WIP] Summary of Axe accessibility issues Sep 6, 2023
@trallard trallard added the tag: accessibility Issues related to accessibility issues or efforts label Sep 6, 2023
This was referenced Sep 18, 2023
@gabalafou gabalafou changed the title [WIP] Summary of Axe accessibility issues Summary of Axe accessibility issues Sep 26, 2023
@drammock drammock added this to the 1.0 milestone Jan 16, 2024
@gabalafou
Copy link
Collaborator Author

gabalafou commented May 14, 2024

Update

Almost all of the Axe violations for our current set of test pages have been addressed. Our recent upgrade of Accessible-pygments fixed most of the remaining color contrast issues.

There are only two remaining color contrast issues:

  • Notebook cell numbers (output via nbsphinx) do not have enough contrast, neither in light mode nor in dark mode.
  • Xarray has some color contrast issues:
    • Fix some of these with Force light mode for notebook outputs #1812
    • For the others, write some special case style rules to override Xarray's own styles in the short-term,
    • Longer term, file an issue or pull request to fix upstream

The only other issue has to do with ipyleaflet. When that widget fails to load, it displays a SVG icon of a broken document, but that SVG icon does not have alt text. This is also something outside our control and we will need to file an issue or pull request upstream. In the meantime, I will add code to:

  • Ignore the accessibility violation from the ipyleaflet error missing alt text

Future work

  • Strategically add a few more of our docs pages to our set of test pages to scan with Axe-core

Carreau pushed a commit that referenced this issue May 27, 2024
#1787)

One of many fixes for the failing accessibility tests (see #1428).

The accessibility tests were still reporting some violations of: 
 - Scrollable region must have keyboard access (https://dequeuniversity.com/rules/axe/4.8/scrollable-region-focusable) even after merging #1636 and #1777. 

These were due to Jupyter notebook outputs that have scrollable content. This PR extends the functionality of PRs #1636 and #1777 to such outputs.

- Adds a test for tabindex = 0 on notebook outputs after page load

This also addresses one of the issues in #1740: missing horizontal scrollbar by:

- Adding CSS rule to allow scrolling
- Add ipywidgets example to the examples/pydata page
ivanov pushed a commit to ivanov/pydata-sphinx-theme that referenced this issue Jun 5, 2024
pydata#1787)

One of many fixes for the failing accessibility tests (see pydata#1428).

The accessibility tests were still reporting some violations of: 
 - Scrollable region must have keyboard access (https://dequeuniversity.com/rules/axe/4.8/scrollable-region-focusable) even after merging pydata#1636 and pydata#1777. 

These were due to Jupyter notebook outputs that have scrollable content. This PR extends the functionality of PRs pydata#1636 and pydata#1777 to such outputs.

- Adds a test for tabindex = 0 on notebook outputs after page load

This also addresses one of the issues in pydata#1740: missing horizontal scrollbar by:

- Adding CSS rule to allow scrolling
- Add ipywidgets example to the examples/pydata page
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
tag: accessibility Issues related to accessibility issues or efforts
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants