Becoming an accessibility-focused developer
Accessibility is everyone’s responsibility
Accessibility needs to be considered at every stage of the product development lifecycle
We work in imperfect organisations
We work in imperfect organisations
We work in imperfect organisations
Our sphere of control
Habits to build
add accessibility linting with eslint-plugin-jsx-a11y
jsx-a11y
jsx-a11y example
Commit to 2 key pieces of refactoring
Replace divs with semantic alternatives
Why not a div?
Landmarks
Landmarks - HTML sectioning elements
Header
Footer
Nav
Main
Aside
Section
Lists
Lists
Audit your headings
Why audit your headings
Headings navigation example
Headings when there's none in the design
Visually hidden CSS
Heading levels - structure, not style
Heading structure - example 1
Heading structure - example 2
Rules for headings
Verify your code in the browser
Axe/Wave
Example Axe output
Check your work is operable by keyboard alone
Keyboard operability
Check your code works for screen reader users
How often should we check with a screen reader?
Screen reader / browser combos
Key screen reader skills - switch on/off
Key screen reader skills - read parts of page
Key screen reader skills - interact with items
Your new pre-push checklist
Pre-push checklist
Further reading