List of accessibility issues

[elichad]

An incomplete list of accessibility issues in AMY UI and docs. Expect this to expand over time, especially when we do a proper accessibility audit.

• [x] ~in docs, include symbols for external links & open them in a new tab~ (edit 2023-07-31: opening in a new tab is discouraged. External link indicators are not required, and we can probably avoid the need by using descriptive link text)
• [ ] New event: can't select multiple non-adjacent items in the event tag list with a keyboard (as far as I can tell)
• [ ] Bulk add people: can't tab through the table that's created when bulk-adding people to events (and therefore can't make corrections by keyboard)
• [ ] New event: specify how to separate email addresses in the docs
• [ ] Workshop requests: 'Accept and create event' screen does not work on a narrow screen/at high zoom - the columns overlap
• [ ] Request training form: options are styled as links, not sure why
• [ ] Sometimes warnings appear after a form has already been submitted - better if they appear before so changes can be made if needed. (I made this note while playing with the training requests page, but don't remember which warnings I was seeing...)
• [ ] Training requests: Warning about unmatching before rematching shouldn't be a tooltip - it's easy to press the button before you realise the warning is there!
• [ ] Find workshop staff: filter sidebar doesn't display well on a narrow screen. It's not great in general but worse on this page because the location block is nested.
• [ ] Review recommendations from The Carpentries’ WAVE Report
• [ ] Correct any labels determined as “orphaned,” i.e., present but not associated with the correct form, such as the “What is your current occupation/career stage?” question.
• [x] Increase the contrast between the foreground (text) color and the background color.
• [ ] The instructor training application currently lists general contact information, but it should also include contact information specifically for accessibility issues.
• [ ] Check all <table> elements have a <caption> https://www.w3.org/WAI/tutorials/tables/caption-summary/
• [ ] Ensure tables are easily readable https://medium.com/@atikusdesign/accessible-table-design-cee5579937fd
• [ ] Person edit view (and elsewhere): Ensure heading ranks are not skipped https://www.w3.org/WAI/tutorials/page-structure/headings/#heading-ranks
• [ ] Ensure buttons are marked up using <button>, not <a> or <div> (e.g 'Mail selected trainees' on all_trainees page)
• [ ] remove nested tables, e.g. the "Your workshop activity" table on the instructor dashboard. They're hard to navigate with a screen reader, don't scale nicely for smaller screens, and create some contrast issues due to the double-dark stripes.

[elichad]

Comments from our Understood report "Summary of Implementation Steps" about the instructor application process:

• Review recommendations from The Carpentries’ WAVE Report
• Correct any labels determined as “orphaned,” i.e., present but not associated with the correct form, such as the “What is your current occupation/career stage?” question.
• Increase the contrast between the foreground (text) color and the background color.
• The application currently lists general contact information, but it should also include contact information specifically for accessibility issues.

[maneesha]

@elichad would it be useful to start separating these out into individual issues?

[elichad]

I hope to finish* compiling these issues over the next few weeks with the new GHA workflow and some manual auditing. Once that's done, it will then be good to separate them into smaller related groups or individual issues.

*to the best of my knowledge :)

[elichad]

Note to future self to check if our disabled button patterns need improvement, e.g. the one referenced in #2148

[elichad]

• [ ] remove nested tables, e.g. the "Your workshop activity" table on the instructor dashboard. They're hard to navigate with a screen reader, don't scale nicely for smaller screens, and create some contrast issues due to the double-dark stripes.

[elichad]

I found this useful list with accessibility acceptance criteria for forms: https://kb.iu.edu/d/biev Also this "a11y style guide": https://a11y-style-guide.com/style-guide/