Accessibility is the design of products, devices, services, or environments for people with disabilities.

ACCESSIBILITY = DESIGN FOR PEOPLE

Alice

Bob

Charlie

Dominic

Availability and Accessibility

Safety and Privacy

Convenience and Cost

Delightful Experience

https://webaim.org/resources/contrastchecker/

✅ Aim for >3:1 - AA

✅ Prioritize Text

✅ Minimum 16px text

✅ Font-family consistency

✅ Standard paragraphs and letter spacing

✅ 80 characters per line

✅ No unexpected transitions

✅ Use prefers-reduced-motion

✅ No parallax / scroll to

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity/

✅ Stop the divfest

✅ Define landmarks

✅ Use headings in the right order

✅ Use the <label> tag

✅ Should be keyboard accessibile

✅ Use nav and list elements

https://www.smashingmagazine.com/2017/11/building-accessible-menu-systems/

✅ Use meaningful alt text

✅ Use clear title for links

✅ Avoid "click here" and "read more"

✅ Support for tab navigation

✅ Menu / lists - support left/right & up/down arrows

✅ Escape / Enter support

https://github.com/ten1seven/what-input

✅ Never do outline: 0

✅ Style your own outline

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible

✅ :focus should accompany :hover / onclick

✅ Follow the natural order (tabindex > 0 is an antipattern)

✅ Focus trap / loop in modal windows

✅ Handle focus after navigation / content change

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/

✅ Interactive elements should be at least 44px big

✅ Small icons should use paddings to increase touch area

https://a11yproject.com/posts/large-touch-targets/