Accessibility is a critical skill for developers doing work at any point in the stack. For front-end tasks, modern CSS provides capabilities we can leverage to make layouts more accessibly inclusive for users of all abilities across any device.
This post will cover a range of topics:
- Focus Visibility
- Focus vs. Source Order
- Desktop Zoom and Reflow
- Sizing Interactive Targets
- Respecting Color and Contrast Settings
- Accessibility Learning Resources
What Does "Accessible" Mean?
#
Accessible websites are ones that are created without barriers for users of various abilities to access content or perform actions. An internationally agreed-upon standard called the Web Content Accessibility Guidelines – or WCAG – provides success criteria to help guide you towards creating accessible experiences.
Common accessibility barriers include:
- inability to see content or distinguish interface elements due to poor color contrast
- reduced or removed access to non-text content such as within images or charts due to failing to provide alternative text
- trapping keyboard users due to not managing focus for interactive elements
- causing headaches or worse for users with vestibular disorders due to motion and flashing/blinking animations
- preventing users of assistive technology such as screen readers from performing actions due to failure to make custom controls accommodate expected patterns
- limiting common assistive technology navigation methods due to not using semantic [...]