WEB ACCESSIBILITY RESEARCH

The Accessible Rich Internet Applications (WAI-ARIA) specification defines a set of roles known as document landmarks. They can be used to programmatically identify key areas of content on a page, which means they can be interpreted by access technologies such as screen readers such as Jaws and NVDA.

Designing Accessible User Experiences

1. role="tabpanel", "tab", "tablist"

Tabpanel is a container for the resources associated with a tab, where each tab is contained in a tablist. Tablist elements are typically placed near, usually preceding, a series of tabpanel elements.

Example
  • - Nintendo Exec: Switch Could Get More Wii U Re-Releases
  • - Nintendo Exec: Switch Could Get More Wii U Re-Releases
  • - Nintendo Exec: Switch Could Get More Wii U Re-Releases

<div id="tab_content">
    <!-- [D] tablist -->
    <ul class="tab_list" role="tablist">
        <li class="active" role="presentation">
            <a href="#" id="tab1" class="tab selected" aria-controls="panel1" role="tab" aria-selected="true">News</a>
        </li>
        <li role="presentation">
            <a href="#" id="tab2" class="tab" aria-controls="panel2" role="tab" aria-selected="false">Science</a>
        </li>
        <li role="presentation">
            <a href="#" id="tab3" class="tab" aria-controls="panel3" role="tab" aria-selected="false">IT/Technologies</a>
        </li>
    </ul>
    <!-- [D] tabpanel -->
    <div id="panel1" class="panel" role="tabpanel" aria-labelledby="tab1" aria-expanded="true">
        <ul>
            <li>- Photographer Captures Beauty Around the World</li>
            <li>- Photographer Captures Beauty Around the World</li>
            <li>- Photographer Captures Beauty Around the World</li>
        </ul>
    </div>
    <div id="panel2" class="panel" role="tabpanel" aria-labelledby="tab2" aria-expanded="false"> 
        <ul>
            <li>- Anonymous Says NASA Has Evidence of Alien Life</li>
            <li>- Anonymous Says NASA Has Evidence of Alien Life</li>
            <li>- Anonymous Says NASA Has Evidence of Alien Life</li>
        </ul>
    </div>
    <div id="panel3" class="panel" role="tabpanel" aria-labelledby="tab3" aria-expanded="false">
        <ul>
            <li>- Nintendo Exec: Switch Could Get More Wii U Re-Releases</li>
            <li>- Nintendo Exec: Switch Could Get More Wii U Re-Releases</li>
            <li>- Nintendo Exec: Switch Could Get More Wii U Re-Releases</li>
        </ul>
    </div>
</div>
		

2. role="menubar", "menuitem", "menu"

The menubar role is used to create a menu bar similar to those found in Windows, Mac, and Gnome desktop applications. A menu bar is used to create a consistent set of frequently used commands.


<div id="menubar_content" class="navbar">
    <ul class="menu_list" role="menubar">
    <li role="presentation">
        <a href="#" class="menu_tit" role="menuitem" aria-expanded="false" aria-haspopup="true">Menu1</a>
        <ul class="menu_sub" role="menu" aria-hidden="true">
        <li role="presentation"><a href="#" role="menuitem">List1-1</a></li>
        <li role="presentation"><a href="#" role="menuitem">List1-2</a></li>
        <li role="presentation"><a href="#" role="menuitem">List1-3</a></li>
        </ul>
    </li>
    <li role="presentation">
        <a href="#" class="menu_tit" role="menuitem" aria-expanded="false" aria-haspopup="true">Menu2</a>
        <ul class="menu_sub" role="menu" aria-hidden="true">
        <li role="presentation"><a href="#" role="menuitem">List2-1</a></li>
        <li role="presentation"><a href="#" role="menuitem">List2-2</a></li>
        <li role="presentation"><a href="#" role="menuitem">List2-3</a></li>
        </ul>
    </li>
    </ul>
</div>
		

3. role="listbox", "option"

A widget that allows the user to select one or more items from a list of choices. Items within the list are static and, unlike standard HTML select elements, may contain images. List boxes contain children whose role is option.

Example

<div class="panel-body">
    <div id="flick_content">
        <div class="flick_area">
            <ul class="flick_list" role="listbox">
            <li class="flick_item" role="option" aria-selected="true">
                <div class="flick_link">Panel1</div>
            </li>
            <li class="flick_item" role="option" aria-selected="false">
                <div class="flick_link">Panel2</div>
            </li>
            <li class="flick_item" role="option" aria-selected="false">
                <div class="flick_link">Panel3</div>
            </li>
            <li class="flick_item" role="option" aria-selected="false">
                <div class="flick_link">Panel4</div>
            </li>
            </ul>
        </div>
    </div>
</div>
		

4. role="checkbox"

A checkable input that has three possible values: true, false, or mixed. The aria-checked attribute of a checkbox indicates whether the input is checked (true), unchecked (false), or represents a group of elements that have a mixture of checked and unchecked values (mixed).

Example

<div id="checkbox_content">
    <ul class="check_list" role="group">
    <li class="check_item" role="checkbox" aria-checked="false" tabindex="0">Apple</li>
    <li class="check_item" role="checkbox" aria-checked="false" tabindex="0">Banana</li>
    <li class="check_item" role="checkbox" aria-checked="false" tabindex="0">Cherry</li> 
    <li class="check_item" role="checkbox" aria-checked="false" tabindex="0">Dragon Fruit</li>
    </ul>
</div>
		

5. role="radiogroup", "radio"

A radiogroup is a type of select list that can only have a single entry checked at any one time. When one item in the group is checked, the previously checked item becomes unchecked.

Example

<div id="radio_content">
    <ul class="radio_list" role="radiogroup">
    <li class="radio_item" role="radio" aria-checked="false" tabindex="0">Option1</li>
    <li class="radio_item" role="radio" aria-checked="false" tabindex="-1">Option2</li>
    <li class="radio_item" role="radio" aria-checked="false" tabindex="-1">Option3</li>
    </ul>
</div>