Next generation web accessibility: Improvement of usability for disabled users

Next generation web accessibility: Improvement of usability for disabled users Creating a nice user experience for everyone Artur Ortega March 17, 20111

About the speaker: Artur Ortega The difficulties which I meet with in order to realize my existence are precisely what awaken and mobilize my activities, my capacities. — Jose Ortega y Gasett2

Abstract This lecture provides best practices used at Yahoo! for increasing the usability of web pages for disabled users. The real world examples will explain in detail the advantages of WAI-ARIA and other techniques used to improve overall usability for everyone. Say goodbye to “Only accessible” and say hello to “Inclusive Design”!3

Definition: Accessibility Facilities & Transport Consumer Goods & IT In the usual way Information Sources Without too & Available much hassle Communication Generally without any Facilities & Usable help And other areas of life For disabled people4

Definition: Usability Product Specific Specific users With goals Effectiveness, Efficiency & Satisfaction In a specific context of use Qualitative attribute assesses how easy user interfaces are to use Source: ISO 92415

Definition: Universal Design 1. Equitable use 2. Flexibility in use 3. Simple and intuitive 4. Perceptible information 5. Tolerance for error 6. Low physical effort 7. Size and space for approach and use Source: Connell, et al., 19976

Definition: Inclusive Design Accessibility + Effectiveness, Efficiency & Satisfaction Without too much hassle7

Universal vs Inclusive Design Inclusive Design Adaptations & Universal Design Accommodations Design for human diversity, social inclusion & equality8

Real world examples9

