Slide 1

Screen Rea ript aSc A Jav RI ithA w der + Accessible Rich Internet Applica1ons Slide 2 Glenda Sims @goodwitch deque.com knowbility #a11y Slide 3 GeAng to Know ARIA ARIA: What & Why Landmarks Rela1onships Accessible JavaScript Widgets ARIA Design PaKerns ARIA Golden Rules Slide 4 ARIA: WHAT & WHY Slide 5 The First Web Page hKp://info.cern.ch/hypertext/WWW/TheProject.html Slide 6 Todays Dynamic Web Applica1ons Slide 7 Screen Readers Get Smart Screen Readers love HTML Originally screen readers could not understand Dynamic Updates to Content - AJAX JavaScript Custom Widgets - like Collapsible Content Tabs Slider ARIA developed so screen readers can love JavaScript too! Slide 8 Is it safe to use ARIA yet? Slide 9 Jump into ARIA Slide 10 Browser Screen Reader Internet Explorer 8+ JAWS Firefox NVDA Safari VoiceOver Browser/Screen Reader Combina1ons Slide 11 Can I UseARIA? hKp://caniuse.com/#feat=wai-aria Slide 12 ARIA TO THE RESCUE Slide 13 ARIA Features Roles describe the structure of the Web page such as headings and regions Roles describe the type of javascript widget presented "menu," "treeitem," "slider Proper1es describe the state javascript widgets are in such as "checked" for a check box Focus provide keyboard naviga1on for all ac1ve elements Slide 14 Get Your Feet Wet Slide 15 LANDMARKS Slide 16 Document Landmark Roles Slide 17 role=banner role=naviga1on role=search role=main role=conten1nfo Try Adding These Landmark Roles! 1. Banner header of the page, for example banner image and the logo. 2. Naviga1on links to navigate the site and related sites 3. Search contains search form for the site 4. Main core content of the page 5. Content Info child content: footnotes, links to privacy statements Slide 18 Deque Home Page is Designed with Landmark Roles Slide 19 Deque Home Page Landmakr Roles Slide 20 1. 2. See ARIA Document Landmarks Install Juice Studio Accessibility Toolbar (for Firefox) addons.mozilla.org/en-us/refox/addon/juicy-studio-accessibility-too/ From the ARIA menu, select Document landmarks Slide 21 ARIA Landmarks in VoiceOver Slide 22 Roll up your pants and wade in a liKle deeper Slide 23 RELATIONSHIPS Form Labeling & Instruc1ons Slide 24 Accessible Form Labeling & Instruc1ons Great ar1cle by Karl Groves (a11y viking) hKp://www.karlgroves.com/2011/10/10/ accessible-form-labeling-instruc1ons/ Slide 25 High-Level Form Field Accessibility All form elements should have explicit labels Labels are clear and informa1ve Format requirements are indicated hKp://www.karlgroves.com/2011/10/10/ accessible-form-labeling-instruc1ons/ Slide 26 S1ck with the HTML Labeling Basics Date: Slide 27 Use aria-describedby for Instruc1ons Date:must be mm/dd/yyyy format Slide 28 Time to Jump In! Slide 29 ARIA DESIGN PATTERNS Accessible JavaScript Widgets Slide 30 ARIA Design PaKerns Slide 31 OPEN AJAX ACCESSIBILITY EXAMPLE FOR TAB PANEL Slide 32 Crust Veggies Carnivore Delivery Source: hKp://www.oaa-accessibility.org/examplep/tabpanel1/"> ARIA Tab Panel Example Happy Time Pizza On-line Ordering System Crust Veggies Carnivore Delivery Source: hKp://www.oaa-accessibility.org/examplep/tabpanel1/ Slide 33 Crust Veggies Carnivore Delivery Source: h*p://www.oaa-accessibility.org/examplep/tabpanel1/"> ARIA Tab Panel Example - Roles Happy Time Pizza On-line Ordering System Crust Veggies Carnivore Delivery Source: h*p://www.oaa-accessibility.org/examplep/tabpanel1/ Slide 34 Crust Veggies Carnivore Delivery Source: h*p://www.oaa-accessibility.org/examplep/tabpanel1/"> ARIA Tab Panel Example - Rela1onship Happy Time Pizza On-line Ordering System Crust Veggies Carnivore Delivery Source: h*p://www.oaa-accessibility.org/examplep/tabpanel1/ Slide 35 Crust Veggies Carnivore Delivery Source: h*p://www.oaa-accessibility.org/examplep/tabpanel1/"> ARIA Tab Panel Example - State Happy Time Pizza On-line Ordering System Crust Veggies Carnivore Delivery Source: h*p://www.oaa-accessibility.org/examplep/tabpanel1/ Slide 36 ARIA Widget Roles alert alertdialog buKon checkbox dialog gridcell link log marquee menuitem menuitemcheckbox menuitemradio op1on progressbar radio scrollbar slider spinbuKon status tab tabpanel textbox 1mer tool1p treeitem Slide 37 ARIA Rela1onship AKributes aria-ac1vedescendant aria-controls aria-describedby aria-owto aria-labelledby aria-owns aria-posinset aria-setsize Slide 38 ARIA Widget AKributes aria-autocomplete aria-haspopup aria-label aria-level aria-mul1line aria-mul1selectable aria-orienta1on aria-readonly aria-required aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext aria-checked (state) aria-disabled (state) aria-expanded (state) aria-hidden (state) aria-invalid (state) aria-pressed (state) aria-selected (state Slide 39 ARIA Design PaKerns www.w3.org/TR/ wai-aria-prac1ces Slide 40 ARIA RULES OF SAFETY Slide 41 Use ARIA Wisely! Build custom controls responsibly Use naJve HTML markup rst Safer Simpler Full Accessibility Built-in Use Custom Controls Only when there is a func1onal advantage Are you sure you cant do this with na1ve HTML mark-up? Make sure check for the following: Did you set the appropriate role? Did you indicated the state(s) and proper1es? Do states and proper1es change correctly when values change? Can you use it with keyboard alone? Can you use it with a screen reader? Slide 42 Deque Digital Equality