Conduct manual accessibility checks for all relevant components

[bengolder]

Inclusivity Score: manual accessibility check

Summary

For the components listed below, do a manual accessibility check and document whether the component passes those tests or has issues.

Details

• Timebox to 1 day at most. Anything remaining can be marked as untested.
• The database and form are one approach I thought might make this easier to document. Let me know if you have any feedback about how documentation or tracking could be easier.
• Reveal: manual accessibility checks #280
• Steps for manual checks
  • review the component using the WAVE browser plugin
  • interact with the component without using a mouse (only a keyboard)
  • you should be able to fully use the component with just a keyboard
  • focus should clearly visible when interacting via keyboard
  • optional additional checks
  • examine touch target size, make sure it's not too small (maybe 35x35)
  • use assistiv labs (shared login in lastpass, if it's not there, contact Alex or Ben S)
    • check windows high contrast mode and make sure that keyboard navigation and focus look good
    • interact with the component using NVDA screen reader on windows
  • interact with component using VoiceOver on iPhone

Components

This is a preliminary list. Please feel free to add, remove, or give feedback about the inclusion of any components in this list.

• [x] Accordion
• [x] Auto-formatted Input
• [x] Document upload button
• [x] Follow up question
• [x] Reveal
• [x] Buttons
• [x] Checkboxes
• [x] Data table
• [x] Date select
• [x] Pagination
• [x] Progress Indicator
• [x] Progress step bar
• [x] Radio buttons
• [x] Searchbar
• [x] Select
• [x] Steps
• [x] Summary table
• [x] Tab bar
• [x] Text input
• [x] Textarea
• [x] Vertical steps

Acceptance

This task is complete when all of the listed components have a documented result for the specific Inclusivity Score control. You can document the result here using this form.

[bengolder]

• manually test with a screenreader
  • name role value if you land on an element with screenreader it correctly states name, role, and value.
  • contrast of non-text elements (images/icons/SVGs) https://www.tpgi.com/color-contrast-checker/
    • svg or image for an example of a thing (like an example email or an illustration of an ID card)
    • not relevant to pure design elements

[cy-by]

Complete