Aria Roles Informing assistive technology

What are Aria Roles A 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 Forms Aria-required boolean for required field role=”button” Any submit button role=”alert” Error or feedback message

Banner

Navigation

Main

Search

Article

Complementary

Contentinfo

Live Regions Determine the ‘live areas’ of document Regions 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 attributes Generally 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. My radio label Item #1 Item #2

Live Regions’ support

The only two screen readers that do NOT support Aria Roles are NVDA and Window Eyes in Internet Explorer.

References US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions