How to learn web accessibility

For everything you need to know about accessibility, check out Web accessibility - Everything you need to know, on Programming Duck.

Disclaimer: I'm not a lawyer. This article only represents my personal opinion and current understanding. It is not legal advice. Please consult a lawyer for information on the legal aspects of accessibility.

So you've decided to learn web accessibility? This article will show you how to learn it from complete beginner to advanced.

Prerequisites - Semantic HTML

The most important thing you can do for web accessibility is to use semantic HTML. HTML elements already have built-in accessibility semantics. As long as you use the correct elements and attributes, you're already doing 80% of what you need to do for accessibility.

If you work on the front end, this is something that you should already know how to do. However, it's always good to refresh your knowledge.

If you need a refresher, have a look at the HTML element reference on MDN. It's a page that you can scan over in a few minutes, or read fully in about 20 minutes. It lists all of the HTML elements and what they should be used for.

If you need additional information on a particular element, you can visit the reference page for that element. For example, here is the MDN reference page for the <body> element.

Otherwise, if you're a beginner developer and you don't know semantic HTML yet, I recommend starting with some beginner web development resources instead. Then, you can continue learning accessibility afterwards.

Testing and practice

When learning anything, practice is essential.

When it comes to accessibility, you practice by using the website as a person with disabilities would. For example:

Using only the keyboard for navigation
Using only a screen reader to experience the content of a web page (without using sight)
Using vision deficiency simulation tools on your website

First-hand experience can't be beaten, so it's really good to do these things. You don't have to do all of them every time, but the more you practice the better.

Additionally, as with anything, you need to test your work. These are the kinds of things you will be testing when you're doing accessibility work professionally. Therefore, it's good to get used to it early.

If you're not sure on how to do these things, the learning resources below will help you.

Resources for learning web accessibility

After semantic HTML, which is essential, you need to actually learn about accessibility. There are many good resources for doing so. Here are some that I've personally tried and recommend.

Introductory video courses

I've personally watched two introductory video courses which I highly recommend:

In addition to those courses, I imagine that there are many other accessibility courses which are quite good. If you find a different course that you want to watch, then by all means do so.

These are introductory courses. However, they cover a lot. I suspect that if you just watch these two courses, you'll know more about accessibility than most front end developers. Then, as long as you refer to a few important resources as you work, you'll probably be able to do most, if not all, of the required accessibility work.

However, if you stop here, you won't get as much insight into accessibility as you would if you studied from some of the more thorough resources.

If you only want to watch one of them, I would suggest website accessibility by Jon Kuperman. They're both great courses, but this one covers the basics a bit more broadly. The other one is a bit more advanced and more suitable for JavaScript applications specifically.

MDN and web.dev

Here's the MDN page on accessibility.

Here's the web.dev page on accessibility.

These websites are staples for front end developers.

In particular, MDN is very thorough with its accessibility information. If you want to learn accessibility quite well as a front end developer, I highly recommend reading through MDN's resources. They cover:

Semantic HTML
Different disabilities and assistive technologies
Creating custom widgets
WAI-ARIA
And more

The web.dev information is great as well, but less thorough. I consider it introductory level, but perhaps slightly more thorough than the video courses mentioned earlier.

WebAIM articles

The WebAIM articles are even more thorough than MDN.

They are great for:

Understanding a lot about the motivation for accessibility.
Understanding a lot about different kinds of disabilities and how people with those disabilities use websites.
Learning accessibility very thoroughly.
Providing recommendations on specific topics about accessibility. For example, they have a detailed article specifically about alt text for images. I haven't seen anything comparable elsewhere.

The only potential downside is that the WebAIM articles don't have many code examples. If you prefer code examples, MDN may be more suitable for you. However, if you're confident with HTML and JavaScript, you may be able to implement the concepts you learn without code examples. In that case, the WebAIM articles should be fine.

Alternative learning resources

Some people prefer learning from books. If that's you, then please feel free to use a book instead. Unfortunately I can't recommend one since I haven't read any books on this topic. If someone from the comments would like to offer any suggestions, please do so.

Also, please feel free to use any other good resource that's not mentioned here.

Additional recommended learning

There are some additional things to learn that may not be sufficiently covered in other resources.

Accessibility statements

Some countries (such as the UK) require accessibility statements. Even if they don't, WCAG mentions that there are many good reasons to have one.

Please see the WCAG page on accessibility statements to learn about them.

WAI-ARIA

Another thing that you should learn properly is WAI-ARIA.

WAI-ARIA has many documents. The one you want is the WAI-ARIA authoring practices document. It provides explanations and recommendations for how to apply ARIA correctly. Also, it's intended for developers, so it's not too difficult to read.

Also, you can primarily use it as a reference. This means that you don't have to read it from start to finish. You can just read some of it so you're aware of what it contains. Then, you can refer to it if something relevant comes up in your work.

Overall, it's probably sufficient to:

Read the introductory section.
Read about some of the design patterns and widgets. Just a few will do. This will give you an idea of what you're expected to do if you create custom widgets in the future.
Scan through the rest.

Then, refer to it in the future as necessary.

Further learning

If you want even more knowledge than that, here are a few things you can do.

Follow web accessibility experts

Web accessibility experts do the latest research and constantly improve the field of web accessibility.

By following them (following them on Twitter, reading their blogs, etc.), you'll be able to learn things from them that aren't in the official specification yet.

Additionally, they may recommend useful techniques that may never be incorporated in the specification.

Look at the WCAG documents

The WCAG documents include the official specification, a large list of accessibility techniques and the "Understanding WCAG" document.

Search for more information on specific topics

If you're interested in a specific topic, the fastest way to learn more about it is probably to search about the topic using a search engine.

Learning plan

That's a lot of resources. What should you actually do and which resources should you learn from? It depends on how much you want to learn, how much time you have and your preferred way of learning.

If you want a good introduction to the topic, I recommend watching one (or both) of the video courses. It's possible to stop there. At that point, you'll know much more about accessibility than most developers. It's also possible to skip this step if you're not interested in introductory courses.

If you want to learn accessibility even better, go through the MDN resources. They're very thorough. Again, you can skip this step if you don't want to do it.

If you want something even more thorough than that, then read all of the WebAIM articles.

Personally, I studied from all of those resources in that order and I found them very useful. However, in your case, you can pick and choose the ones you like.

Also, it's fine to go through some resources, stop and resume your learning in the future.

Alternatively, you can use a completely different plan and different resources. It's all up to you.

Finally, spend some time to learn about accessibility statements and WAI-ARIA specifically.

Final notes

That's it for this article.

Please comment if you have any comments or suggestions, particularly if you want to share any more resources that you think would be useful for beginners.

Next, if you want to know more about accessibility, as well as how to apply it while you work, please see the article Web accessibility - Everything you need to know.

Blog