Please enable JavaScript.
Coggle requires JavaScript to display documents.
Developer A11y Requirements, Legend Grey: AAA :lower_left_paintbrush::…
Developer A11y Requirements
Display adaptations
Know
Variety of display options used
Why images of text are no good
Why viewport constraints will be ignored
Do
Test their work with display changes
Orientation
Resize/reflow
Text spacing
High contrast
Use flexible CSS
Units
Responsive
No important
Provide border styles for HC
Test for contrast reqs & find alternatives if needed :lower_left_paintbrush:
Avoid using before/after for meaningful content?
Navigation
Know
Common navigation problems
Options available in AT
What the tabindex attribute represents
Difference between SR and KB nav
Do
Choose correctly link vs button
Make implicit info explicit (current, nav labels, etc)
Provide keyboard support
Manage focus at page level
SPAs
Modals
Menus
Provide focus indicator
Provide skip links
Provide useful titles, headings and link text :pencil2:
Check focus order makes sense
Provide multiple ways :lower_left_paintbrush:
Make hit targets big enough
Make hover/focus content
dismissable, persistent & ?
Provide iframe titles
Forms and feedback
Know
Forms mode in SR
Effect of magnification :lower_left_paintbrush:
How label-in-name problems happen
Effect of on-focus/on-input problems
Do
Add instructions to inputs
Add error messages to inputs
Provide accessible status updates
Search /filter results
Task updates
Use patterns for complex widgets
Add labels to inputs
Test for parsing errors
Add autocomplete attributes to inputs
Media and alternatives
Know
Differences between media types
Why different alts are needed
Do
Choose correct alt method for images
Choose correct alt method for multimedia
Write decent alt content :pencil2:
Structure and layout
Know
Semantics matter
DOM order matters
Do
Choose semantically appropriate HTML elements
Use main appropriately
Use headings appropriately
Avoid using CSS to reorder important things
Mark up tables correctly
Add lang attributes
Use other landmarks appropriately
Motion and interactivity
Know
Who is affected and why
Why tooltips and carousels are trash
Why timed interactions are yuck
Why 3 flashes rule exists
Do
Provide alternatives for complex controls :lower_left_paintbrush:
Single-point for multi-point & path
Provide a way to disable motion actuation
Hide things properly
Animate responsibly
Make shortcuts remappable
Manage focus at feature level
Update current state
Provide keyboard support
Provide pause/stop/hide controls
Use event-end instead of event-start
Legend
Grey: AAA
:lower_left_paintbrush:: design input needed
:pencil2:: content input needed