Example: Wheelchair Access ` Photo by Alan (merrionsq), available under a Creative Photo by Leonardo Bonnani, available under a Creative Commons Attribution-NonCommercial-NoDerivs licence Commons Attribution-NonCommercial-ShareAlike licence10

Example: Closed Captions Source: YouTube Captions and Subtitles, http://www.youtube.com/watch?v=QRS8MkLhQmM11

Challenges12

Challenges: AJAX, web apps, mobile  98.4% JavaScript enabled  550% increase in mobile screen reader usage in under two years  Social media usage is largely unchanged since October 2009 Source: WebAIM - Screen Reader User Survey13

Inclusive Web Design Effectiveness, Without too Usability for Efficiency & much hassle disabled users Satisfaction Next generation of accessibility14

Challenges of Inclusive Web Design Effectiveness, Efficiency & Satisfaction Generally In the without any usual way help15

A Retrospective: Static Content Photo: Wayan Vota16

Video: Static Page – Wikipedia Source: http://www.wikipedia.org17

Tackling the challenges of Inclusive Web Design In the usual way AJAX Adding Generally without semantics Web apps any help & information Adaptations & Mobile accommodations18

Semantics & Information Semantics Information Mark-up Language information ALT text WAI-ARIA Long image descriptions Microformats Subtitles / Closed captions Audio description Sign-language Etc.19

Semantic mark-up: Some things never change20

Video: Semantic mark-up Source: http://developer.yahoo.com/yui/examples/tabview/frommarkup_clean.html21

Microformats Pros Cons Easy access Breaking to structured accessibility information. because of mis- use of elements & attributes.22

Mobile Pros Cons Built-in Few devices with accessibility accessibility built-in Smart & handy Expensive Apps extend Some apps lack assistive accessibility functionality23

Mobile Compass24

Mobile Yahoo! Messenger25

Mobile Foursquare26

AJAX Pros Cons Better usability New area of Faster than accessibility full-page reloads Needs more Usage of open APIs knowledge, caution and testing27

AJAX Facebook on the new Yahoo! homepage28

WAI-ARIAAccessible AJAX with WAI-ARIA Adding missing semantics to dynamic mark-up29

WAI-ARIA: Page Navigation without Landmarks30

Video: Page navigation without landmarks – Yahoo Sport Source: http://uk.eurosport.yahoo.com/31

WAI-ARIA: Page Navigation with Landmarks32

Video: Page navigation with landmarks – Flickr Source: http://www.flickr.com/groups/blind_photographers/pool/33

WAI-ARIA landmarks: code <body> <div class="header" role="banner"> <div class="navigation" role="navigation"> </div> </div> <div class="section" role="main"> <h1>DIVs + ARIA Roles</h1> <div class="article" role="article"> </div> </div> <div class="footer" role="contentinfo"> </div> </body>34

WAI-ARIA35

General WAI-ARIA examples  Menu  Tabs  Live Region36

Menu without WAI-ARIA roles: A Traditional AJAX Menu37

Video: menu without WAI-ARIA roles Source: http://developer.yahoo.com/yui/examples/menu/example08_clean.html38

Menu with WAI-ARIA roles: Modern AJAX Menu (NVDA)39

Video: menu with WAI-ARIA roles (NVDA) Source: http://developer.yahoo.com/yui/examples/menu/menuwaiaria_source.html40

Menu with WAI-ARIA roles: Modern AJAX Menu (JAWS)41

Video: Menu with WAI-ARIA roles (JAWS) Source: http://developer.yahoo.com/yui/examples/menu/menuwaiaria_source.html42

WAI-ARIA roles: menu code <div role="menubar"> <div role="menuitem" aria-haspopup="true" id="fileMenu">File</div> <div role="menu" aria-labelledby="fileMenu"> <div role="menuitem">Open</div> <div role="menuitem">Save</div> <div role="menuitem">Save as ...</div> ... </div> </div>43

Tabs without WAI-ARIA roles: Traditional AJAX Tabs44

Video: Tabs without WAI-ARIA roles Source: http://es.eurosport.yahoo.com/45

Tabs with WAI-ARIA roles: Modern AJAX Tabs46

Video: tabs with WAI-ARIA roles Source: http://developer.yahoo.com/yui/examples/tabview/tabview-ariaplugin.html47

WAI-ARIA roles: tabs code <ul class="tablist" role="tablist"> <li id="tab1" class="tab selected" aria- controls="panel1" aria-selected="true" role="tab" tabindex="0">Opera</li> <li id="tab2" class="tab" aria- controls="panel2" role="tab" aria- selected="false" tabindex="-1">Firefox</li> <li id="tab3" class="tab" aria- controls="panel3" role="tab" aria- selected="false" tabindex="-1">Explorer</li> <li id="tab4" class="tab" aria- controls="panel4" role="tab" aria- selected="false" tabindex="-1">Safari</li> </ul>48

Behaviour of AJAX updates: The Off-Screen Model49

AJAX Updates: Without Forced Updates50

Video: AJAX updates without forced updates Source: http://developer.yahoo.com/yui/examples/tabview/tabview-ariaplugin.html51

AJAX updates: code Var bufferUpdater; function updateVB(){ if(!bufferUpdater){ bufferUpdater = document.createElement("input"); bufferUpdater.type = "hidden"; bufferUpdater.value = 1; document.body.appendChild(bufferUpdater); } bufferUpdater.value = (bufferUpdater.value == 1 ? 0 : 1); }52

Live Regions53

Video: Live Regions Source: http://www.oaa-accessibility.org/example/22/54

Live Regions: code <div id="liveregion1" class="region" role="timer" aria-labelledby="live1Label" aria-live="assertive" aria-atomic="true" aria-relevant="all"> </div> Source: http://www.oaa-accessibility.org/example/22/55

Conclusion Next Generation of Accessibility Inclusive Design56

Outlook57

Contact Artur Ortega Twitter: @DesignedByBlind Email: artur@ortegalink.com58

http://yaccessibilityblog.com	523
http://www.einfach-fuer-alle.de	6
http://translate.googleusercontent.com	3
http://webcache.googleusercontent.com	2
http://paper.li	1

Next generation web accessibility: Improvement of usability for disabled users

by Artur Ortega on Mar 18, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 535

Statistics

Next generation web accessibility: Improvement of usability for disabled users — Presentation Transcript