Web accessibility workshop 4

Web Accessibility WorkshopSession Four

Vladimir Tomberg, PhDTallinn University

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

3Web Accessibility Workshop

1. PRESENTATION OF HOMEWORKPlease be prepared to share your experience!


2. WAI ARIAIntroduction


• It has a very limited set of interface controls and interactions

HTML is Very Static

Picture Source: funnyvscute.com

http://www.funnyvscute.com/funny/cute-lazy-cat-sleep-on-keyboard/

http://www.funnyvscute.com/funny/cute-lazy-cat-sleep-on-keyboard/


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

http://toys4collection.blogspot.com/2009/11/van-saviour-gundam.html

http://toys4collection.blogspot.com/2009/11/van-saviour-gundam.html


However…

• Many widgets are inaccessible by keyboard;• ATs may not be made aware of dynamically

generated content as it is updated


Here ARIA goes to the stage


ARIA?

Image source: www.artv.cl

http://www.artv.cl/?p=15831


• 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!

http://www.w3.org/TR/wai-aria/


11


WAI ARIA

Clipart by Blinkofyoureye.com

http://www.blinkofyoureye.com/


What's it do?Without WAI-ARIA

Source: blog.paciellogroup.com

http://blog.paciellogroup.com/2008/06/wai-aria-its-easy-media-2008/


What's it do?With WAI-ARIA




• The addition of a role attribute

<a href="#" title="OK" role="button"> <img src="ok.gif" alt="OK"> </a>

What's the Difference?




What's Gained?

• Correct role information: "Button"• Usage instructions: "To activate press

spacebar"




<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


What's it do without WAI-ARIA(example two)




What's it do with WAI-ARIA


What's the difference?



<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




<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




What's Gained?

state information: "pressed"




Progress Bar Code Example

<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"

/>

Source: developer.mozilla.org

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


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

https://dequeuniversity.com/assets/html/jquery-summit/html5/slides/landmarks.html


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



Additional Development Layer

http://www.slideshare.net/ginader/the-5-layers-of-web-accessibility




3. CORE COMPONENTSRoles, properties, and states


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

http://webaim.org/techniques/aria/


Categorization of Roles

Source: www.w3.org

http://www.w3.org/TR/wai-aria/roles


3.A ABSTRACT ROLES


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


3.B WIDGET ROLES


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



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



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



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


Widget Roles Act as Composite UI Widgets

• combobox• grid• listbox• menu• menubar• radiogroup• tablist• tree• treegrid


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

http://www.slideshare.net/stevefaulkner/accessibility-of-html5-and-rich-internet-applications-csun-2012


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)




<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


3.C DOCUMENT STRUCTURE ROLES


Start Structuring with HTML5

Source: classroom.w3devcampus.com

http://classroom.w3devcampus.com/mod/book/view.php?id=1225


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


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


3.D DOCUMENT LANDMARK ROLES


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



Roles for regions of the page intended as navigational landmarks

• application• banner• complementary• contentinfo• form• main• navigation• search


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


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;


Structuring Page with Landmarks Roles


How ARIA Landmark Roles Help Screen Reader Users

Source: youtube.com

http://www.youtube.com/watch?v=IhWMou12_Vk

http://www.youtube.com/watch?v=IhWMou12_Vk


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

http://www.w3.org/WAI/GL/wiki/Using_ARIA_landmarks_to_identify_regions_of_a_page


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



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



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



Another Example of Structured Document with ARIA Code

Source: carmenwiki.osu.edu

https://carmenwiki.osu.edu/display/10292/HTML5+Accessibility+Code+Examples


Page navigation with WAI-ARIA Landmarks

http://www.youtube.com/watch?v=gS7Op020o-8




3.E ARIA PROPERTIES AND STATES


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



<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



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



<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



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


Demo: Adding aria-describedby to “more” Links

Without aria-describedby With aria-describedby

http://www.youtube.com/watch?v=k5kO6lxnAjE

http://www.youtube.com/watch?v=kFQrHp9zCNY


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

http://www.youtube.com/watch?v=v1gsOG5IEhs


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


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


WAI-ARIA Live Region Example

http://www.youtube.com/watch?v=jFB_zJE_pjY




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


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


Using aria-labelledby to Dynamically Label a Form Text Field

http://www.youtube.com/watch?v=Xr32OASZO_Q




4. HTML5 AND WAI ARIA


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


http://blog.paciellogroup.com/2013/02/using-wai-aria-landmarks-2013/

http://blog.paciellogroup.com/2013/02/using-wai-aria-landmarks-2013/


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



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



Similar Example Again


5. WAI ARIA PROSPECT


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




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.




Compatibility table for support of WAI-ARIA Accessibility features

Source: caniuse.com/wai-aria

http://caniuse.com/wai-aria


How well is ARIA supported?

10123456789

10JAWS 13 NVDA 2012

Orca

VoiceOver

Window eyes 7.5

Screen Readers

Supp

ort

scor

e




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


http://jqueryui.com/

http://jqueryui.com/

http://www.sencha.com/products/extjs/

http://gwt.googleusercontent.com/samples/Showcase/Showcase.html

http://blog.paciellogroup.com/2009/07/wai-aria-implementation-in-javascript-ui-libraries/


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


http://blog.paciellogroup.com/2012/04/html5-accessibility-chops-real-world-aria-landmark-use/


6. BEST PRACTICESPlease be prepared to share your experience!


<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




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


Structuring Page with Landmarks Roles


7. HOMEWORK ASSIGNMENT 4


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


Validate Your Page

http://validator.w3.org/nu/

http://validator.w3.org/nu/


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


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


Thank you for participation!

The assignment implementation deadline isJune 1st

Please, be in time!

Do not forgot to register into exam one week before!


End of the Course

Education

Web accessibility workshop 4