Why is it important?
It benefits everyone
Almost everyone will experience some form of disability in their lifetimes.
Disability can be situational or temporary
It is a 'Green' space
Lots of room to develop new tools and best practices
Loss of Sales/Conversions
Want users to feel certain and confident in using what you've built.
Good accessibility is good UX
What is Web Accessibility?
WCAG: Web Content Accessibility Guideline
Spec for building accessible applications
Can be overwhelming
Distilled into WebAIM checklist for WCAG for easier consumption
Great starting point for Accessibility development
Geared towards web content
ARIA Design Patterns
Guidelines for keyboard support for different interaction patterns
Not directly controllable
ARIA Attributes can modify the tree
Modify the tree dynamically by using JS to change ARIA attributes
Hands off information to Assistive Technology
Numeronym for Accessibility
First and Last letter (A, Y)
Number of Characters omitted (11)
Used widely on twitter due to character restrictions
Ex: Localization (l10n) & Internationalization (i18n)
How do I incorporate accessibility?
Understand the diversity of users
~15% of the world population lives with some form of disability.
Types of Disabilities
Ranges from RSI, Paralysis, to limited range of motion
Head or Eye Tracking
Ranges from complete blindness to limited or low vision
High Contrast Mode
Ranges from Deaf to Hard of Hearing
Visual Indicators that audio is playing
Covers a broad range of disabilities, ADHD, Dyslexia, Autism, etc
Make easier to read
What does 'Focus' mean in applications and on the web?
Focus helps determine where Keyboard events go on the page
Users who rely on keyboard navigation depend on your focus and tab index functionality
The order in which elements are focused using tab navigation
By default based on the elements position in the DOM
Can be troublesome once elements are repositioned using CSS
Leverage the natural DOM order whenever possible
Try tabbing through your site from time to time to see how you're doing
Attribute tabindex can be used to alter the tab navigation
tabindex = 0: adds the element to the natural tab order based on the position in the DOM and makes it focusable by the focus() method
tabindex = -1: removes the element from the tab order and makes it non-focusable
tabindex = 1+: moves the element to the front of the tab order. Generally considered an anti-pattern
What Can and Should be focused
Many Native Elements are implicitly focusable
Typically elements that include some sort of native interaction
Naturally inserted in the tab order
Elements that don't need user interaction
Dont make something focusable if it is not interactive
Opt for using native elements instead of forcing focus functionality into non-semantic elements whenever possible
Browser adds a lot of magic behind native elements that would have to be custom coded for non-native elements
If you do have to build custom elements, make sure to code back in keyboard support
Use proper Semantics
What do we mean by semantics?
Offer or afford a user the opportunity to perform an action.
Handle, visual affordance indicates I can pick it up
Spout, visual affordance indicates I can pour the contents
Visual affordances indicate to us how to use something, we don't need someone to instruct us how to use it.
Ex: Web Button
We might visually make a web button look like a real life button to indicate interaction
Attributes that indicate affordances to non-visual interaction tools
What is the elements purpose
How can we refer to the element
Optional, declare the current state of the element if it has different states it could be presented in.
Optional, the current value of the element, if necessary
How does it affect A11y?
Proper semantics help the application communicate to assistive technology
Spec that adds the ability to modify and enhance the semantic meaning of elements in the DOM
ARIA only changes Semantics
DOES NOT CHANGE BEHAVIOR
Similar to focus, Native elements get implicit semantics
Use Native Elements whenever possible