Aria RolesInforming assistive technology

What are Aria RolesA way of conveying the role or state of content or functionality.

Accessible Rich Internet Applications is a W3C protocol for enhancing and supporting accessibility of scripted and dynamic content.

Landmark Roles● Provide semantic meaning● Define regions● Describe the purpose of this piece of HTML

Roles for FormsAria-requiredboolean for required field

role=”button”Any submit button

role=”alert”Error or feedback message

Banner

Navigation

Main

Search

Article

Complementary

Contentinfo

Live RegionsDetermine the ‘live areas’ of documentRegions of the page that can be subject to change They are controlled by client-side scripting

Live Regions

aria-live ● off● polite*● assertive● rude

Live Region Roles

Advanced attributesGenerally on used when making Rich Internet Applications (or using non standard/semantic markup)

1. aria-atomic: The aria-atomic=BOOLEAN is used to set whether or not the screen reader should always present the live

region as a whole, even if only part of the region changes - the possible settings are false/true where false is the default.

2. aria-relevant: The aria-relevant=[LIST_OF_CHANGES] is used to set what types of changes are relevant to a live region

- the possible settings are additions/removals/text/all where "additions text" is the default.

3. aria-labelledby: The aria-labelledby=[IDLIST] is used to associate a region with its labels, similar to aria-controls but

instead associating labels to the region and again label identifiers are separated with a space.

4. aria-describedby: The aria-describedby=[IDLIST] is used to associate a region with its descriptions, similar to aria-

controls but instead associating descriptions to the region and description identifiers are separated with a space.

<div id="radio_label">My radio label</div><ul role="radiogroup" aria-labelledby="radio_label">

<li role="radio">Item #1</li>

<li role="radio">Item #2</li></ul>

Live Regions’ support

Live Regions’ supportThe only two screen readers that do NOT support Aria Roles are NVDA and Window Eyes in Internet Explorer.

Referenceshttp://tink.co.uk/2009/06/screen-reader-support-for-ajax-live-regions/

http://juicystudio.com/article/wai-aria_live-regions_updated.php

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions

http://www.maxability.co.in/tag/aria-liverude/