Accessibility: Start with the foundations

Last week I wrote up a primer on how I think about accessibility and in it I said I’d dig in deeper to the various pieces of the puzzle that make up an accessible site. Here’s the first of my followups talking about the foundation on which it all rests: writing good HTML and adding in the proper ARIA roles.

I can already hear a few of you questioning the need for ARIA roles now that we live in the wonderful world of HTML5. And, like you, I’m super excited that we have elements like <nav>, <main>, and <footer> but that doesn’t mean that all legacy browsers read and understand those elements. In fact, only Microsoft Edge is supporting all the new elements for accessibility. So if you want to provide good backwards compatibility, you still need to use them.

But first off, let’s look at HTML. Confession time: I still really love HTML. Writing HTML was the first time I wrote anything resembling code and then was able to see it do a thing. And if I’m being honest, it’s still a bit magical that I type characters in a file and it can show up in a browser and be seen by people all over the world.

HTML is important because it’s the foundation for the entire structure of your document. So using an <h1> on the page that is the main headline and then following that up by using paragraphs for text and lists when appropriate, you’ve already done a lot to make sure all users can easily get your content. Add in using <header> and <aside> at the right time, and you’re already well on your way to a great base.

I encourage you to think about and make sure you are using the right elements at the right time. Sometimes I overthink this, but that’s because it’s that important to me - I want to make sure that the markup I use helps people understand the content, and doesn’t hinder them. And Mozilla’s guide to HTML and HTML5 are both super helpful for making sure you understand all the elements.

All these elements provide us with the document outline. This outline is used by the browser to give users the best experience. You can check it using a number of developer tools or this handy outliner as you work, and it’s a good idea to check occasionally to make sure the outline is as you think it should be for the best read of the content.

So now that you have a good base of HTML, what types of ARIA roles should you think about adding? Well, do you have a search form on your site? Use role="search" in that <form> element. I realize it feels repetitive, but in order to be backwards compatible (IE 11 still doesn’t use HTML5 elements for accessibility), I still do <nav role="navigation"> on the sites I build. It feels weird, but hey, if it helps people who need it, it’s worth the few extra characters. In addition I use the following roles quite often, role="banner", role="complementary", and role="main". To see a list of common HTML elements and the roles that go along with them most of the time, checkout the A11Y Project Checklist, I still look there to double check things as I work.

Each site is unique, but reading up on and understanding ARIA roles for document and structure can help you give the little extra assistance some may need to get around and clearly understand your content. And when you put them on top of the right HTML elements for the right things, making use of <div> only when necessary for styling and not for content, you’ve widened the audience of your site that much more.

This article originally appeared on the Bocoup blog and was edited by Brian Brennan.