Download - Web accessibility workshop 4
![Page 1: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/1.jpg)
Web Accessibility WorkshopSession Four
Vladimir Tomberg, PhDTallinn University
![Page 2: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/2.jpg)
2
Today Workshop
1. Presentation of the Homework;2. WAI ARIA;3. Core Components;
A. Abstract Roles;B. Widget Roles;C. Document Structure ROLESD. Document landmarks rolesE. ARIA Properties And States
4. HTML5 AND WAI ARIA5. WAI ARIA PROSPECT6. Best Practices;7. Homework Assignment 4
Web Accessibility Workshop
![Page 3: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/3.jpg)
3Web Accessibility Workshop
1. PRESENTATION OF HOMEWORKPlease be prepared to share your experience!
![Page 4: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/4.jpg)
4Web Accessibility Workshop
2. WAI ARIAIntroduction
![Page 5: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/5.jpg)
5Web Accessibility Workshop
• It has a very limited set of interface controls and interactions
HTML is Very Static
Picture Source: funnyvscute.com
![Page 6: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/6.jpg)
6Web Accessibility Workshop
JavaScript
• As the demand for rich interaction increased, JavaScript became our saviour!
• However, many of dynamic interactions and widgets are problematic for Assistive Technologies
Picture Source: toys4collection.blogspot.com
![Page 7: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/7.jpg)
7Web Accessibility Workshop
However…
• Many widgets are inaccessible by keyboard;• ATs may not be made aware of dynamically
generated content as it is updated
![Page 8: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/8.jpg)
8Web Accessibility Workshop
Here ARIA goes to the stage
![Page 10: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/10.jpg)
10Web Accessibility Workshop
• Accessible Rich Internet Applications;• Specification developed by the PFWG of the W3C’s WAI;• W3C Recommendation, 20 March 2014• http://www.w3.org/TR/wai-aria/
WAI ARIA!
Open this link and refer to this page
during the workshop!
![Page 11: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/11.jpg)
Web Accessibility Workshop
11
![Page 13: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/13.jpg)
13Web Accessibility Workshop
What's it do?Without WAI-ARIA
Source: blog.paciellogroup.com
![Page 14: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/14.jpg)
14Web Accessibility Workshop
What's it do?With WAI-ARIA
Source: blog.paciellogroup.com
![Page 15: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/15.jpg)
15Web Accessibility Workshop
• The addition of a role attribute
<a href="#" title="OK" role="button"> <img src="ok.gif" alt="OK"> </a>
What's the Difference?
Source: blog.paciellogroup.com
![Page 16: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/16.jpg)
16Web Accessibility Workshop
What's Gained?
• Correct role information: "Button"• Usage instructions: "To activate press
spacebar"
Source: blog.paciellogroup.com
![Page 17: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/17.jpg)
17Web Accessibility Workshop
<input type="image“src="ok.gif“alt="OK">
Couldn't this Example Also Be Achieved Without Using WAI - ARIA?
• Yes;• Wherever possible use native HTML elements
![Page 18: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/18.jpg)
18Web Accessibility Workshop
What's it do without WAI-ARIA(example two)
Source: blog.paciellogroup.com
![Page 19: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/19.jpg)
19Web Accessibility Workshop
What's it do with WAI-ARIA
Source: blog.paciellogroup.com
What's the difference?
![Page 20: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/20.jpg)
20Web Accessibility Workshop
<input type="image“ src="hioff.gif“ alt="highlight">
button is selected
Without WAI-ARIA
<input type="image“ src="hion.gif“ alt="highlight">
Button is not selected
Source: blog.paciellogroup.com
![Page 21: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/21.jpg)
21Web Accessibility Workshop
<input type="image" src="hioff.gif" alt="highlight" role="button" aria-pressed="false">
button selected
With WAI-ARIA
<input type="image" src="hion.gif" alt="highlight" role="button" aria-pressed="true">
button not selected
Source: blog.paciellogroup.com
![Page 22: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/22.jpg)
22Web Accessibility Workshop
What's Gained?
state information: "pressed"
Source: blog.paciellogroup.com
![Page 23: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/23.jpg)
23Web Accessibility Workshop
Progress Bar Code Example
<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"
/>
Source: developer.mozilla.org
![Page 24: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/24.jpg)
24Web Accessibility Workshop
The Purpose
• The main purpose of ARIA is to allow JavaScript to communicate dynamic changes in roles, states, and relationships to assistive technologies;
• Most of the ARIA specification is intended for use in web applications, rather than in static web content, but some of the ARIA roles overlap with some of the new HTML 5 elements
Source: dequeuniversity.com
![Page 25: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/25.jpg)
25Web Accessibility Workshop
ARIA Attributes are Typically Added and Updated Dynamically Using JavaScript Code
// Find the progress bar <div> in the DOM.var progressBar = document.getElementById("percent-loaded");
// Set its ARIA roles and states, so that assistive technologies know what kind of widget it is.progressBar.setAttribute("role", "progressbar");progressBar.setAttribute("aria-valuemin", 0);progressBar.setAttribute("aria-valuemax", 100);
// Create a function that can be called at any time to update the value of the progress bar.function updateProgress(percentComplete) { progressBar.setAttribute("aria-valuenow", percentComplete);}Source: developer.mozilla.org
![Page 26: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/26.jpg)
26Web Accessibility Workshop
Additional Development Layer
http://www.slideshare.net/ginader/the-5-layers-of-web-accessibility
![Page 27: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/27.jpg)
27Web Accessibility Workshop
3. CORE COMPONENTSRoles, properties, and states
![Page 28: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/28.jpg)
28Web Accessibility Workshop
Roles
• ARIA roles define what an element is or does;• Most HTML elements have a default role that is
presented to assistive technology. For example, a button has a default role of "button" and a form has a default role of "form“;
• With ARIA, you can define roles that are not available in HTML;
• You can also override HTML's default roles. This allows you to present elements and widgets in HTML to screen readers in a more accurate and accessible way
Source: webaim.org
![Page 29: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/29.jpg)
29Web Accessibility Workshop
Categorization of Roles
Source: www.w3.org
![Page 30: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/30.jpg)
30Web Accessibility Workshop
3.A ABSTRACT ROLES
![Page 31: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/31.jpg)
31Web Accessibility Workshop
Abstract Roles• Abstract roles are used for the ontology
only;• Authors MUST NOT use abstract roles in
content;• Useful roles (widget, document,
landmark) inherit properties from the abstract roles
• command• composite• input• landmark• range• roletype• section• sectionhead• select• structure• widget• window
![Page 32: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/32.jpg)
32Web Accessibility Workshop
3.B WIDGET ROLES
![Page 33: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/33.jpg)
33Web Accessibility Workshop
What is a Widget?
• The term 'widget' is broadly used to describe interactive elements that are created and controlled through scripting;
• It refers to controls that are not native to HTML or to HTML controls that are greatly enhanced through scripting;
• Examples of widgets would include sliders, drop-down and fly-out menus, tree systems, drag and drop controls, auto-completing text boxes, and tooltip windows;
• Accessibility of widgets does not happen natively or naturally. HTML has very limited markup for defining complex widgets.
Source: webaim.org
![Page 34: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/34.jpg)
34Web Accessibility Workshop
The Complexity Issues
• How do you make a complex menu system intuitively keyboard accessible?
• How do you make a drag-and-drop element keyboard accessible?
• How do you present ordering details for sortable list items?
• How do you present visual tooltips or pop-up messages to blind users?
Source: webaim.org
![Page 35: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/35.jpg)
35Web Accessibility Workshop
New Widget Roles
• By establishing a standard set of roles, properties, and values, ARIA allows developers to address these accessibility issues with relative ease
Source: webaim.org
![Page 36: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/36.jpg)
36Web Accessibility Workshop
Widget Roles Act as Standalone UI Widgets or as Part of Larger, Composite Widgets
• alert• alertdialog• button• checkbox• dialog• gridcell• link• log• marquee• menuitem• menuitemcheckbox• menuitemradio
• option• progressbar• radio• scrollbar• slider• spinbutton• status• tab• tabpanel• textbox• timer• tooltip• treeitem
![Page 37: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/37.jpg)
37Web Accessibility Workshop
Widget Roles Act as Composite UI Widgets
• combobox• grid• listbox• menu• menubar• radiogroup• tablist• tree• treegrid
![Page 38: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/38.jpg)
38Web Accessibility Workshop
Keyboard Handling
• Every widget needs to be operable by keyboard;• Common keystrokes are:
Arrow keys Home, end, page up, page down Enter, space ESC
Source: slideshare.net
![Page 39: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/39.jpg)
39Web Accessibility Workshop
Focus & Keyboard Accessibility
• To be accessible, ARIA input widgets need focus: Use natively focusable elements, such as <a>,
<input />, etc Add ‘tabindex’ attribute for non focusable
elements, such as <span>, <div>, etc.• Tabindex=“0”: Element becomes part of the tab order• Tabindex=“-1” (Element is not in tab order, but
focusable)
Source: slideshare.net
![Page 40: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/40.jpg)
40Web Accessibility Workshop
<span style="background-color: #ddd; border: medium outset white;" role="button" tabindex="0" onkeydown="if(event.keyCode==13 || event.keyCode==32) alert('You activated me with the keyboard');" onclick="alert('You clicked me with the mouse');">Push Me</span>
• In this example, the text is styled to visually appear like a button;
• The role="button" tells the browser that the text should behave as a button;
• tabindex="0" puts the element into the keyboard navigation flow so keyboard users can activate the button.
Accessible Button Example
![Page 41: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/41.jpg)
41Web Accessibility Workshop
3.C DOCUMENT STRUCTURE ROLES
![Page 42: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/42.jpg)
42Web Accessibility Workshop
Start Structuring with HTML5
Source: classroom.w3devcampus.com
![Page 43: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/43.jpg)
43Web Accessibility Workshop
Document Structure Roles
• Roles for document structure support the accessibility of dynamic web content by helping assistive technologies determine active content versus static document content;
• Structural roles by themselves do not all map to accessibility APIs, but are used to create widget roles or assist content adaptation for assistive technologies
![Page 44: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/44.jpg)
Web Accessibility Workshop
44
Document Structure Roles Describe Structures that Organize Content in a Page
Document structures are not usually interactive
• listitem• math• note• presentation• region• row• rowgroup• rowheader• separator• toolbar
• article• columnheader• definition• directory• document• group• heading• img• list
![Page 45: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/45.jpg)
45Web Accessibility Workshop
3.D DOCUMENT LANDMARK ROLES
![Page 46: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/46.jpg)
46Web Accessibility Workshop
The Problem
• There is no mechanism for identifying the function or purpose of HTML elements in a programmatically determinable way (like navigation, search, etc.);
• Browser or screen reader has no way of knowing what portion of the page contains the navigation elements;
• This problem is evidenced by the need for "Skip to main content" or "Skip navigation" links
Source: webaim.org
![Page 47: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/47.jpg)
47Web Accessibility Workshop
Roles for regions of the page intended as navigational landmarks
• application• banner• complementary• contentinfo• form• main• navigation• search
![Page 48: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/48.jpg)
48Web Accessibility Workshop
WAI ARIA Document Landmark Roles
• Application A region declared as a web application, as opposed to a web
document;• Banner
Site-oriented content, such as the name of the web site, title of the page, and/or the logo;
• Complementary Supporting content for the main content;
• Contentinfo Informational child content, such as footnotes, copyrights,
links to privacy statement, links to preferences, and so on
![Page 49: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/49.jpg)
49Web Accessibility Workshop
WAI ARIA Document Landmark Roles
• Form A landmark region that contains a collection of items and
objects that, as a whole, combine to create a form;• Main
The main or central content of the document;• Navigation
The area that contains the navigation links for the document or web site;
• Search This section contains the search functionality for the site;
![Page 50: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/50.jpg)
50Web Accessibility Workshop
Structuring Page with Landmarks Roles
![Page 51: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/51.jpg)
51Web Accessibility Workshop
How ARIA Landmark Roles Help Screen Reader Users
Source: youtube.com
![Page 52: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/52.jpg)
52Web Accessibility Workshop
Using Landmark RoleSimple Example
<div id="header" role="banner">A banner image and introductory title</div><div id="sitelookup" role="search">....</div><div id="nav" role="navigation">...a list of links here ... </div><div id="content" role="main"> ... Ottawa is the capital of Canada ...</div><div id="rightsideadvert" role="complementary">....an advertisement here...</div><div id="footer" role="contentinfo">(c)The Freedom Company, 123 Freedom Way, Helpville, USA</div>Source: www.w3.org
![Page 53: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/53.jpg)
53Web Accessibility Workshop
Example 2: Two or More of the Same Type of Landmark on the Same Page
<div id="leftnav" role="navigaton" aria-labelledby="leftnavheading"><h2 id="leftnavheading">Institutional Links</h2><ul><li>...a list of links here ...</li> </ul></div><div id="rightnav" role="navigation" aria-labelledby="rightnavheading"><h2 id="rightnavheading">Related topics</h2><ul><li>...a list of links here ...</li></ul></div>
Source: www.w3.org
![Page 54: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/54.jpg)
54Web Accessibility Workshop
Example 3: Two or More of the Same Type of Landmark on the Same Page, and no Text
that can be Referenced as the Label<div id="leftnav" role="navigaton" aria-label="Primary"><ul><li>...a list of links here ...</li></ul> </div><div id="rightnav" role="navigation" aria-label="Secondary"><ul><li>...a list of links here ...</li> </ul></div>
Source: www.w3.org
![Page 55: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/55.jpg)
55Web Accessibility Workshop
Example 4: Search Form with "Search" Landmark. Typically Goes on the Form Field
or Div Surrounding the Search Form<form role="search"><label for="56">search</label><input id="56"
type="text" size="20">...</form>
Source: www.w3.org
![Page 56: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/56.jpg)
56Web Accessibility Workshop
Another Example of Structured Document with ARIA Code
Source: carmenwiki.osu.edu
![Page 57: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/57.jpg)
57Web Accessibility Workshop
Page navigation with WAI-ARIA Landmarks
http://www.youtube.com/watch?v=gS7Op020o-8
![Page 58: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/58.jpg)
58Web Accessibility Workshop
3.E ARIA PROPERTIES AND STATES
![Page 59: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/59.jpg)
59Web Accessibility Workshop
What Properties Are?
• ARIA properties define... well, properties or meanings of elements.;
• You can extend HTML's native semantics by defining properties for elements that are not allowed in standard HTML;
Source: webaim.org
![Page 60: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/60.jpg)
60Web Accessibility Workshop
<input aria-required="true">
• This property will cause a screen reader to read this input as being required (meaning the user must complete it)
Example of Property
Source: webaim.org
![Page 61: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/61.jpg)
61Web Accessibility Workshop
What States Are?
• ARIA states are properties that define the current condition of an element;
• They generally change based on user interaction or some dynamic variable
Source: webaim.org
![Page 62: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/62.jpg)
62Web Accessibility Workshop
<input aria-disabled="true">
• This property will cause a screen reader to read this input as being disabled, but this state value could easily be changed to "false" dynamically based on user input
Example of State
Source: webaim.org
![Page 63: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/63.jpg)
63Web Accessibility Workshop
Global States and PropertiesProperties• aria-atomic• aria-controls• aria-describedby• aria-dropeffect• aria-flowto• aria-haspopup• aria-label• aria-labelledby• aria-live• aria-owns• aria-relevant
States• aria-busy• aria-disabled• aria-grabbed• aria-hidden• aria-invalid
Global states and properties are supported by all roles and by all base markup elements
![Page 64: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/64.jpg)
64Web Accessibility Workshop
Demo: Adding aria-describedby to “more” Links
Without aria-describedby With aria-describedby
![Page 65: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/65.jpg)
65Web Accessibility Workshop
Use role="img" and aria-label to Make a CSS Background Image be Treated Like a Foreground Image
http://www.youtube.com/watch?v=v1gsOG5IEhs#t=40
![Page 66: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/66.jpg)
66Web Accessibility Workshop
Widget AttributesProperties• aria-autocomplete• aria-haspopup• aria-label• aria-level• aria-multiline• aria-multiselectable• aria-orientation• aria-readonly• aria-required• aria-sort• aria-valuemax• aria-valuemin• aria-valuenow• aria-valuetext
States• aria-checked• aria-disabled• aria-expanded• aria-hidden• aria-invalid• aria-pressed• aria-selected
Widget attributes might be mapped by a user agent that MUST provide a way for AT to be notified when states change
![Page 67: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/67.jpg)
67Web Accessibility Workshop
Live Region AttributesProperties• aria-atomic• aria-live• aria-relevant
States• aria-busy (state)
• Live attributes are intended for live regions in rich internet applications;
• These attributes may be applied to any element;• The purpose of these attributes is to indicate that content
changes may occur without the element having focus, and to provide assistive technologies with information on how to process those content updates
![Page 68: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/68.jpg)
68Web Accessibility Workshop
WAI-ARIA Live Region Example
http://www.youtube.com/watch?v=jFB_zJE_pjY
![Page 69: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/69.jpg)
69Web Accessibility Workshop
Drag-and-Drop AttributesProperties• aria-dropeffect
States• aria-grabbed
• Drag-and-Drop attributes indicate information about drag-and-drop interface elements, such as draggable elements and their drop targets
![Page 70: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/70.jpg)
70Web Accessibility Workshop
Relationship Attributes indicate relationships or associations between elements which cannot be readily determined from the document structure
• aria-activedescendant• aria-controls• aria-describedby• aria-flowto
Relationship Attributes
• aria-labelledby• aria-owns• aria-posinset• aria-setsize
![Page 71: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/71.jpg)
71Web Accessibility Workshop
Using aria-labelledby to Dynamically Label a Form Text Field
http://www.youtube.com/watch?v=Xr32OASZO_Q
![Page 72: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/72.jpg)
72Web Accessibility Workshop
4. HTML5 AND WAI ARIA
![Page 73: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/73.jpg)
73Web Accessibility Workshop
Comparing HTML 5 Tags to ARIA Roles
HTML 5 ARIA Role<header> role="banner"<nav> role="navigation"<main> role="main"<footer> role="contentinfo"<aside> role="complementary"<section> role="region" *<article> role="article" *none role="search"<form> role="form"
Source: dequeuniversity.com
More detailed comparison is here: blog.paciellogroup.com
![Page 74: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/74.jpg)
74Web Accessibility Workshop
The Page that Uses WAI ARIA without HTML5
<div role="banner"> <p>Put company logo, etc. here.</p></div><div role="navigation"> <ul> <li>Put navigation here</li> </ul></div><div role="main"> <p>Put main content here.</p></div><div role="contentinfo"> <p>Put copyright, etc. here.</p></div>Source: dequeuniversity.com
![Page 75: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/75.jpg)
75Web Accessibility Workshop
The Same Web Page that Uses HTML5 and WAI ARIA
<header role="banner"> <p>Put company logo, etc. here.</p></header><nav role="navigation"> <ul> <li>Put navigation here</li> </ul></nav><main role="main"> <p>Put main content here.</p></main><footer role="contentinfo"> <p>Put copyright, etc. here.</p></footer>Source: dequeuniversity.com
![Page 76: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/76.jpg)
76Web Accessibility Workshop
Similar Example Again
![Page 77: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/77.jpg)
77Web Accessibility Workshop
5. WAI ARIA PROSPECT
![Page 78: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/78.jpg)
78Web Accessibility Workshop
Will adding ARIA change my page styles or behavior?
• No, ARIA is only made available to assistive technology API's, and doesn't affect native browser functionality with respect to the DOM or styling;
• From the browser's point of view, the native HTML defines the semantic meaning and behavior of an element, with ARIA attributes acting as a layer on top to help support the AT API
Source: developer.mozilla.org
![Page 79: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/79.jpg)
79Web Accessibility Workshop
WAI ARIA Support by Browsers
Browser Minimum Version Notes
Firefox 3.0+ Works with NVDA, JAWS 10+ and Orca
Chrome Latest Screen reader support still experimental as of Chrome 15
Safari 4+Safari 5 support is much improved.Live region support requires Safari 5 with VoiceOver on iOS5 or OS X Lion
Opera 9.5+ Requires VoiceOver on OS X
Internet Explorer 8+Works with JAWS 10+ and NVDA. No live region support in NVDA.IE9 support is much improved.
Source: developer.mozilla.org
![Page 80: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/80.jpg)
80Web Accessibility Workshop
Compatibility table for support of WAI-ARIA Accessibility features
Source: caniuse.com/wai-aria
![Page 81: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/81.jpg)
81Web Accessibility Workshop
How well is ARIA supported?
10123456789
10JAWS 13 NVDA 2012
Orca
VoiceOver
Window eyes 7.5
Screen Readers
Supp
ort
scor
e
Source: slideshare.net
![Page 82: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/82.jpg)
82Web Accessibility Workshop
JS Libraries and WAI-ARIA
• JQuery UI– accordion– dialog– progress bar
• Full ARIA implementation planned for JQuery UI version 2.0
• Sencha Ext JS• ARIA is a high priority in Ext 4.
According to developers, it's built in to every Component.
• Google Web Toolkit– Custom Button– Date Picker– Suggest Box– Tree– Menu Bar– Rich text– Tab Panel
Source: blog.paciellogroup.com
![Page 83: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/83.jpg)
83Web Accessibility Workshop
Is ARIA Used Correctly?
• Research on ARIA landmark role use on the top 10,000 web sites HTML (2012);
• 93 pages found to include the banner role;• 130 pages found to include the main role;• 72 pages found to include the contentinfo
role;• From an initial analysis the correct use of ARIA
landmark roles is surprisingly high
Source: blog.paciellogroup.com
![Page 84: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/84.jpg)
84Web Accessibility Workshop
6. BEST PRACTICESPlease be prepared to share your experience!
![Page 85: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/85.jpg)
85Web Accessibility Workshop
<html> <head><title>Gracefully degrading progress bar</title></head> <body> <progress id="progress-bar" value="0" max="100">0% complete</progress> <button id="update-button">Update</button> </body></html>
var progressBar = document.getElementById("progress-bar");// Check to see if the browser supports the HTML5 <progress> tag.var supportsHTML5Progress = (typeof (HTMLProgressElement) !== "undefined");function setupProgress() { if (!supportsHTML5Progress) { // HTML5 <progress> isn't supported in this browser, so we need to add // ARIA roles and states to the element. progressBar.setAttribute("role", "progressbar"); progressBar.setAttribute("aria-valuemin", 0); progressBar.setAttribute("aria-valuemax", 100); }}function updateProgress(percentComplete) { // Output omitted, follow the link for code…
Graceful Degradation for WAI ARIA:HTML5 Markup Used for Progress Bar and JavaScript
code for older browsers
Source: developer.mozilla.org
![Page 86: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/86.jpg)
86Web Accessibility Workshop
Using Landmarks Roles
• Identify the logical structure of your page;• Implement the logical structure in HTML
markup with <div> or <iframe>;• Label each region with a perceivable header;• Assign landmark roles to each region
![Page 87: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/87.jpg)
87Web Accessibility Workshop
Structuring Page with Landmarks Roles
![Page 88: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/88.jpg)
88Web Accessibility Workshop
7. HOMEWORK ASSIGNMENT 4
![Page 89: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/89.jpg)
89Web Accessibility Workshop
Adding WAI ARIA to a Page
1. Choose two pages from representative sample you used in previous assignment;
2. Identify structure of the page by dividing code onto logical blocks if it is not ready. Use <div> tags;
3. Add ARIA Landmark Roles to these elements;4. Add by necessary tab order for menu
![Page 90: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/90.jpg)
90Web Accessibility Workshop
Validate Your Page
http://validator.w3.org/nu/
![Page 91: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/91.jpg)
91Web Accessibility Workshop
Evaluation
5. Validate your page using validator from previous slide;
6. Test your pages with your favorite Screen Reader;
7. Reflect your experience in your blog, write about problems and differences in use of AT that you observed with and without ARIA
![Page 92: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/92.jpg)
92Web Accessibility Workshop
This Course Hands On Experience
Evaluation of a page
to WCAG Conformance
Testing and repairing
accessibility errors in code
Using Screen Reader to access
page content
Embedding WAI ARIA code to
improve accessibility
Session One Session Two Session Three Session Four
![Page 93: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/93.jpg)
93Web Accessibility Workshop
Thank you for participation!
The assignment implementation deadline isJune 1st
Please, be in time!
Do not forgot to register into exam one week before!
![Page 94: Web accessibility workshop 4](https://reader035.vdocuments.net/reader035/viewer/2022062702/554b9de6b4c905b3618b47a4/html5/thumbnails/94.jpg)
94Web Accessibility Workshop
End of the Course