Static vs. Interactive Widget Roles: Ensuring Proper Functionality in ARIA Presented by: Bryan Garaventa, Accessibility Fellow Terri Fellers, Director Accessibility Services

Formerly Known As SSB BART Group Who is Level Access? Formerly Known As SSB BART Group New Corporate Identity – Name and Branding New Website – Coming Spring 2017!! No Change in our Innovative Technology or Excellent Service CSUN 2017 Assistive Technology Conference

CSUN 2017 Assistive Technology Conference Overview Static vs. Interactive Widget Roles: Ensuring Proper Functionality in ARIA What is ARIA? ARIA Role Categories Static ARIA Roles Pseudo Interactive Roles Interactive Widget Roles Tools and Resources Interactive Examples Contact Information CSUN 2017 Assistive Technology Conference

What is ARIA?

CSUN 2017 Assistive Technology Conference ARIA Definition Static vs. Interactive Widget Roles: Ensuring Proper Functionality in ARIA ARIA stands for Accessible Rich Internet Applications ARIA is a technical specification published by the World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI) It is important that the assistive technology is active and checking for MSAA changes before you activate the browser or program you are testing. False issues can often crop up when this is not followed. CSUN 2017 Assistive Technology Conference

ARIA Role Categories

CSUN 2017 Assistive Technology Conference ARIA Role Categories Static vs. Interactive Widget Roles: Ensuring Proper Functionality in ARIA Three Primary Categories: Static ARIA roles – do not require any scripting Pseudo Interactive roles – nearly static but require some scripting to properly implement Interactive Widget roles – roles that cannot be used without comprehensive scripting The ARIA Role Matrices can be used to quickly identify these categories, including specific implementation guidance: http://whatsock.com/training/matrices/ It is important that the assistive technology is active and checking for MSAA changes before you activate the browser or program you are testing. False issues can often crop up when this is not followed. CSUN 2017 Assistive Technology Conference

CSUN 2017 Assistive Technology Conference Static ARIA Roles Static vs. Interactive Widget Roles: Ensuring Proper Functionality in ARIA Static ARIA Roles can be included within standard HTML markup and require no scripting. Static ARIA Roles include: Landmark and Region Roles: application, banner, complementary, contentinfo, form, main, navigation, region, search Structural Roles: article, definition, directory + listitem, document, feed + article, figure, heading, img, list + listitem, math, notes, separator, table + cell, toolbar Specialty Roles: none, presentation It is important that the assistive technology is active and checking for MSAA changes before you activate the browser or program you are testing. False issues can often crop up when this is not followed. CSUN 2017 Assistive Technology Conference

Pseudo Interactive Roles Static vs. Interactive Widget Roles: Ensuring Proper Functionality in ARIA Pseudo Interactive Roles are static roles that can be included within standard HTML markup, but require some basic accompanying scripting to ensure proper functionality. Pseudo Interactive Roles include: Dialog Roles: alertdialog, dialog Live Region Roles: alert, log, marquee, status, timer It is important that the assistive technology is active and checking for MSAA changes before you activate the browser or program you are testing. False issues can often crop up when this is not followed. CSUN 2017 Assistive Technology Conference

Interactive Widget Roles Static vs. Interactive Widget Roles: Ensuring Proper Functionality in ARIA Interactive Widget Roles can be included in standard HTML markup, but require precise scripting to ensure proper functionality. Interactive Widget Roles: Simple Interactive Widget Roles: button, checkbox, link, progressbar, searchbox, scrollbar, slider, spinbutton, switch, textbox, tooltip Complex Interactive Widget Roles: combobox, grid or treegrid + rowgroup + row + columnheader + gridcell, listbox + option, menu or menubar + menuitem or menuitemcheckbox or menuitemradio, radiogroup + radio, tablist + tab + tabpanel, tree + treeitem + group It is important that the assistive technology is active and checking for MSAA changes before you activate the browser or program you are testing. False issues can often crop up when this is not followed. CSUN 2017 Assistive Technology Conference

Interactive Examples

Tools and Resources

CSUN 2017 Assistive Technology Conference Tools and Resources Static vs. Interactive Widget Roles: Ensuring Proper Functionality in ARIA Visual ARIA tool: http://whatsock.com/training/matrices/visual-aria.htm ARIA Role Matrices: http://whatsock.com/training/matrices/ The Accessibility Tree Training Guide: detailed training course for learning ARIA from beginning to end: http://whatsock.com/training/ Archive of open source provably accessible widgets for use within any web technology project: Powered by jQuery: https://github.com/accdc/tsg Powered by MooTools: https://github.com/accdc/tsg-mootools Powered by Dojo: https://github.com/accdc/tsg-dojo It is important that the assistive technology is active and checking for MSAA changes before you activate the browser or program you are testing. False issues can often crop up when this is not followed. CSUN 2017 Assistive Technology Conference

Any Questions?

Thank you. Bryan Garaventa bryan. garaventa@ssbbartgroup Thank you. Bryan Garaventa bryan.garaventa@ssbbartgroup.com Terri Fellers terri.fellers@ssbbartgroup.com