WAI-ARIA and the OpenAjax Alliance Accessibility Working Group.

TOOLS FOR THE NEXT
GENERATION OF WEB ACCESSIBILITY

WAI-ARIA AND THE
OPEN AJAX ALLIANCE ACCESSIBILITY WORKING GROUP

© 2010 IBM Corporation

Author Information

 Michael Squillace, Ph.D

 IBM Research, Austin, TX, USA
– Formerly with the IBM Human Ability and Accessibility Center
– Recently accepted position with IBM Research Compute Cloud (RC2) Strategic Initiative

 Contact information
– 1.512.286.8694
– masquill@us.ibm.com


Agenda

 Web 2.0 and WCAG2

 The WCAG2 gap
– The enablement problem and WAI-ARIA
– Introduction to WAI-ARIA
– The validation problem and OAA A11y WG

 Goals and deliverables of OAA A11y WG

 Simplifying WCAG2 as validation rules

 Expressing validation rules and rulesets

 Status of and getting involved in OAA A11y WG


Web 2.0 and WCAG 2.0

 Web 2.0 for our purposes
– a platform upon which to build applications that promote interaction and a rich user experience
– lack of centralized authority, open standards, and well-understood and agreed-upon protocols
– Efficiently develop a desktop experience on the web
• AJAX means no page reloads and more responsive
• Content aggregation
• Social collaboration and multi-processes/tasking

 The RIA and WCAG 2.0
– RIA = Rich Internet Application and is exemplified by dynamic, interactive content
– Examples: Gmail, Yahoo home page, Twitter
– New types of content and applications demands new a11y guidelines

 Web Content Accessibility Guidelines v2.0 (WCAG2)
– Published in December 2008 by the Worldwide Web Consortium (W3C)
– provides criteria for more traditional accessibility concerns e.g.:
• providing text equivalents for graphical content
• ensuring intuitive navigability
– Improves upon prior guidelines to address RIAs, e.g.:
• content export richer and more robust accessibility semantics such as a user interface object's role, state, and value
• Establish information and relationships between objects
• Applications manage their own keyboard operability


WCAG2: The Enablement Problem and WAI-ARIA

 What is a11y enablement?
– The processes through which authors and developers export the necessary semantics to assistive
technology (AT) so that content can be presented in an alternative format that is consumable to
persons with disabilities
– Ensure that content and applications is perceivable, operable, understandable, and robust (in the
parlance of WCAG2)

 Providing for enablement
– Definition: runtime platform - an execution environment for applications, including applications that
render content
– Definition: platform accessibility architecture – in a runtime platform, provides
• definition and exporting of semantic information such as the role, states, and properties of components of
graphical user interface (GUI) components
• ways to programmatically set or modify the states of these components and, when possible, activate the
functionality of components
• Monitoring of the events fired by GUI components or by lower-level user or system events and a mechanism for
notification of these events
• device-independent access to and interaction with these components


WCAG2: The Enablement Problem and WAI-ARIA (cont.)

 Web browser as execution environment
– Key ingredient of the web as a runtime platform
– Fundamental components include JavaScript, AJAX, HTML, CSS
– Manages life cycle, coexistence, security, etc. of applications built on these components

 Accessibility architecture
– In the structure of the HTML document as parsed into a Document Object Model (DOM)
– Default mappings of elements to known roles and states of the accessibility API of the underlying OS
– Consisted not of an accessibility API appropriate for this execution environment, but of the semantics
inherited from HTML and from the underlying OS
– Criteria for providing enablement were missing or not fully implemented so that genuine enablement
was not possible


What is WAI-ARIA?

 Web Accessibility Initiative’s Accessible Rich Internet Application (WAI-ARIA) provides
– A way for authors to apply rich accessibility semantics in Web 2.0 content to support OS platform
accessibility
– A way to reproduce the keyboard functionality of desktop applications on a web page
– A vehicle to provide full interoperability with assistive technologies for RIAs through the browser
– Deemphasizes DTD validation and emphasizes interoperability

 WAI-ARIA specification includes
– A roles taxonomy to describe the type of widget presented and to provide structure to web content
– A collection of states and properties to provide a runtime description of a widget with a given role (e.g.
checked, visible, focused, haspopup)
– Properties to define live regions of a page or drag sources and drop targets on a page
– Techniques and markup for implementing keyboard operability
– An implementation guide for user agent manufacturers to convey how WAI-ARIA maps to
accessibility APIs on various platforms
– An authoring practices guide that includes design patterns and keyboard management techniques for
common UI componentry


Demonstration and Sample Code


WCAG2 – The Validation Problem

 No deterministic testing strategy
– WCAG2 techniques offer only examples of how success criteria might be satisfied
– A set of concrete, implementable validation rules does not exist for determining whether a given
element (or group of elements) satisfies a relevant success criterion
– Even the relevancy or applicability of criterion to elements cannot be codified
– Can we simplify WCAG2 to the point where its at least partially machine-readable?

 Dynamic and interactive nature of the RIA
– A RIA dynamically changes as the user interacts with the application
– Developers and testers need ways to test web applications
• at a variety of points during the product life cycle
• Through different paths of the application
– Successful accessibility compliance must include the states through which the application passes in
addition to the static analysis of HTML documents


What is the OAA Accessibility Working Group

 Group within the Open Ajax Alliance initiated by IBM SWG in February 2009

 Co-chaired by Jon Gunderson (University of Illinois) and Rich Schwerdtfeger (SWG)
– Squillace relinquished co-chair in August after position change

 Originally an OAA Task Force but graduating to a WG
– Task Force Wiki: http://www.openajax.org/member/wiki/Accessibility
– Charter for WG: http://www.openajax.org/member/wiki/Accessibility_Charter

 Participation from academic and commercial organizations including:
– IBM HA&AC, SWG, Rational
– Parasoft
– Deque
– University of Illinois, Center for Information Technology and Web Accessibility

 A collaborative effort between web accessibility tool venders and accessibility experts to
address the validation problem


Goals and Deliverables

 Accessibility Rules Format 1.0 Specification
– A rules format for codifying accessibility guidelines or criteria that will enable accessibility test tools to
determine the applicability of these criteria to specific elements of applications and whether or not
these criteria are satisfied by these elements
– Current charter restricts rules to WCAG2 as applied to HTML 4.01 w/ WAI-ARIA
– Group may re-charter to address additional technologies and guidelines

 Accessibility Reporting Best Practices 1.0 Note
– A set of best practices for reporting accessibility compliance violations that will guide accessibility test
tool venders in the most effective way to report accessibility violations within different environments
• Integrated development environments (IDE) during development
• Functional Verification (FVT) or Systems Integration (SIT) for testers

 Open repository of validation rules and rulesets
– Maintain, regularly update, and oversee contributions to a repository of validation rules and rulesets
– Public and open to all
– Contributions welcome that follow the review process


Simplifying WCAG2 as Rules

 Three steps required to implement a WCAG2 success criterion
– List the implications of the criterion in the form of pseudo-code or execution logic (validation rule)
– Express the pseudo-code in JavaScript according to the A11y WG rules format specification,
including the context in which the rule is to be applied (validation rule object)
– Include the new validation rule object within a validation ruleset object

 Examples: from success criteria to validation rules
– SC 1.1.1 non-text content: All non-text content that is presented to the user has a text alternative
that serves the equivalent purpose…
• alt attribute is missing from images that can be determine to be non-decorative or that are lacking WAI-ARIA
role='presentation‘
• the longdesc attribute (if present) must point to a legitimate alternative resource (e.g. an .html file)
• image is found with null alt text (i.e. either no alt attribute or alt="") but title attribute is present


Simplifying WCAG2 as Rules (cont.)

 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through
presentation can be programmatically determined or are available in text.
– use of any stylistic, deprecated HTML markup (e.g. b (bold), blink, marquee, u (underlined text), i
(italicize), etc.
– an element with role="log" does not have an element with aria-controls set to the ID of the element
with role="log“
– an element with role="textbox" does not have an aria-labelledby property with an idref representing a
label
– Of course, includes non-WAI-ARIA version, which requires all form controls to be associated with a
label via the ‘for’ attribute of the <label> element

 4.1.2 Name, Role, Value: For all user interface components (including but not limited to:
form elements, links and components generated by scripts), the name and role can be
programmatically determined; states, properties, and values that can be set by the user can
be programmatically set ; and notification of changes to these items is available to user
agents including assistive technologies.
– invalid or incorrect WAI-ARIA role given WAI-ARIA specification of roles
– A container role (tree, grid, menu, etc.) must have at least one child with an applicable role as defined
by WAI-ARIA
– an assigned WAI-ARIA state or property is not compatible with the global or role-specific states and
properties for a given WAI-ARIA role


Validation Rule Objects
 Validation rule objects
– Essential properties: id, context, validate
– Permits rule reuse in different checklists
– Written in JavaScript
• familiar to web developers and testers
• portable via its support in a variety of browsers on multiple platforms
• also a number of stand-alone JavaScript engines (e.g. SpiderMonkey, Rhino)

 Return to SC 1.1.1 non-text content: All non-text content that is presented to the user has a text
alternative that serves the equivalent purpose…
– Validation rule: alt attribute is missing from images that can be determine to be non-decorative

{
id : “altAttr_1”,
context : “img[@role != „presentation‟]”,
validateParams : {
min_decorative_width : {value:8, type:"integer"},
min_decorative_height : {value:8, type:"integer"}
},

validate : function (ruleContext) {
var minDecWidth = this.validateParams.min_decorative_width.value;
var minDecHeight = this.validateParams.min_decorative_height.value;
var width = ruleContext.clientWidth;
var height = ruleContext.clientHeight;
var passed = (width <= minDecWidth && height <= minDecHeight)
|| ruleContext.hasAttribute("alt");
return new ValidationResult(passed, [ruleContext]);
}
}


Validation Rule Objects (cont.)

 the longdesc attribute (if present) must point to a legitimate alternative resource (e.g. an .html file)

{
id : “longdescAttr”,
context : “img[@longdesc][@role != 'presentation']”,
validateParams : {
valid_longdesc_url : {value:/.+.[x]?htm[l]?$/i, type:"regexp"}
},

var pattern = this.validateParams.valid_longdesc_url.value;
var passed = pattern.test(ruleContext.longDesc);
return new ValidationResult(passed, [ruleContext]);
}
}


A Validation Rule Object for 4.1.2

 4.1.2 Name, Role, Value: For all user interface components (including but not limited to: form elements,
links and components generated by scripts), the name and role can be programmatically determined
– Essential to the validation problem and demands WAI-ARIA for enablement
– Validation rule: If a role is specified, it is included in the WAI-ARIA roles taxonomy

{
id : “invalidWaiAriaRole”,
context : “*[@role]”,
var passed = true;
var role = ruleContext.getAttribute("role");

// Make sure the role value is consistent with IE
if (role==null)
role = '';

// Check to see that the role is valid
if (!OpenAjax.a11y.aria.designPatterns[role]) passed = false;
return new ValidationResult(passed, [ruleContext], 'role', '', [role]);
}
}


Validation Rulesets

 Validation rules contain rule logic, everything else is defined by a ruleset
– Container for validation rules
– Holds metadata about ruleset and about each rule
– All symbols are localizable codes
– Coded in JavaScript, but format is straight-forward

 Three parts of a validation ruleset
– Basic information – describes the checklist we are constructing and provides URLs that can be used
by tools to point users to additional information
– Requirements list - breaks down the overall guidelines into its checkpoint components. For WCAG2,
these are the success criteria, but they might also be the checkpoints of WCAG1 or the individual
regulations of U.S. Section 508.
– Grouping of rules within requirements objects, including additional metadata for the rule


Sample Validation Ruleset
{
// basic info
id : "WCAG_2_0",
nameCode : "WCAG20.name",
descriptionCode : "WCAG20.description",

// rulesetUrl - URL of the checklist/ruleset as a whole
rulesetUrl : "http://www.w3.org/TR/WCAG20/",
// baseReqUrl - used to resolve relative urls of requirementUrls only
baseReqUrl : "http://www.w3.org/TR/WCAG20/",

requirements : [
{
criterionNumber : '1.1.1',
criterionLevel : 'WCAG20.level.A',
criterionDesc : 'WCAG20.description.1_1_1',
requirementUrl: '#text-equiv',
rules : {
'altAttr_1' : {severityCode:'level.violation', …},
'longdescAttr' : {severityCode:'level.potentialViolation', …},
}
}, // 1.1.1

{
criterionNumber : '4.1.2',
criterionLevel : 'WCAG20.level.',
criterionDesc : 'WCAG20.description.4_1_2',
requirementUrl: '#ensure-compat-rsv',
rules : {
'invalidRole' : {severityCode:'level.Violation', …},
}
} // 4.1.2
] // requirements
}


Status of the A11y WG

 Current charter extends through June 2011 and includes WCAG2 as applied to HTML 4.01
w/ WAI-ARIA
– Future charters may address HTML5, SVG or legislation such as US Sec 508 refresh
– Might also integrate with other specifications such as ATAG for work in IDEs
– Work also in rules/test case maintenance application, algorithms and mechanisms for more dynamic
validation, and strategies for reporting a11y compliance violations

 Involvement and contributions are most welcome
– Contact co-chairs or send an email to accessibility@openajax.org
– Register individually or as an organization with the OpenAjax Alliance at http://www.openajax.org


WAI-ARIA and the OpenAjax Alliance Accessibility Working Group.

More Related Content

Viewers also liked (6)

Similar to WAI-ARIA and the OpenAjax Alliance Accessibility Working Group. (20)

More from AEGIS-ACCESSIBLE Projects (20)

Recently uploaded (20)

WAI-ARIA and the OpenAjax Alliance Accessibility Working Group.