Five pieces of advice for more accessible websites

On March 29, WebAIM published an annual accessibility report. Unfortunately, the results are devastating, as usual. To improve stats for the next year, start with these five quick wins that will make your site much more accessible.

Accessibility starts with HTML

I am not an accessibility expert by no means. However, I follow accessibility leaders, and I read a lot of articles about it, so it would be fair to say that I develop with accessibility in mind (my site has no accessibility error). Even when accessibility is out of the budget, you could still improve accessibility without spending too much time. Improving your HTML is a good starting point, so let’s look at how to start.

Document language

Adding language to your HTML document must be one of the most straightforward tasks, even if your site is multilingual. Inspect the source code of your site and see if the lang attribute is present in your <html> tag.

<html lang="en">

Read more about declaring language in HTML.

The “skip” link

It might be a good idea to add a link at the top of the page that helps users skip to the main part of the page (there should be only one <main> element). It shouldn’t be too hard to implement such a link once and reuse it on every page (where it makes sense).

<a href="#main">Skip to main content</a>
...
<main id="main">...</main>

Read more about creating “Skip Navigation” links.

Labels and input elements

Every input field must have its label. Users are used to labels and rely on them to understand what information to provide.

<label for="firstName">First name:</label>
<input type="text" id="firstName">

Read more about creating accessible forms.

Empty buttons and links

Assistive technologies cannot properly announce empty buttons and links. So if you have empty buttons or links, take advantage of the .visually-hidden hack or label the button using aria-label. Remember to apply this advice, no matter the project’s stage. Once you lose track of these things, it is more unlikely that you will fix them.

<button class="button-play" aria-label="Play video"></button>

See more examples for buttons with non-empty accessible names.

Alternative image text

Always add alternative text to your images and try to write it as a sentence.

<img src="/tree.jpg" alt="A single oak three in the meadow.">

Conclusion

There are a lot of ways how you could make your site more accessible. Start with these five examples, and allow every user to understand your website better.

Blog