Please enable JavaScript.
Coggle requires JavaScript to display documents.
Web Accessibility (Why is it important? (It benefits everyone (Almost…
Web Accessibility
Why is it important?
Legal Reasons
Loss of Sales/Conversions
It is a 'Green' space
Lots of room to develop new tools and best practices
It benefits everyone
Almost everyone will experience some form of disability in their lifetimes.
Disability can be situational or temporary
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
Application Breakdown
GUI
Accessibility Tree
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
A11y
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
Motor
Ranges from RSI, Paralysis, to limited range of motion
Head or Eye Tracking
Keyboard Navigation
Voice Control
Visual
Ranges from complete blindness to limited or low vision
High Contrast Mode
Screen Magnification
Brail Display
Screen Reader
Auditory
Ranges from Deaf to Hard of Hearing
Video Captions
Audio Transcripts
Visual Indicators that audio is playing
Cognitive
Covers a broad range of disabilities, ADHD, Dyslexia, Autism, etc
Zoom Functionality
Make easier to read
Minimize Distraction
Understand Focus
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
Tab Order
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
Button
Input
Select
Typically elements that include some sort of native interaction
Naturally inserted in the tab order
Non-focusable elements
Headers
Paragraphs
Images
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?
Affordances
Offer or afford a user the opportunity to perform an action.
Ex: Teacup
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
Role
What is the elements purpose
Name
How can we refer to the element
State
Optional, declare the current state of the element if it has different states it could be presented in.
Value
Optional, the current value of the element, if necessary
How does it affect A11y?
Proper semantics help the application communicate to assistive technology
WAI-ARIA
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