# retrolab accessibility auditing this document will drive breakout rooms for the [2021 jupyterlab accessibility workshop](https://hackmd.io/@p5jde6ivTRa6LnqFD8l8wQ/Hk42FoH_Y). 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](https://wave.webaim.org/extension/) * retrolab installed or [![Binder Main](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/jupyterlab/retrolab/main?urlpath=retro/tree) ## file browser ### header ![](https://i.imgur.com/cYYOwqG.png) | 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 ![](https://i.imgur.com/vxz9cNB.png) | WCAG | Level | Diagnosis | Remediation | | ----- | ----- | ----------- | ---- | | | | | | ### file browser ![](https://i.imgur.com/5hoiH5G.png) | 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](https://github.com/jupyterlab/lumino/blob/72d1e84b7e8d0e838fef9b184a52f226b5f184a6/packages/widgets/src/commandpalette.ts#L212-L224) | | 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 ![](https://i.imgur.com/5RpUfNw.png) ### menu options ![](https://i.imgur.com/xefH9Js.png) | WCAG | Level | Diagnosis | Remediation | | ----- | ----- | ----------- | ---- | | | | | | ### toolbar ![](https://i.imgur.com/ZvjZ8Pk.png) | 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_