In a previous post, we talked about aria-attributes and how they help give screen readers more context and clarity when interacting with your website. This blog post is about aria roles and semantic HTML.
Where aria-attributes give more information about an element, aria roles are the actual elements aria-attributes are describing.
In grammatical terms; aria roles are the nouns, aria attributes are the adjectives and semantic HTML are synonyms for aria roles.
Having an understanding of all these concepts can help us build a more accessible website, without making it difficult.
Aria roles indicate to screen readers the purpose of the element. Take divs for example. Divs are just empty structural HTML blocks. They have no meaning and are primarily used for laying out the website. But the moment you give it a role, you are indicating to the screen reader that this element now has a job. This creates an expectation for a screen reader user on how they will interact with this element or give the user more context about the content within the element, based on the role given to it.
Look at this piece of code.
<code> <div role=”button”> Do action </div> </code>
You are telling the screen reader that this element they’ve landed on is a button and it will be read out as “Do action button”. The user now has that understanding that they’re on a button and can press Enter or Space to interact with it.
An example of a contextual aria role would be the “navigation” role. A screen reader user landing inside of this element would expect a bunch of links to various parts of the website. You can even add an aria-label on top of the navigation aria role to let the user know what this groups of links represents.
<code> <div role=”navigation” aria-label=”Main”> <a href=”/”>Home</a> <a href=”/products”>Products</a> <a href=”/about”>About Us</a> <a href=”/history”>History</a> <a href=”/contact”>Contact Us</a> </div> </code>
This example shows the main navigation of the website. Each page could have more sub links, which could be grouped in their own navigation element with an appropriate aria-label to help distinguish between all the various navigation elements on the page.
There are many roles to work with and each one has a very specific purpose on what it should be used for. You can find a list of all available aria roles here.
Semantic HTML essentially is “meaningful” HTML. HTML that you can look at and understand right away its purpose and structure.
We mentioned that aria roles can give meaning to a div element. But there are many HTML elements that already have meaning to them.
Let’s look at the previous examples from before. First, the button.
<code> <div role=”button”> Do action </div> </code>
Now to make this button work properly, we’d have to make it focusable via tabbing and add a click event handler. This is how the code could look like.
Looking at that piece of code, you may not immediately be able to tell that it’s a button. Reading left to right, first thing you see is “div”, then you see the role of “button”. It takes that extra bit of effort to understand that this element is a button.
Now let’s look at this piece of code.
This code works exactly the same as the one above. Notice that there is no tabindex attribute added. It’s because <button> elements, by default, are already in the tab order of the page. You don’t have to worry about adding the tabindex attribute.
Let’s look at another common structure in HTML and compare the difference between using semantic HTML and pure aria roles aria attributes on divs.
First, using all divs with aria-roles.
<code> <div role=”banner”> <div role=”link” onclick=”goToHome()”> Company Logo </div> <div> Company Name </div> </div> <div role=”navigation” aria-label=”main”> <div role=”link” onclick=”goToHome()”> Home </div> <div role=”link” onclick=”goToProducts()”> Products </div> <div role=”link” onclick=”goToAboutUs()”> About Us </div> <div role=”link” onclick=”goToHistory()”> History </div> <div role=”link” onclick=”goToContactUs()”> Contact Us </div> </div> <div role=”main”> <div role=”heading” aria-level=”1”>Welcome</div> </div> </code>
Now using semantic HTML.
<code> <header> <a href=”/”> Company Logo </a> <div> Company Name </div> </header> <nav aria-label=”Main”> <a href=”/”>Home</a> <a href=”/products”>Products</a> <a href=”/about”>About Us</a> <a href=”/history”>History</a> <a href=”/contact”>Contact Us</a> </nav> <main> <h1>Welcome</h1> </main> </code>
You can see that not only is the code less cluttered in the second example, but it becomes easier to read and understand the structure of the page just be quickly looking at the HTML elements used.
When to Use Semantic HTML and When to Use Aria Roles
As much as possible, use semantic HTML. Almost all of these elements can be styled accordingly to suit your needs. A lot of work is already built into these native HTML elements, utilize it. Keep things simple for your future self who may have to maintain this code.
But there are many cases where there is no native HTML element available for the type of component you want for your website, like an actions menu. This is a scenario where you’d have to use aria roles to create one.
Hopefully, this has shed some light on how nice and useful semantic HTML can be. If you’re curious about how many HTML elements are at your disposal, this is a list of all available HTML elements and their corresponding aria roles.
You’ve also seen how useful aria roles can be when creating more complicated web components and when there are no available HTML elements for the purpose. Just don’t keep using aria roles for everything if it’s not needed.
Read through the available HTML elements, see what’s available. Build up your knowledge of available tools and this will help you build a more accessible website in a simpler way.