</> for A11Y

Follow along

https://git.io/vFPo6

What we will look at

Mindset

Semantics

Mindset

Key point

Coding for accessibility is not only about coding for people with disabilities.

It's just as much about coding for people without.

Take me for example: I really don't like using a mouse.

In fact, chances are that most of you don't either.

As developers, we spend most of our time manipulating text.

If we can accomplish a task with a keyboard, we likely prefer doing so.

By making sure you code with accessibility in mind, every user of your application will benefit.

Things to keep in mind

If you can do a thing with a mouse–whatever it may be–you must also be able to do the thing with a keyboard.

No excuses! Seriously.

Don't

The above will only react to mouse interaction, not keyboard interaction.

Do

The above will react to mouse and keyboard interaction.

Don't

Buttons now only react visually to mouse interaction and not keyboard interaction.

Do

As a rule of thumb make sure that focus appears alongside hover.

If you have an implicit relation between elements of your UI, make that relation explicit.

Don't

Sighted users will be able to infer the relation between the button and the thing it toggles, but users who rely on screen readers will not.

Do

By making the relation between the button and the thing it toggles explicit, screen readers will now play along as well.

In conclusion

Make a habit of not assuming how people will interact with your UI. Leave all doors open!

Semantics

What is that even? Exactly!

When we walk about semantics, we're really interested in answering the question "what is the thing?" and not "what does the thing look like?"

By answering the second question, you can typically be sure that an answer to the first question will appear as well. Herein lies the problem!

Users without sight will not be able to answer the second question, leaving it up to their screen reader to attempt to answer the first question.

The only way a screen reader can provide an answer is if you–the person coding the thing we're questioning–made it explicit what the thing is.

What to do?

Use semantic markup

or

Add semantic hints

Let's make a table!

With semantic markup

Native tables are really hard to work with though. Have you ever tried creating overlapping cell borders for example? It's actually impossible!

With custom markup

Much better! Tables based on divs and flexbox are a lot easier to style and we're free to do it however we want.

There's one problem though... Screen reader support!

With semantic hints

Now we have markup and styling freedom and screen readers play along as well. Yay!

Beware!

Looks can deceive

What is this?

If you're thinking that the toggle should be a button then I definitely agree with you.
But is it so?

Another rule of thumb

Buttons should never move focus away from the thing being interacted with.

Links should always move focus away from it.

...and please don't ever write href="#".

That's it!

Questions?

Thanks!