Accessibility: Introduction to the chrome accessibility tab

Add to bookmarks

Tue May 28 2019

Accessibility has become a major part of web development in recent years. No web page can claim to be complete if it doesn't have an accessible interface that can easily be understood by assistive technologies.

Thanks to chrome's accessibility tab, developers can easily navigate the accessibility tree of their application and see how page information would be presented to users via assistive technologies (e.g Screen Readers).

Accessibility Tree?

Think of the accessibility tree as the visually stripped version of your page's DOM, it contain's textual information about the elements in your page. It is basically the version of your page that is shown to the assistive technologies. Something like this: Accessibility Treesource: google devevlopers

What is the Chrome Accessibility Tab?

To fully grasp the usefullness of the accessibility tab; think of it as the DOM inspect tab for the "screen readers".

Example

Let us take this piece of HTML code as an example (css classes have been removed):

<html lang="en">

<head>
    <title>Accessibility test</title>
    <link rel="stylesheet" type="text/css" href="./main.css">
</head>

<body>
    <header>
        <div>
            <ul>
                <li><a href="test">Home</a></li>
                <li><a href="test">About</a></li>
                <li><a href="test">Contact</a></li>
            </ul>
        </div>
    </header>
    <main>
        <h1>Title</h1>
        <button>Button text</button>        
    </main>
</body>

The fully expanded accessibility tree for the menu link item should look like this:

Accessbility tabs

As you can see from this, the header menu items (intended) are simply seen as links in list items in a banner (header). If we were to update the HTML with this:

<html lang="en">

<head>
    <title>Accessibility test</title>
    <link rel="stylesheet" type="text/css" href="./main.css">
</head>

<body>
    <header>
        <nav>
            <ul role="menu">
                <li role="menuitem"><a href="test">Home</a></li>
                <li role="menuitem"><a href="test">About</a></li>
                <li role="menuitem"><a href="test">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h1>Title</h1>
        <button aria-label="Screen reader label">Button text</button>        
    </main>
</body>

All we did was just add a few ARIA tags and used more semantic tags in the HTML. Now the accessibility tree should look something like this:

Accessibility tree for updated code.

Conclusion

The accessibility tab is an amazing chrome feature that can let developers focus on the semantics and accessibility of their projects while creating.

CHEERS!