Robert Tamayo | March 31, 2018

ADA-Friendly Audio Web Page Navigation

A while ago I was working on making a store locator ADA compliant. This was my first time working with things like aria-label attributes, screen readers, skip links, and tab-based navigation. I got to the point where the page was working with a screen reader and by using tab navigation and skip links, but the only functionality missing was the ability to filter the list of stores by store type. I started wondering how to solve this problem with only tabs and skip links. My first programming experience with building video games on Android, so I kept thinking how much easier this problem would be to solve if the user could use a video game controller to control the filters. That's when I realized that the user does have something like a video game controller: a keyboard.

<a role="application" tabindex="-1" href="" class="aria-only ada-filter-menu" id="ada-filter-menu"
aria-label="
    The list of products is currently displaying
    both <type A> and <type B> products. To view only
    <type A> products, press, A. To view only <type B>
    products, press, B. To view both <type A> and <type B>
    products again, press, C. Press tab to continue to the list when you
    are finished filtering the results.
">
    Skip Link
</a>

This idea can be expanded upon to provide website navigation:

<a role="application" tabindex="1" class="aria-only ada-menu ada-repeat" href="" aria-label="
    Press, A, to go directly to this product's information.
    Press, L, to go directly to the list of similar products.
    Press, S, to go directly to the Search form and look for products.
    Press, B, to go directly to the main text of the page.
    Press, F, to go directly to the page footer.
    Press, tab, to continue to the site navigation.
">
Menu</a>

This type of high level navigation is something you've heard before on every automated phone menu. I'm just surprised I haven't seen it on websites before, but maybe that's only because I don't need to use a screen reader.

Here are the key parts:

Use role="application". Without it, certain screen readers will prevent the browser from accepting the keyboard input.
Place the menu right after the opening <body> tag. This means that the user will get to the menu right after pressing tab to get into the page.
Use javascript to implement the keypress handling.

Final tip: use commas to emphasize the keys to press, such as "Press, A, to do this one thing." The commas force most screen readers to pause and make it sound just like the way automated phone operators say the number.

Comments: