But…why??
Introducing Myself
Open Source Projects
Other A11y Talks
So, why this talk?
As we all know...
Agenda
Some Disclaimers
Section 1: Accessible Names
Example UI: Add product integrations
Where this breaks for accessibility
Each link needs a unique accessible name
What might this code look like?
Equally viable options to consider
What to do instead: the aria-label option
What to do instead: the aria-labelledby option
Users can navigate by element groups
Bonus example: accordion using aria-labelledby
Detour
The Accessible Name and Description Computation
Detour Agenda
Three things to know about this specification
AccName: Browser instructions
AccName: Browser Exceptions
AccName: Developer Guidance
AccDesc: Browser Instructions
AccDesc: Developer Guidance
End Detour
Section 2: Headings Labels and Instructions
Section 2.1 Headings
Headings TL;DR
If it looks like a heading, and acts like a heading...
...but it doesn't sound like a heading...
then it's not a heading it's an accessibility failure
why headings matter
Headings: what to do instead
Section 2.2: Labels
Label requirements
Label example #1
Label example #2
Labels: what to do instead
Bonus label example
Bonus example: let's fix it
Section 2.3: Instructions
Instructions example: delete confirmation modal
What's wrong with it?
A note about uppercase
What to do instead: improve the instructions
Section 3: reflow, resize, space
We don't "support" mobile
What we're trying to do
Incorrect reflow (before browser zoom)
Incorrect reflow example (after browser zoom)
Correct reflow example (before browser zoom)
Correct reflow example (after browser zoom)
Text Spacing
After text spacing is applied
Spacing text requirements
What do we do instead?
Takeaway
Section 4: Putting it all together
WCAG is the Bare minimum
Think Beyond WCAG
How about some internal requirements?
Be a little selfish
Front-end developers....
You do not require permission to create accessible code