ARIA 1.1 aria-roledescription Examples

The new aria-roledescription property provides content authors a mechanism to over-ride the default role name announced by screen readers with one that is potentially more meaningful to the task or context of use. This concept was initially requested by ETS during the October 2014 W3C TPAC ARIA meetings, and saw initial implementation in September 2015 by both Orca (Linux screen reader) and VoiceOver on both MacOSX 10.11 and iOS 9.

Examples below are from http://www.w3.org/TR/wai-aria-1.1/#aria-roledescription

Example 27

Using role description to identify slide content in an HTML presentation. aria-roledescription is applied to div element with role "region".

<div  role="region" aria-roledescription="slide" id="slide42" aria-labelledby="slide42heading">
   <h1 id="slide42heading">Quarterly Report</h1>
    <p>Slide content</p>
</div>

Note: we expect the slide would be announced as "Quarterly Report, slide".

Example 28

Similar example, but with section element.

<section   aria-roledescription="slide" id="slide42" aria-labelledby="slide42heading">
<h1 id="slide42heading">Quarterly Report</h1>
<p>slide content</p>
</section>

Note: we expect the slide would be announced as "Quarterly Report, slide".

Example 29

<div role="button" tabindex="0" aria-roledescription="attachment button">family_reunion.jpg</div>

Note: we expect the button should be announced as "family_reunion.jpg, attachment button".

Example 30

<button aria-roledescription="attachment button">family_reunion.jpg</button>

Note: we expect the button should be announced as "family_reunion.jpg, attachment button".