Code an Accessible Website in HTML & CSS

6 hours
Medium

Free online content available in this course.

course.header.alt.is_certifying

Last updated on 4/1/22

Improve Your HTML With ARIA Attributes

You've learned to use semantic HTML5 tags to define the regions of your page, but you'll need to add ARIA to ensure optimal accessibility.

What is ARIA?

ARIA is a kind of markup that can be used with HTML to add accessibility information into your code. Assistive technologies can gather important information from ARIA attributes, and then relay this information to users.

According to the W3C (World Wide Web Consortium), ARIA attributes can define:

The role of the element (i.e., a navigation menu).
The state of the element (i.e., whether a dropdown menu is open or closed). The state usually indicates a characteristic of the element that can change.
The property of an element (i.e., a label that gives the element an accessible name).

In this chapter, you will:

Improve browser compatibility with ARIA roles.
Label the regions of your page with ARIA attributes.

Improve Browser Compatibility With ARIA Roles

Modern versions of popular browsers (Firefox, Chrome, Safari) support HTML5 very well. They do not require ARIA attributes to understand the meaning and role of a tag when HTML and ARIA give equivalent information. However, in some cases having both HTML and ARIA provides broader support.

For accessibility, it is always important to think about the largest number of users, the browsers, and the tools they use. For example, it may be that:

Your users are not using modern browsers because they are not authorized to do so. In large companies, the IT department configures the machines, leaving no choice.
Their hardware is old and does not allow recent versions of major browsers.

Let's look at the role attributes that you can use in addition to HTML5 tags to help improve compatibility with all browsers.

Landmark roles identify regions of the page. In some cases, these roles serve the same function as HTML sectioning elements. For example, the HTML header element can also be expressed with ARIA by using role=”banner” . In other cases, they can provide information beyond what is currently possible with HTML and define the utility or function of an element or group of elements more precisely. For example, role=”search” , which enables the identification of a page section dedicated to search functionality, does not currently have an HTML equivalent.

Here is an example using role="search" :

<!-- Example of a search bar -->
<div aria-label="Repositories" class="mt-2 mb-3" role="search">
    <input
        aria-label="Find a repository…"
        autocomplete="off"
        class="form-control input-block mb-3 js-filterable-field js-your-repositories-search"
        data-query-name="q"
        data-url="https://github.com/"
        id="dashboard-repos-filter-left"
        placeholder="Find a repository…"
        type="text"
        value=""
    />
</div>

In the code above, div has been given a search role and its precise function is to look through GitHub repositories, which are defined through the aria-label.

Here is a second example, this time related to svg :

<!-- Example of an svg image -->
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"></path>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"></path>
</svg>

In the code above, the role attribute has the value img, allowing the screen reader to identify this element as an image. Here, the title tag serves as a label for the image.

Label the Regions of Your Page With ARIA Attributes

A web page may include several regions of the same type, for example, several nav or aside regions for complimentary content. In these cases, you need to provide more specific information by giving the region an accessible name.

Name Regions With an "aria-label" Attribute

An aria-label allows you to give a region a name that isn’t visible on the page but can be read by assistive technologies and communicated to non-visual users who rely on screen readers and braille displays.

You can use the aria-label to:

Identify multiple navigation menus: aria-label="Primary Navigation" and aria-label="Secondary Navigation" .
Distinguish several zones of complementary content:aside or ARIA role=”region” . For example, on a recipe website you could dedicate one aside to utensils and another to advertising content:aria-label=”equipment you’ll need” and aria-label=”advertisement”.

Let's look at an example of a page with multiple navigation menus. In the HTML below, you'll recognize the primary navigation menu from the previous chapter, where you learned to define a navigation region using the nav tag. This time, a second navigation region has been added to the code. See if you can spot the aria-label attributes that distinguish the two menus from one another.

<!-- Primary navigation menu -->
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Main navigation">
    <div class="bd-toc-item active">
        <a class="bd-toc-link" href="/docs/4.4/getting-started/introduction/">
            Getting started
        </a>
 
        <ul class="nav bd-sidenav">
            <li class="active bd-sidenav-active">
                <a href="/docs/4.4/getting-started/introduction/">
                    Introduction
                </a>
            </li>
            <li>
                <a href="/docs/4.4/getting-started/download/">
                    Download
                </a>
            </li>
            <li>
                <a href="/docs/4.4/getting-started/contents/">
                    Contents
                </a>
            </li>
        </ul>
    </div>
