devices over wood blog 2.jpg

Usablenet Blog

    A Technical Guide to Getting Started with Web Accessibility: Part 2 (WAI -ARIA Landmarks) [Blog]

    by Roland Campbell
    0 Comments

    Today, by failing to meet web accessibility standards, you exclude a large portion of the population from using your digital services: a population that currently controls $8 trillion in spending power. A large number of businesses, both to avoid legal repercussions and to meet the social responsibility of an inclusive web, have started to make moves toward ensuring their websites are accessible.

    Assuming that you have read part 1 of our Technical Guide to web accessibility, you already know how to get this process started using proper image links and alternative text (WCAG 1.1.1).  We will now move on to a slightly more advanced topic: using ARIA landmarks to identify regions of a page (WCAG 1.3.1).

    Learn how using the following guide:

    What are ARIA landmarks, and why use them?

    ARIA (Accessible Rich Internet Applications) landmarks offer a way to divide your web page into logical sections. By providing landmarks, you enable users of assistive technology (AT) to more easily navigate to the sections of the page they want to interact with. 

    Currently, there are eight landmarks, as defined by the W3C. See the full list below, or learn more here.

    1. banner: A region that contains the prime heading or internal title of a page.
    2. complementary: Any section of the document that supports the main content, yet is separate and meaningful on its own.
    3. Content info: A region that contains information about the parent document such as copyrights and links to privacy statements.
    4. form: A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing.
    5. main: Main content in a document. In almost all cases a page will have only one role="main".
    6. navigation: A collection of links suitable for use when navigating the document or related documents.
    7. search: The search tool of a Web document
    8. application: A region declared as a web application, as opposed to a web document.

    (note: The role of application should be used with caution because it gives a signal to screen reading software to turn off normal web navigation controls. Simple widgets should generally not be given the application role, nor should an entire web page be given the application role, unless it is not to be used at all like a web page, and not without much user testing with assistive technology.)

    How to use ARIA landmarks in your HTML

    ARIA landmarks are defined as a role parameter to another HTML structure, often a div, but not always. With the advent of HTML5 you can use specific tags, with varying levels of support by different browsers. Currently, you can (and maybe should) use both, although that can cause a repetition of the role to be spoken by the assistive technology in use.

    Let’s look at how you can divide up your site, using these landmarks, in a way that makes sense. The WC3 has an example site, so we will use that as our example.

    You will see that the top part in gray is the banner. The two reddish blocks on the right side are complementary, and the green box on the left side is navigation. The blue box is main with a teal region at the bottom of the main.

    Remember that landmarks can be inside other landmarks, and often are. For example, the typical retail site will have a banner at the top that includes a search landmark and at least one navigation. So how do you do this in code? A banner could be defined like the following:


    Banner definition pre HTML5

    <div role=”banner”>

                    <ul>

                                    <li> your menu  other stuff ....

                    </ul>

    </div>

     

    Banner definition HTML 5

    <header>

                    <ul>

                                    <li> your menu  other stuff ....

                    </ul>

    </header>

     

    It wouldn’t hurt to add the roles to the HTML5 code just now. In fact, many people consider it best practice. However, you need to come up with your own policy for that, and perhaps do some user testing with disabled users to get their feedback.  You should also be able to remove the repetition soon, as browsers become more compatible. ARIA landmarks, overall, can be more of a challenge to implement but add real value when it comes to making your accessible experience more navigable. The table below matches the HTML5 tag to the ARIA role for clarity:

    HTML 5

    ARIA Role

    <header>

    role=”banner’

    <nav>

    role=”navigation”

    <main>

    role=”main”

    <footer>

    role=”contentinfo”

    <aside>

    role=”complementary”

    none

    role=”search”

    <form>

    role=”form”

     

    What’s Next?

    Now that you understand when, why, and how to use ARIA landmarks, you can move on to the next phase in your guide to beginning web accessibility. Read part 3 of our Technical Guide to web accessibility here.

    Web Accessibility

    Consultation
    Need to improve digital usability, accessibility or performance? We can help.
    Request a Free Consultation!