Elements must have accessibility properties set appropriately

Users of assistive technology such as screen reader and speech input software rely on accessibility properties such as role, value, name, and state to be set appropriately in order to know how to identify and interact with the element or object.

For example, in HTML, if a user hears ‘button’ the user knows to use the Enter key, if they hear link they know to use the Space Bar. For standard elements, roles and traits are generally provided by default within the platform. For custom object and elements, roles and traits will need to be provided.

HTML

When available use standard HTML controls. For example a button must be coded as a button and not an image using CSS and JavaScript. When standard HTML controls do not exist (and only then), use HTML elements that provide equivalents via ARIA and via a method that does not require ARIA.

HTML Example

<!-- standard control -->
<input type="checkbox" id="c1" /><label for="c1">Remember me</label>
 
<!-- ARIA supported tree control with fall-back -->
<ul role="tree">
<li aria-level="0" aria-expanded="true" role="treeitem"><a href="/...">TV Shows <span class="offscrn"> - Expanded</span></a>
<ul>
<li aria-level="1" role="treeitem"><a href="/...">Comedy</a></li>
<li aria-level="1" role="treeitem"><a href="/...">Drama</a></li>
<li aria-level="1" role="treeitem"><a href="/...">Sports</a></li>
</ul></li>
<li aria-level="0" aria-expanded="true" role="treeitem"><a href="/...">Radio Shows <span class="offscrn"> - Expanded</span></a>
<ul>
<li aria-level="1" role="treeitem"><a href="/...">News</a></li>
<li aria-level="1" role="treeitem"><a href="/...">Soap</a></li>
<li aria-level="1" role="treeitem"><a href="/...">Sports</a></li>
</ul></li>
</ul>

HTML Failure

<div><img src="/chkbx" alt="checkbox" />Remember me</div>
 
<!-- inaccessible tree -->
<div>
<div onClick="toggle();">TV Shows
<div>
<div class="indent">Comedy</div>
<div class="indent">Drama</div>
<div class="indent">Sports</div>
</div>
<div onclick="toggle();">Radio Shows
<div>
<div class="indent">News</div>
<div class="indent">Soap</div>
<div class="indent">Sports</div>
</div>
</div> 

Testing

Recommended tool/method: Screen Reader / WAT

1. Activate the screen reader
2. Gain focus on the individual object, element, or controls
3. Verify that the announced item label matches the on-screen text or contains additional supplementary information to assist with nonvisual access of the item
4. Verify that the announced role of the item matches the perceived visual role
5. If applicable, verify that the value of the item is properly announced by the screen reader
6. Verify that the state of the element is announced properly
7. If applicable, toggle the state of the item and verify that the screen reader announces the correct state change