retrolab accessibility auditing

this document will drive breakout rooms for the 2021 jupyterlab accessibility workshop. in this exercise, we will play the role of accessibility testers. we'll use common accessibility tools to diagnosis and describe a11y shortcomings of retrolab components

requirements

• WAVE
• retrolab installed or

file browser

header

WCAG	Level	Diagnosis	Remediation
2.1.1	A	.lm-MenuBar has a tabindex of 0 and cannot be navigated to	avoid encoding tabindex if possible
4.1.2	A	need to ensure that .lm-MenuItem-item is used correctly	use modern html tags when possible

files/running tab

WCAG	Level	Diagnosis	Remediation

file browser

WCAG	Level	Diagnosis	Remediation
1.1.1, 1.3.1, 2.4.6, 3.3.2	A, A, AA, A	input box for file search doesn't have a label	add a label
same as above	same as above	input box for command palette is missing a label	same as above
2.4.4	A	empty button in command palette	The button has display: none? See code
2.4.6	AA	No h1 tag in the page	Add an h1 tag? What would that be?

notebook

• Should be able to tab into main notebook content within 3-4 tab taps
• Expand/collapse buttons should have ARIA attributes
• After tabbing onto toolbar, arrows should move between buttons within toolbar, and tab should move to next major area
• Focus state should be visible on tabbed items
• Kernel image logo (in top right) only has title text, not alt text

header

menu options

WCAG	Level	Diagnosis	Remediation

toolbar

WCAG	Level	Diagnosis	Remediation

cells

markdown cell

edit

needs screen shot

render

needs screen shot

code cell

edit

needs screen shot

render

needs screen shot