But…Why?

Introducing Myself

Open Source Projects

Other A11y Talks

So, why this talk?

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

If it looks like a heading, and acts like a heading...

...but it doesn&amp;#039;t sound like a heading...

why headings matter

Headings: what to do instead

Label requirements

Label example #1

Label example #2

Labels: what to do instead

Bonus label example

Bonus example: let&amp;#039;s fix it

Instructions example: delete confirmation modal

What&amp;#039;s wrong with it?

A note about uppercase

What to do instead: improve the instructions

We don&amp;#039;t &amp;quot;support&amp;quot; mobile

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

What do we do instead?

WCAG is the Bare minimum

Be a little selfish

Front-end developers....

You do not require permission to create accessible code