</nav>
 
<!-- Secondary navigation menu -->
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
    <ul class="section-nav">
        <li class="toc-entry toc-h2">
            <a href="#quick-start">Quick start</a>
            <ul>
                <li class="toc-entry toc-h3">
                    <a href="#css">CSS</a>
                </li>
                <li class="toc-entry toc-h3">
                    <a href="#js">JS</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

Point to an Existing Label With the "aria-labelledby" Attribute

In situations where your container - a section, or a navigation menu - includes a descriptive, visible title, you can point the container to this title to describe the section.

Consider the GitHub example from earlier. You can see that the labelledby attribute's value refers to this section's title by referencing its ID.

In other words, it identifies this section (by screen readers) as a grouping of links to repositories.

<!-- Example of an aria-labelledby -->
<div class="mb-3 Details js-repos-container " role="navigation" aria-labelledby="navname">
    <div class="js-repos-container">
        <h2 class="f4 hide-sm hide-md mb-1 f5 d-flex flex-justify-between flex-items-center" id="navname">
            Repositories
        </h2>
    </div>
</div>

Tonight in Gotham: Outline the Structure of a Landing Page

This project aims to focus not on the HTML and CSS but rather on the accessibility practices you need to follow to make it usable to the greatest number of people.

In the designers’ Figma mockups, the page is broken down into some of the regions we’ve covered.

You’ll notice that there are two possible values for some of the regions, i.e., footer / contentinfo . These represent the HTML sectioning element ( footer ) and equivalent ARIA landmark role ( contentinfo ) that can be used to identify these regions. As we’ve already discussed, you can use either or both in your code.

In HTML code for the project, you can see the following:

The tags used to structure the page are semantic. The page is composed of a header, main, and footer tag.
The header tag also uses the role="banner" attribute to maximize compatibility with different technologies.

<header class="header" role="banner">
    <a aria-label="Tonight In Gothman" href="#" class="header-svg">
        <svg role="img" alt="Logo de Batman" width="130" height="46" viewBox="0 0 130 46" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M43.1341 0.512695H0.893433C19.9876 6.2592 21.2125 19.8957 19.4381 25.9957C61.5071 22.5752 65.2847 44.9797 65.2847 44.9797C69.7492 26.3378 97.8524 24.3424 110.96 25.6537C106.839 11.6979 121.835 3.0781 129.848 0.512695H86.7485C85.6496 9.95338 75.4156 11.0594 70.436 10.4323L69.2341 1.88091C68.6846 2.29138 68.0893 5.24444 67.8604 6.66966H62.5374C62.5374 5.71191 61.6216 3.19212 61.1637 2.05194L59.9617 10.4323C44.8512 10.4323 42.4473 3.81922 43.1341 0.512695Z" fill="black" stroke="black"/>
<!-- ... --!>
</header>

The footer tag uses the role="contentinfo" attribute for the same reason.
Also, since our project uses several navigation menus, we differentiate them by using aria-label attributes.

    <footer class="footer" role="contentinfo">
        <nav class="footer-navigation" aria-label="footer navigation">
            <ul>
                <h3 class="footer-title">Contact</h3>
                <li>
                    <a class="footer-navigation-link" href="#">
                        Call Alfred
                    </a>
                </li>
<!-- … -->
            </ul>

Finally, you see that there is a search field identified by the role="search" attribute.

<form class="header-search" action="" role="search">
    <label class="sr-only" for="search">Search</label>
    <svg aria-hidden="true" role="img" alt="" class="search-icon" width="25" height="22" viewBox="0 0 25 22" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="10" cy="10" r="9.5" stroke="white"/>
        <line x1="17.3254" y1="15.6204" x2="24.3254" y2="21.6204" stroke="white"/>
    </svg>
    <input type="search" id="search" name="search" placeholder="search...">
</form>

Now that the main elements structuring our page are in place, we can focus on navigation.

Let’s Recap!

ARIA (Accessible Rich Internet Applications) is a markup used to add accessibility information to your HTML.
ARIA roles can be used to improve support across different technologies and define specific regions that do not have equivalent HTML tags (e.g., a search bar).
ARIA attributes, such as aria-label and aria-labelledby , help you provide information about your regions that HTML tags can't do on their own.

Now that you have learned how to structure a web page in an accessible way, let's focus on the site’s navigation.