Thread by @LareneLg

This final #GAAD post is a bit of a mashup.

I want to debunk things I was confused about when I first started learning about #accessibility, esp. ARIA (Accessible Rich Internet Applications), and give you some tips and everyday references.

Day 5 is #a11y learning 📚 ->

Many years ago, the web started becoming more "dynamic", i.e. we started adding a bunch of JavaScript to do fancy things.

Before HTML5, we only had <div> and <span>, so these fancy things were basically invisible to assistive technology.

ARIA was created created to solve this.

ARIA is a list of HTML tags that add *semantic* meaning to an element.

<h1>, <button>, <a> generally don't need ARIA, but <div> and <span> do, especially if they are interactive.

Always use semantic HTML over using ARIA.

ARIA is confusing for many, especially if you don't use a screen reader (SR).

It's important to note, ARIA only adds semantics

e.g. <div role="button"> tells a SR "this is a button"

ARIA does NOT add behaviour - keyboard and mouse interaction MUST be added using JavaScript.

You'll often hear "the first rule of ARIA, is don't use ARIA", if a semantic HTML alternative exists, use that instead.

Also, "No ARIA is better than Bad ARIA"; using ARIA without understanding it and testing with a screenreader, might break something that WAS accessible before.

Even though I've done a lot with ARIA, there's a lot to remember, so I always check examples of web components on the WAI-ARIA Authoring Practices.

Here's an example of a Date Picker - a notoriously inaccessible component on the web:

w3c.github.io/aria-practices…

Don't forget about Tab!

e.g. <div role="button"> needs to also have tabindex="0" to let users Tab to it, on top of the extra JavaScript to add "space" and "enter" keyboard behaviour.

You don't need tabindex for native interactive elements such as <a> and <button>, it's built in

Here, we're creating a button with a <div>, as an example.

How do we make it accessible? i.e. act like a <button>

1. Add role="button" to tell assistive tech that it's a button.
2. Add tabindex="0" to be able to Tab to it.
3. Use JS to add click, keydown, and keyup behaviour.

Today, most React, Angular, and Vue npm UI libraries are inaccessible.

This is a big problem, because they're used everywhere!

I always check the GitHub Issues and inspect the source code for #accessibility issues before I decide to `npm install` it.

Sadly most code snippets on the web are inaccessible! Even in documentation of the most popular JavaScript frameworks, and trusted online courses and tutorials.

If you're copying HTML or JS from anywhere on the web, chances are you'll need to add keyboard support and ARIA to it.

Next time you're building a component, google "accessible <component>" first - there's so much good stuff out there by amazing people.

For example, I recently googled "accessible light dark toggle" and found this amazing article by @SaraSoueidan

sarasoueidan.com/blog/toggle-sw…

If you want a really friendly and enjoyable guide to building inclusive web components, essential reading I recommend to everyone is @heydonworks' "Inclusive Components".

You find do book or blog form at inclusive-components.design

You can also watch his conference talks on YouTube

There are so many lovely people out there working to make #accessibility easier for all designers and developers, I wish I could list them all!

Here are a few #a11y superheroes changing the world:

@ericwbailey
@heydonworks
@marcysutton
@scottohara
@TatianaTMac
@ZoeBijl

If you're just getting started with #a11y, even if you've been doing web development for a long time without it (like I had been), I highly recommend this free Udacity course by Google.

It's short, it's simple, you also learn how to use a screen reader.

udacity.com/course/web-acc…

I leave you with this quote:

"When developers pay attention to certain coding standards, blind persons are able to participate in digital communication."

Today, digital communication is essential for participating in society.

It's up to us to make sure no one is excluded. ❤️

(Previous quote from Marc Sutton in yesterday's screen reader demo)

That's a wrap! 🌯

I hope you enjoyed this #a11y content as much as I enjoyed writing it! There's so much more I could say; this won't be the last you hear from me.

Stay healthy and safe!

Cheers,
Larene

✌️