Presentation is loading. Please wait.

Presentation is loading. Please wait.

Aria Roles Informing assistive technology. What are Aria Roles A way of conveying the role or state of content or functionality. Accessible Rich Internet.

Similar presentations


Presentation on theme: "Aria Roles Informing assistive technology. What are Aria Roles A way of conveying the role or state of content or functionality. Accessible Rich Internet."— Presentation transcript:

1 Aria Roles Informing assistive technology

2 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.

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

4 Roles for Forms Aria-required boolean for required field role=”button” Any submit button role=”alert” Error or feedback message

5

6 Banner

7 Navigation

8 Main

9 Search

10 Article

11 Complementary

12 Contentinfo

13 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

14 Live Regions aria-live ● off ● polite* ● assertive ● rude

15 Live Region Roles

16 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

17 Live Regions’ support

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

19 References http://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/


Download ppt "Aria Roles Informing assistive technology. What are Aria Roles A way of conveying the role or state of content or functionality. Accessible Rich Internet."

Similar presentations


Ads by Google