Accessibility Issues Needing Addressing for WCAG 2.1 compliance (As of Version 7.0.0a15) #6800
Description
I know Jupyter Notebook v7 just announced huge accessibility improvements recently available in alpha but I wanted to throw my hat into the ring with remaining pieces before we celebrate fully that it's fully accessible. Lot of this is super low hanging fruit with potential huge impact.
Summary
Blind Users – minorly functional but with great annoyances. Grade C
Low Vision – almost completely supported, mostly minor annoyances. Grade A-
Color Blind – almost completely supported on light theme, Grade A-. Same A- on dark theme
Ambulatory - mostly usable, just a few blockers for supplementary actions. Grade B
Deaf/Hard of Hearing - completely supported. Grade A+
Cognitive - completely supported. Grade A+
Seizures - completely supported. Grade A+
Related to jupyterlab/jupyterlab#9399 but NotebookV7 obviously much better and what should be recommended to persons with disabilities and just needs a few small fixes to be fully supporting of Low Vision, Color Blind, and Ambulatory users.
Issues
- Blind users with screenreader read everything in German #6924
- Using just keyboard, user can't escape Terminal or Markdown block on New Terminal and New Markdown pages once they get inside them? #6948
- Using just keyboard, user can't get to Running tab on /tree page #6928
- Keyboard-only users cannot focus on and modify notebook titles #6926
- Keyboard-only user focus on Jupyter logo is just a vertical line not bounding box around the element they are focused on. #6927
- On focus and hover on the notebook title on just the dark theme, this needs a more distinct color change. As is (change from dark gray to lighter gray) is not enough of a difference to visually demonstrate it's currently focused/it does something.
- Fix skiplink and add placeholder for additional skiplinks jupyterlab/jupyterlab#14597
- keyboard-only users have to tab 20 times every time to get to main region to do work #6957
- Make the tree page file browser a table to support blind users/screen readers. #6925
- Keyboard-only users (ambulatory), do not see the hoverable/tooltip of the icons in heading and in code cells when focusing on the elements. #6931
- Hovering over something with a hoverable popup/tooltip does not let you dismiss it with the ESC key.
- Notebook cell actions are not announced to screenreader. #6947
- Minor dark theme color contrast fix on "About Jupyter Notebook" modal.
- On dark theme, there are 4 colors a part of the code syntax hightlighter in the code blocks that needs better contrast from the background. On light theme this number is 6. Both of these need to reach a 4.5:1 contrast ratio #6929
- Notebook page at 400% cannot see the notebook title, the language of the notebook, the jupyter link to go back, or the help dropdown. In addition the "Not Trusted" block is partially cut off when appearing (also can't edit the title of the notebook but revealing it will most likely fix this). #6932
- Tree page when at 400% zoom only lets you see a couple notebooks at a time when scrolling due to top 2/3rds of page being fixed on the page. #6930
Issues (Broken Down)
Language
- Expectation: Language tags are specified on
<html>element based on the language the content is being displayed as. If content is in English, needs to be<html lang="en">, etc. (WCAG Criteria 3.1.1 (A) and 3.1.2 (AA)) - Observed:
- On all pages with my language set to English,
lang="default"which reads my content in GERMAN (probably looking at the first 2 letters "de"). Need to have JS that powers this instead change to the proper lang codes. - If importing over the Settings Editor to Notebookv7 ever, recommend adding dropdown menu for languages so user only selects from list of languages that are currently supported/installed so bilingual blind users can easily toggle without fear of messing up.
- On all pages with my language set to English,
Focus
Issue Area # 1
- Expectation: All supplementary elements that a user needs to interact with receive keyboard focus and be reached using only the keyboard. (WCAG Criteria 2.1.1 (A))
- Observed:
- On new markdown and terminal pages, these don't let you escape the content body to do other things once you get inside of it.
- On Tree page, can't get to "Running" tab with just a keyboard. That section or each of those tabs need a tabindex="0" on it.
- Keyboard user cannot tab to the notebook title to trigger the modal to edit the notebook title. Needs tabindex="0" on it.
Issue Area # 2
- Expectation: All supplementary elements that a user needs to interact with receive keyboard focus and be reached using only the keyboard. (WCAG Criteria 2.1.1 (A))
- Observed:
- On both light and dark theme, when focused on the Jupyter logo in header, the focus indicator is just a vertical line on the left side. This is not sufficient and needs to either surround the logo or the logo needs to be visually and noticably altered.
- Assuming functionality is added to allow keyboard-only users to tab to the notebook title to trigger the modal to edit notebook titles, this focus on dark theme needs to be more visually different. THe change from dark gray to lighter gray is not enough. Make sure difference is a difference in 3.0:1 contract ratio from non-hover to hover.
Content, Organization, and Navigation
Issue Area # 1
- Expectation: The user can skip navigation functions, sidebar, or other repetitive content go straight to the content. (WCAG Criteria 2.4.1 (A))
- Observed: User is forced to tab 20 times every time on notebook page because getting to the main region (and slightly less times on the other non-notebook pages). Needs a skip link to appear in first tab or two to jump straight to
#main
Issue Area # 2
- Expectation: Tables used appropriately, clearly organized, and labeled. (WCAG Criteria 1.3.1 (A) & 4.1.2 (A))
- Observed: Main table (tree page) is not a real table; it is made of
<div>s within<div>s not Table > THEAD/TBODY > TR > TH/TD. Without this blind users/screen readers cannot decipher that this is row data or what element corresponds to what row, how many rows there are, etc.
Issue Area # 3
- Expectation: Is content that appears on hover or keyboard focus dismissible, hovberable, and persistent? (WCAG Criteria 1.4.13 (AA))
- Observed:
- All hoverables (tooltips) are not appearing on keyboard focus based on what I could tell. AKA, people using only keyboard do not know that the play button in the heading has meaning "Run the selected cells (Shift + Enter)". They just have to guess what all of these buttons do. Once implemented, make sure these users can dismiss these hoverables by pressing the ESC key.
Issue Area # 4
- Expectation: User is informed when content changes dynamically away from the focus (WCAG Criteria 3.2.2 (A), 4.1.2 (A), & 4.1.3 (AA))
- Observed: On notebook page when preforming all code cell actions (runs, stops, moves, duplications, etc.) it's not mentioning this to screenreaders. On move it should send a screenreader only alert saying ex. "Code cell number 4 has swapped with code cell 3 successfully" or at minimum "cell move successful". Whenever a cell is run, I expect it to say ex. "Running cell 3", say the output as it's happening, example "Packages already installed: pandas", etc. then will read either "Cell 3 finished successfully" or "Cell 3 failed. Error: {insert error}.
Color, Contrast, and Zoom
Issue Area # 1
- Expectation: Do the default text and background size and colors provide sufficient contrast? (WCAG Criteria 1.4.3 (AA))
- Observed:
- On just dark theme, the links found on the "About Jupyter Notebook" dropdown have insufficient contrast. Needs a 4.5:1 ratio or higher but has a 1.71 ratio (dark blue on dark gray). When selecting this link as well it becomes a dark red on red (1.64 contrast ratio).
- On both dark and light themes, the colors found within the code blocks (the syntax highlighting) needs 4 and 6 color changes respectively. Both of these need to reach a 4.5:1 contrast ratio between and its background.These also ideally need to have a certain contrast (3:1) between one another so they stand out (a different WCAG requirement), but there are too many colors used that all may appear adjacent to one another that this does not seem possible so can ignore. I recognize this might be a different codebase but wanted to flag at least.
Issue Area # 2
- Expectation: Can the page be zoomed to 400% zoom in a 1280px wide display without requiring two scroll bars? (WCAG Criteria 1.4.10 (AA)).
- Observed:
- Notebook page at 400% magnification cannot see the notebook title, the language of the notebook, the jupyter link to go back, or the help dropdown. In addition the "Not Trusted" block is partially cut off when appearing (also can't edit the title of the notebook but revealing it will most likely fix this).
- Minor annoyance on /tree page. The top 2/3rds of the page is fixed so you can only see 1-2 notebooks from list as you scroll. Recommend making most (everything below the main header) if not all of it static to maximize scrollable area.