Web 2.0 Accessibility Section 508 Coordinators Training Conference Rich Schwerdtfeger DE, SWG Accessibility Strategy and Architecture Chair: W3C WAI-ARIA standards effort

©2009 IBM Corporation Early Assistive Technology – December 1991 Byte Magazine

©2009 IBM Corporation Early innovation paved way for first accessibility API  Convert what was drawn to text model  Reverse engineered semantics  Reverse engineering led to inaccuracies  Learned what author needed to provide “Reading the Tea Leaves”

©2009 IBM Corporation First Accessibility APIs – Author Supplied Accessibility  1995 Microsoft Active Accessibility  1998 Java Accessibility API (Sun and IBM)  Importance of Interoperability Assistive Technology Text Button Menu Item Frame Accessible Application Components

©2009 IBM Corporation 1997 Accessibility Divergence caused Problems for Web Access  Web – Rudimentary access Keyboard access – not usability Don’t change HTML Anything we don’t understand prohibit No planning for future developer innovation  Rich Desktop platform accessibility Real issue is interoperability with assistive technology Development of richer platform accessibility APIs Leverage usability of desktop applications to manage information Keyboard accessible and usable  Inability to address web interoperability causing web accessibility criteria to hurt accessibility

©2009 IBM Corporation Web 2.0 Paradigm Shift: Opportunity for Usable Access  Static Documents  New Content = Page Reload  Navigation is mouse centric  Tab and Click Navigation  Can be accessible but Poor Usability for People with Disabilities  Rich desktop-like experience Ajax incremental updates UI tied to back-end services  Rich Desktop experience through use of CSS and JavaScript  Rich Desktop allows for information management – increased usability for the web  Accessibility requires an understanding of desktop accessibility

©2009 IBM Corporation Accessibility API defines a standard contract between an application component and an assistive technology Assistive Technology Assistive Technology Role States Actions Caret Selection Text Hypertext Value Name Description Children Changes Relations ACCESSIBLEACCESSIBLE UI Component Data UI

©2009 IBM Corporation Problem Analysis shows opportunity for richer accessibility  HTML Accessibility depends on tag names (mixing content and presentation)  JavaScript creates custom widgets usingHTML, user input, and CSS changing their meaning and purpose within a Web application  HTML lacks the accessibility meta data to support accessibility APIs for repurposed HTML content  Keyboard usability for PWDs is poor  Almost totally dependent on tabbing  Non anchors/form elements can’t receive focus (W3C HTML browser implementation oversight)  Users needs keyboard navigation and widget behavior like a GUI  User needs consistent navigation landmark semantics to reduce usability problem

©2009 IBM Corporation WAI-ARIA – delivers semantics and desktop keyboard functionality to provide full interoperability with ATs’  Typical widget states aria-checked, aria-selected, aria-disabled, aria-currentvalue, aria-expanded, etc.  Relationships aria-describeby, aria-controls, aria-flowto, aria-labelledby, aria-owns  New AJAX Live Region properties aria-live (off, polite, assertive) aria-relevant (additions, deletions, text, all) aria-atomic  Drag/Drop aria-grabbed aria-dropeffect  Miscellaneous aria-sort (ascending, descending) aria-setsize, aria-posinset, aria-level  Role (widgets and navigational landmarks) Widgets: (tree, grid, button, checkbox, menu, dialog, etc.) Structural: (directory, list, header, etc.) Landmarks: (main, navigation, complementary, banner, contentinfo, form, search, etc.)  Tabindex

©2009 IBM Corporation Web application roles and regional landmarks My Quicklinks Featured … <div role=“tabpanel”

©2009 IBM Corporation role = “treeitem” aria-expanded=“false” aria-level=“2” aria-checked=“false” aria-posinset=“1” aria-setsize=“4” Name=“PJ111” img alt=“folder” Keyboard like desktop Tree widget “Closed Folder PJ111” “Closed Folder one of four Depth 2” “unchecked” Anchor tells is a link Name=PJ11 img alt=“folder” document “tabbing” “link folder PJ111” WCAG 1.0/ current 508 Style Accessibility WCAG 2.0/(potential 508 refresh) Style Accessibility with ARIA Tree Widget Usability Comparison

©2009 IBM Corporation CSS and Compliance through Equivalent Facilitation  Web is too complex for user defined style sheets  Disabling CSS breaks the usability of Web 2.0 applications  Provide low vision support with CSS enabled to meet Support system colors / high contrast mode Respond to font resizing - no fixed font sizes

©2009 IBM Corporation WAI-ARIA – Most important accessibility advance in a decade  Brings Accessibility/Usability of Desktop to the Web  Allows for full interoperability with assistive technology  Key technology needed to support WCAG 2 and 508  Web 2.0 applications, when properly enabled, Benefit ALL Users

Backup

©2009 IBM Corporation References  W3C WAI-ARIA  Examples, Best Practices, Education WAI-ARIA Authoring Practices CodeTalks More on WAI-ARIA  Dojo - Dojo Book -Widgets -  Tooling in development U. of Illinois Firefox accessibility extension Firebug ARIA Extension AccProbe Firefox test tool Open Ajax Alliance Accessibility Tools Task Force

©2009 IBM Corporation Interoperability With WAI-ARIA Before HTMLBrowserAccessibility APIAssistive Technology Document elements Basic form elements Alt text Mouse centric – limited keyboard With WAI-ARIA HTMLARIABrowserAccessibility API (Richer) Assistive Technology UI Types (roles) Properties Landmarks Drag/Drop Full Desktop keyboard usability