But…why??
Intro to Melanie
So, why this talk?
accessible design system != accessible application
Agenda
Some Disclaimers
Accessible Names
Example UI: Adding 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
3 things to know about this spec
AccName: Browser Instructions
AccName: Browser Exceptions
AccName: Developer Guidance
AccDesc: Browser Instructions
AccDesc: Developer Guidance
End Detour
Headings, Labels, and Instructions
Headings
Headings TL;DR
If it looks like a heading, and acts like a heading…
…but doesnʼt sound like a heading… 31
…then itʼs not a heading, itʼs an #a11yFail
Why headings matter
Headings: What to do instead
Labels
Label requirements
Label Example #1
Label Example #2
Label Example #3
Labels: What to do instead
Bonus: helpful cat lady
Instructions
Instructions example: delete confirmation modal
Whatʼs wrong with this picture?
A note about uppercase
What to do instead: improved instructions
Reflow, Resize, Space
We don't support mobile, they say...
What weʼre trying to do... What are our desired outcomes for the user?
Incorrect Reflow example (before zoom)
Incorrect Reflow example (after zoom)
Correct Reflow example (before zoom)
Correct Reflow example (after zoom)
Text Spacing example (before)
Text Spacing example (after)
Spacing text
What to do instead for reflow, text-resizing, and text-spacing
Takeaway
Putting it all together
WCAG is the bare minimum
What are we really trying to do here?
Internal Requirements
Be a little selfish
As front-end developers…
In Closing...