DEV Community

Cover image for Five pieces of advice for more accessible websites
Silvestar Bistrović
Silvestar Bistrović

Posted on • Originally published at silvestar.codes

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">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.">
Enter fullscreen mode Exit fullscreen mode

Read more about how to provide the best alternative text for images.

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.

Top comments (0)