What's next for accessibility?

Hey ,

I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.

Please upgrade (use this link) access this content.

I'm super eager to help you learn more!

What's next for accessibility?

We built 5 accessible components together in this course. That’s all we’re doing for accessibility in this course. We won’t be building the rest of the components. Why? Two reasons:

  1. You already know Accessibility
  2. Let’s focus on JavaScript

You already know Accessibility

You don’t need to make every component accessible to know how to make accessible components. You already know how to. You have good foundations. And you can explore the rest yourself if you want to.

Let’s focus on JavaScript

If you want to make every component accessible, you need an in-depth understanding of WAI-ARIA. This means you have to read the specifications (actually you don’t, because I read it for you) and understand the differences between every aria property out there.

This can be super confusing. For example, the spec says certain ARIA properties are compulsory (like aria-controls), but these properties don’t work across screen readers…

They also recommend things that cannot be applied. For example, it says there are two methods to help screen readers focus on elements. One of them isn’t even worth doing. I did an in-depth research and wrote an article comparing the two.

So you need to figure out the inconsistencies between what the spec recommends vs what screen readers actually implement. You also need to figure out the inconsistencies between different screen reader + browser pairings…

So… Accessibility is a HUGE and COMPLICATED field. Let’s not go there.

This is a course on JavaScript. Let’s focus on JavaScript.

Accessibility hints

Here are some hints if you want to try making the rest of the components accessible:

  1. Calculator
    1. Use role=application
  2. Datepicker
    1. Use role=grid for the date grid
  3. Typeahead
    1. Use role=combobox for the typeahead component
    2. Use role=listbox for the list of options
    3. Use role=option for each option

With that, let’s move on to the next topic! 😃.