Roles, traits and properties

Must

Elements must have accessibility properties set appropriately.

Description

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

For example, on iOS a trait of 'button' must be set in order for a VoiceOver user to know what the element does and how to interact with it. With HTML content, if a user hears "button" they know to use the Enter key, if they hear "link" they know to use the Space Bar.

Standard elements generally provide roles, traits and properties by default within the platform. Custom elements and objects will require all accessibility roles, traits and properties to be set.

IOS

Add traits, UIAccessibilityTrait, to custom elements to describe behaviour (type/role) and/or state. An object can have more than one trait which includes: Adjustable, Button, Link, SearchField, Heading, Keyboard Key, StaticText, Image, PlaysSound, KeyboardKey, Selected, SummaryElement, UpdatesFrequently, NotEnabled, None, StartsMediaSession, AllowsDirectInteraction, CausesPageTurn. The accessible name should be set via the accessibilityLabel and any supplementary description information via accessibilityHint.

A full list of Traits and their purpose can be found in the Apple Developer Guidelines.

iOS example

// aButton is a happy button with a secret life
[aButton setFrame:CGRectMake(100, 100, 100, 100)];
[aButton setImage:[UIImage imageNamed:@"smile.jpg"] forState:UIControlStateNormal];
[aButton setTitle:NSLocalizedString(@"Smile", @"Button title") forState:UIControlStateNormal];
[aButton setAccessibilityHint:NSLocalizedString(@"I am a button because my traits say so!", @"Accessibility hint for smile button")];
[aButton setAccessibilityTraits:UIAccessibilityTraitButton];                        
// aButton is a happy button with a secret life
[aButton setFrame:CGRectMake(100, 100, 100, 100)];
[aButton setImage:[UIImage imageNamed:@"smile.jpg"] forState:UIControlStateNormal];
[aButton setTitle:NSLocalizedString(@"Smile", @"Button title") forState:UIControlStateNormal];                        

ANDROID

Roles are provided for standard widgets and extensions of standard widgets. Custom widgets must us contentDescription to provide role information. The Android platform does not provide an equivalent to HTML 5 or ARIA roles or accessibility traits like the iOS platform.

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 generic HTML elements and provide equivalents via ARIA and via a method that does not require ARIA.

HTML example

<!-- Example 1 - standard control -->
<input type="checkbox" id="c1" /><label for="c1">Remember me</label>

<!-- Example 2 - ARIA supported tree view 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>                        
<!-- Example 1 - non-standard control -->
<div><img src="chkbx" alt="checkbox" />Remember me</div>

<!-- Example 2 - inaccessible tree view -->
<div>
    <div onClick="toggle();">
        TV Shows
        <div>
            <div class="indent">Comedy</div>
            <div class="indent">Drama</div>
            <div class="indent">Sports</div>
        </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>
</div>                        

TESTING

 

Procedures
  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 non visual 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.
Results

The following check is true:

  • Object, elements, or controls including their labels, roles, values, states and state changes are correctly announced by a screen reader.