Simple steps for quick accessibility gains
Note: this post was inspired by Tetsuro Takara’s review of MeUndies’ accessibility. It’s a great read and I recommend checking it out.
Updating a website to meet accessibility standards can seem like a daunting task. Chances are it’s not as hard as you think! There are some quick changes that can make a big difference for your users.
Use ARIA attributes
ARIA is a set of special accessibility attributes which can be added to any markup, but is especially suited to HTML. The role attribute defines what the general type of object is (such as an article, alert, or slider). Additional ARIA attributes provide other useful properties, such as a description for a form or the current value of a progressbar. ARIA (MDN)
ARIA attributes are an accessibility guide for browsers and screen readers. Sprinkling your markup with some of these attributes (where appropriate, only) can bring big gains to your users that need it.
Keep in mind that the first rule of ARIA use is to use native elements where appropriate instead of immediately reaching for the ARIA attribute. This is meant to encourage the use of semantic markup.
<!-- Bad -->
<div>Save</div>
<!-- Better -->
<div role="button">Save</div>
<!-- Best -->
<button>Save</button>
Use ARIA landmarks
Landmarks replace the old “skip to content” overlays that were manually implemented in years past. These were always a pain to maintain and would quickly become out of date. The ARIA specification uses specific roles that act as landmarks. Supporting this feature is as simple as adding the appropriate roles to your markup.
<!-- Old, bad -->
<div role="navigation">
<h2>Skip Links</h2>
<ul>
<li><a href="#main-navigation">Main Navigation</a></li>
<li><a href="#main-content">Main Content</a></li>
<!-- etc -->
</ul>
</div>
<!-- New, good -->
<header role="banner">
<!-- header -->
<nav role="navigation">
<!-- links -->
</nav>
<form role="search">
<!-- search form -->
</form>
</header>
<main role="main">
<!-- main content -->
</main>
<footer role="contentinfo">
<!-- Privacy and copyright information -->
</footer>
Be keyboard friendly
It’s important to remember that not all of your users will be using a traditional mouse and keyboard. If you need to capture events on form elements, for example, make sure you’re not waiting for click events.
// Bad
button.addEventListener("click", handleSubmit)
// Good
form.addEventListener("submit", handleSubmit)
The above example is good practice regardless of accessibility concerns but it highlights a mistake that a lot of developers make. A form can be submitted in many different ways (inside of a text field and hitting enter, focusing the submit button and hitting space, etc) and it would be naive to think that a user would only ever click a button.
Describe your images
Remember when we used to add blank alt attributes so that our websites would pass XHTML validators? No? Just me? I’m sorry for that.
Alternative text is a simple way to describe an image to a user. The bonus of describing your images is that it’s not just for accessibility’s sake (which is already a great cause). This information can also be read by search engines to help understand the content of your page and it will also be displayed to users if the image fails to load.
Writing the perfect alternative text is not the easiest task. You want to be descriptive but not redundant. You want to be concise but accurate. This process is complicated further as there are some cases where you’ll want to use a blank alt attribute (alt="") if the surrounding text already describes the image.
WebAIM has written an article on how to approach this problem with some great examples.
So much more
These are just a few small examples of some easy wins. I am not an expert on this subject and have so much more to learn. If you have any other suggestions for quick wins please let me know!