Applications and Web Content Accessibility Web Accessibility D
Applications and Web Content Accessibility Web Accessibility D. 3 Rich Internet Applications and Multimedia Accessiblity
Content 1. 2. 3. 4. What is ARIA – Roles States and Properties Dynamic Updates
1. What is ARIA? • • ARIA: Accessible Rich Internet Applications Semantic language Enhance the accessibility of highly dynamic websites Deliver additional information to assistive technologies
1. What is ARIA? Continue ARIA-attributes • It is used by assistive technology like screen reader • It help AT to obtain information from user control of the website and their state. ARIA-Label • make dynamically changing content perceivable to people with disabilities • “live region” : This tells AT that content is dynamically changing
1. 1 How does it work? • ARIA-Attributes • ARIA provides different kinds of attributes, which are called roles, states and properties • These attributes are used to add semantic information about controls and their current status to the source code
1. 2 Why ARIA? • Security. Space Technology Penetration Report: • • more than 55% of all Web sites today contain Java. Script Legacy GUI Accessibility frameworks address these issues through a comprehensive Accessibility application programming interface (API) These APIs constitute a contract between applications and assistive technologies, such as screen readers, to enable them to access rich dynamic content with the appropriate semantics needed to produce a usable alternative •
2. ARIA in detail: ARIA- Roles ARIA role attributes: There are different kinds of roles • Abstract Roles • Widget Roles • Landmark roles • Document structure roles
2. 1 ARIA Roles: Abstract Roles Subclass-roles of the abstract-role are: • combobox • listbox • menu • radiogroup • tree
2. 2 ARIA Roles: Widget Role Examples A first example: <span class="button-style" >Press me! </span> Press me! In this case you could add the proper ARIA widget role to the span so that assistive technology is aware that the span is actually a button: <span class="button-style" role="button" tabindex="0">Press me!</span>
Widget Role Examples(Continues) The following example shows a simple widget role element (in this case a menu-item role) that is added to a html list item, telling an assistive technology that this list item should be considered as a part of a pulldown menu: <li role= "menuitem"> Open file… </li> The following example shows a checkbox enriched with ARIA attributes: <li role="checkbox" tabindex="0" aria-checked="true”> <img src="images/checked. gif" alt=""> Don’t show this again! </li>
2. 3 ARIA Roles: Widget Role Widgets roles can be further separated in: 2. 3. 1. Pure standalone widget roles: These widgets act as standalone user interface widgets or as part of larger, composite widgets. 2. 3. 2 Composite widget roles: These roles typically act as containers that manage other, contained widgets.
2. 4 ARIA-Roles: Ground Rules of Usage ARIA roles WILL • overwrite the element’s default accessibility mapping ARIA roles WILL NOT • • change the element’s appearance change the element’s keyboard behavior change the element’s mouse behavior change the element’s focus behavior
ARIA-Roles assignment The ZIP-file contains a simplementation of checkboxes that could be used in a form. However these checkboxes are not accessible, as no native controls were used to create them. It is your task now to make these checkboxes accessible: • • • Assign the proper role the checkboxes Make them keyboard accessible by setting the tabindex and by adding keyboard listeners that toggle the state when the user presses the space key. Use the attribute: aria-checked=”true|false” to inform blind users whether the checkbox is checked or not at the moment. These ARIA attributes will be explained in more detail later on: Assignment. zip Solution. zip
2. ARIA Roles Continued 2. 5 ARIA-Landmark Roles: Usage Without ARIA Landmarks <div id="header">. . . </div> <div id="nav">. . . </div> <div id="main">. . . </div> <div id="footer">. . . </div> With ARIA Landmarks <div role="banner">. . . </div> <div role="navigation">. . . </div> <div role="main">. . . </div> <div role="contentinfo">. . . </div>
2. 5 ARIA-Landmark Roles: Example <div id="header" role="banner">Header goes here</div> <div id="search" role="search">Site search goes here</div> <div id="nav" role="navigation">Links to the content go here</div> <div id="content" role="main"> Main content goes here</div> <div id="add" role="complementary">Advertisment</div> <div id="footer" role="contentinfo">Footer goes here</div>
2. 6 Landmark Roles vs HTML 5 Structural Elements HTML 5 ARIA Role Other allowed ARIA roles <header> role="banner" <nav> role="navigation" <main> role="main" <footer> role="contentinfo" <aside> role="complementary" <section> role="region" * alert, alertdialog, application, contentinfo, dialog, document, log, main, marquee, presentation, search or status. role="article" * application, document, main <article> none role="search <form> role="form"
2. 7 Document Structure Roles These roles describe structures that organize content in a page. Document structures are not usually interactive. • article • img • row • columnheader • list • rowgroup • definition • listitem • rowheader • directory • math • separator • document • note • toolbar • group • presentation • heading • region
Assignment: ARIA-landmarks in use The folder assignment contains a sample web-page with a very simple layout. It is your task to: • • • Add the proper aria landmark roles to the regions of the page Use the proper HTML 5 for the regions of the page Create a skip link menu When the form is finished, try to navigate with a screenreader between the regions. Hint: When using NVDA you can move with "d" between the different regions. • assignment. zip • sample solution. zip
3. States and properties States and Properties: • They used to define the current state of objects and to provide information on them. • Many roles inherit their states and properties from ancestor roles. Others are applied or changed directly.
3. 1 States and properties: Values Aria states and properties can have one of the following values: • True/false • Tristate • true/false/undefined • ID reference • Integer • Number • String • Token • token list
3. 2 Global states and properties • • • • aria-atomic aria-busy (state) aria-controls aria-describedby aria-disabled (state) aria-dropeffect aria-flowto aria-grabbed (state) aria-haspopup aria-hidden (state) aria-invalid (state) aria-labelledby aria-live aria-owns aria-relevant
3. 3 Categories of states and properties States and properties are divided into 4 categories: 1. 2. 3. 4. Widget Attributes Live Region Attributes Drag-and-Drop Attributes Relationship Attributes
3. 4. 1 Selected Properties: ARIA Label Examples: Aria Label for the close button: <button aria-label="Close">X</button>
3. 4. 2 Selected Properties: arialabelledby Example: Form within a table <table> <tr> <th>Product name</th> <th id="aamount">Amount</th>. . . </tr> <td>Bread</td> <td><input type="text" aria-labelledby="amount"></td>. . . </tr> <td>Butter</td> <td><input type="text" aria-labelledby="amount"></td>. . . </tr> <span >asdf</span>. . . </table>
3. 4. 3 Selected Properties: aria-describedby Example: <label for="password">Password: </label> <input type="text" id="password" aria-describedby="password-format"> <span id="password-format">The password my not contain any numbers. </span>
3. 5. 1 Selected States: aria-hidden Example: Message box that is currently hidden <div tabindex="-1" class="hidden" aria-labelledby="message" aria-hidden="true" role="region"> <h 2 id="message">Message</h 2> <p>Some message</p> </div>
3. 5. 2 Selected States: aria-invalid Example: Error in a form <label for="phone_nr">Phone Number*</label> <input id="phone_nr" aria-required="true" aria-invalid="true" value="1234">
3. 5. 3 Selected States: aria-disabled Example: Disabled link that was manipulated with Java. Script and CSS to act and behave like a button. <a href="#" role="button" class="button" ariadisabled="true"> Confirm order </a>
4. Dynamic Updates • Websites use dynamic updates to insert elements. • This can be problem for Assistive Technology users. To deal with this issue ARIA offers these two states to inform assistive technology an update in a certain region can happen at any time. • aria-live • aria-atomic
4. 1 Dynamic Updates: aria-live Example: <div aria-live="polite" class="messagebox"> You have a new follower! </div>
4. 2 Dynamic Updates: ariaatomic Example: <div aria-atomic="true" aria-live="polite"> <h 3>Score Update: </h 3> <strong>Manchester: </strong>2 <strong>Bayern München: </strong>1 </div>
4. 3 Dynamic Updates: Demo With aria-live and aria-atomic most of the issues with dynamic updates can be solved. Have a look at the dynamic-updates-demo. It contains two html sample files that dynamically update their content. The before folder contains the sample without the use of aria, the after folder contains the sample file that uses ARIA to inform the user about updates. Try the two pages with a screenreader of your choice. Do you find a difference?
ARIA Menu Assignment The folder contains a simplementation of menu that could be used in a webapplication. The menu itself is not accessible. It is your task now to make these checkboxes accessible: • Assign the proper roles the menu and menuitems • Use aria-haspopup and aria-expanded to indicate if a menuitem has a submenu and wether the submenu is expanded or not • Make the menu keyboard accessible. Use this link to get the desired keyboard functionality https: //www. w 3. org/TR/wai-ariapractices/#menu • Test your solution with a screenreader of your choice • • assignment. zip solution. zip
Credits • We are giving credits to Accessible Rich Internet Applications course from MOOCAP for the content in the form of Images, Videos & written form.
- Slides: 34
