Skip to content

Instantly share code, notes, and snippets.

@gladiatorAsh

gladiatorAsh/Accessibility.md

Created December 10, 2019 22:18
Show Gist options
  • Save gladiatorAsh/bb2ed2151b2066ee4be20907d8fc61ce to your computer and use it in GitHub Desktop.
Save gladiatorAsh/bb2ed2151b2066ee4be20907d8fc61ce to your computer and use it in GitHub Desktop.
Download ZIP
Web Accessibility
Raw
Accessibility.md

Visual High contrast ratio. Inspect element helps with checking the contrast ratio Avoid communicating information using only color Test using screen readers Semantic elements using aria attributes Hearing Text alterantives for all media content Cognitive Limit animation and autoplaying videos for users by using the prefers-reduced-motion CSS media query Avoid interactions that are timing-based Mobility Keyboard accessibility - tabIndex, autofocus, Assistive technologies Speech Neural

Test -

  1. Test using keyboard
  2. Test using screen reader
  3. Can UI component work without sound?
  4. Can it work without color? Use Chrome extensions SEE and Daltonize
  5. Can UI component work wit high-contrast enabled? Use Chrome extension High Contrast
  6. Test using Chrome Dev Tools , the Accessibility tab in the Elements panel.
  7. Test using aXe and Lighthouse
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment