WAI-ARIA and the OpenAjax Alliance Accessibility Working Group.


Published on

Mike Squillace, IBM

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

WAI-ARIA and the OpenAjax Alliance Accessibility Working Group.

  2. 2. 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 © 2010 IBM Corporation
  3. 3. 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 © 2010 IBM Corporation
  4. 4. 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 © 2010 IBM Corporation
  5. 5. 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 © 2010 IBM Corporation
  6. 6. 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 © 2010 IBM Corporation
  7. 7. 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 © 2010 IBM Corporation
  8. 8. Demonstration and Sample Code © 2010 IBM Corporation
  9. 9. 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 © 2010 IBM Corporation
  10. 10. 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 © 2010 IBM Corporation
  11. 11. 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 © 2010 IBM Corporation
  12. 12. 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 © 2010 IBM Corporation
  13. 13. 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 © 2010 IBM Corporation
  14. 14. 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]); } } © 2010 IBM Corporation
  15. 15. 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"} }, validate : function (ruleContext) { var pattern = this.validateParams.valid_longdesc_url.value; var passed = pattern.test(ruleContext.longDesc); return new ValidationResult(passed, [ruleContext]); } } © 2010 IBM Corporation
  16. 16. 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]”, validate : function (ruleContext) { 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]); } } © 2010 IBM Corporation
  17. 17. 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 © 2010 IBM Corporation
  18. 18. 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 } © 2010 IBM Corporation
  19. 19. 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 © 2010 IBM Corporation