marcysutton/accessible-uis.md

Last active June 25, 2018 14:32

Star () You must be signed in to star a gist
Fork () You must be signed in to fork a gist

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/marcysutton/4f55b65f073b38518ccbbfbca00f3308.js"></script>
Save marcysutton/4f55b65f073b38518ccbbfbca00f3308 to your computer and use it in GitHub Desktop.

Download ZIP

Accessible UIs - State of A11y

Raw

accessible-uis.md

How to accessibility!

Definition of done

Make accessibility part of it
Iterate, iterate, iterate!
Refer to WCAG and the ARIA Authoring Practices

Education

Awareness
Design and UX
Documentation
Training
Automated tests

Keyboard Support

Tab through a page! Can you reach and operate all interactive controls?
Focus management in widgets: into layers, escape to close, inertness/focus trap - https://egghead.io/lessons/css-focus-management-using-css-html-and-javascript
Actually hiding vs. visually hiding - https://egghead.io/lessons/html-5-visible-vs-hidden

Other key problem areas

Color contrast
Text alternatives: image alt, form labels, accessible controls (icon buttons)
Too much animation (see prefers-reduced-motion)
Semantic HTML, especially w/ JavaScript

Testing with axe

axe Chrome extension https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US
axe Firefox extension https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/
axe-core (JavaScript) https://github.com/dequelabs/axe-core

Manual Testing

Screen readers: Voiceover OSX & iOS, NVDA, JAWS
Learn more: https://egghead.io/courses/start-building-accessible-web-applications-today

User testing!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment