Presentation is loading. Please wait.

Presentation is loading. Please wait.

Screen Rea ript aSc A Jav RI ithA w der + Accessible Rich Internet Applica1ons.

Similar presentations


Presentation on theme: "Screen Rea ript aSc A Jav RI ithA w der + Accessible Rich Internet Applica1ons."— Presentation transcript:

1 Screen Rea ript aSc A Jav RI ithA w der + Accessible Rich Internet Applica1ons

2 Glenda deque.com knowbility #a11y

3 GeAng to Know ARIA ARIA: What & Why Landmarks Rela1onships Accessible JavaScript Widgets – ARIA Design PaKerns ARIA Golden Rules

4 ARIA: WHAT & WHY

5 The First Web Page hKp://info.cern.ch/hypertext/WWW/TheProject.html

6 Today’s Dynamic Web Applica1ons

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!

8 Is it safe to use ARIA yet?

9 Jump into ARIA

10 Browser Screen Reader Internet Explorer 8+ JAWS Firefox NVDA Safari VoiceOver Browser/Screen Reader Combina1ons

11 Can I Use…ARIA? hKp://caniuse.com/#feat=wai-­‐aria

12 ARIA TO THE RESCUE

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

14 Get Your Feet Wet

15 LANDMARKS

16 Document Landmark Roles

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…

18 Deque Home Page is Designed with Landmark Roles

19 Deque Home Page Landmakr Roles

20 1. 2. See ARIA Document Landmarks Install Juice Studio Accessibility Toolbar (for Firefox) addons.mozilla.org/en-­‐us/firefox/addon/juicy-­‐studio-­‐accessibility-­‐too/ From the ARIA menu, select “Document landmarks”

21 ARIA Landmarks in VoiceOver

22 Roll up your pants and wade in a liKle deeper

23 RELATIONSHIPS Form Labeling & Instruc1ons

24 Accessible Form Labeling & Instruc1ons Great ar1cle by Karl Groves (a11y viking) hKp://www.karlgroves.com/2011/10/10/ accessible-­‐form-­‐labeling-­‐instruc1ons/

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/

26 S1ck with the HTML Labeling Basics Date:

27 Use aria-­‐describedby for Instruc1ons Date: must be mm/dd/yyyy format

28 Time to Jump In!

29 ARIA DESIGN PATTERNS Accessible JavaScript Widgets

30 ARIA Design PaKerns

31 OPEN AJAX ACCESSIBILITY EXAMPLE FOR TAB PANEL

32 ARIA Tab Panel Example Happy Time Pizza On-­‐line Ordering System


Download ppt "Screen Rea ript aSc A Jav RI ithA w der + Accessible Rich Internet Applica1ons."

Similar presentations


Ads by Google