Accessibility

[Gazook89]

Opening this Discussion basically so i have a place to put down some notes as I look at components. This will at least initially be edited very frequently as a "developing" comment. Also, it's in no way an exhaustive list of accessibility shortcomings--- just a place to write down the ones I notice.

Web Content Accessibility Guidelines (WCAG 2.0)

Relevant Issues

#3032

Edit Page

Major Landmarks

Landmarks are prominent areas of the page which can be used to orient ones position within the rest of the page.

• Top navbar
• Editor Pane
• Preview Pane

Potential "tab sequence", without setting an explicit tabOrder attribute on each element, can be:

1. Each item in NavBar
2. the Editor pane
   • use Space or Enter to focus on SnippetBar
   • use arrow keys to move between SnippetBar menu options, or Tab to move to CodeEditor
   • use Space or Enter to focus into codemirror, and Esc to move back to CodeEditor, and Esc again to get to Editor pane
3. the divider bar
4. the Preview pane

Text/Style Editor

• Codemirror 5 seems to be less friendly to vision-impaired users than Codemirror 6, but could still have some basic enhancements.
  • Add escape hatch from the text area (editor) so that focus can be moved out of it with Tab. Recommendation on Codemirror docs is to basically set Escape as a hotkey to move focus from text area to the wrapper element, and then allow Tab to move to other page components.

Properties Editor

• None of the <label>'s are associated with their input fields. They should have for= (or htmlFor= in react) attributes that point to <input> id= attributes. Likely the first input in the properties editor should have autoFocus as well.

[5e-Cleric]

related to #3032