achieving a safe and seamless user experience through accessible web applications (rome 2012 w3c...

32
Achieving a Safe and Seamless User Experience Through Accessible Web Applications Alejandro Piñeiro Iglesias

Upload: igalia

Post on 18-Jan-2015

653 views

Category:

Technology


0 download

DESCRIPTION

By Alejandro Piñeiro. Web applications with flexible and dynamic user interaction models form a set of tools which are growing rapidly in availability and can be used at any time, in any place, on any device, and without the learning curve typically associated with a new platform. But perhaps more importantly, web applications which are fully accessible to users with disabilities can be equally accessible to users who are driving and require hands- and eyes-free interaction with their device in order to be safe. Thus accessible web applications are a means to achieve a user experience which is safe and seamless and do so at a greatly reduced cost to device manufacturers who can provide their customers with the tools they desire simply by implementing browser support. The automotive industry should strongly consider moving in this direction.

TRANSCRIPT

Page 1: Achieving a Safe and Seamless User Experience Through Accessible Web Applications (Rome 2012 W3C Web&Automotive Workshop)

Achieving a Safe and SeamlessUser Experience

Through Accessible Web Applications

Alejandro Piñeiro Iglesias

Page 2: Achieving a Safe and Seamless User Experience Through Accessible Web Applications (Rome 2012 W3C Web&Automotive Workshop)

Achieving a Safe and Seamless User Experience Through Accessible Web ApplicationsAlejandro Piñeiro | [email protected] | www.igalia.com/accessibility

2 Topics● Accessibility-based solutions to improve safety

● Implementation via accessibility APIs

● Applicable standards and existing support

Page 3: Achieving a Safe and Seamless User Experience Through Accessible Web Applications (Rome 2012 W3C Web&Automotive Workshop)

`

Accessibility-Based Solutionsto Improve Safety

Page 4: Achieving a Safe and Seamless User Experience Through Accessible Web Applications (Rome 2012 W3C Web&Automotive Workshop)

4

Achieving a Safe and Seamless User Experience Through Accessible Web ApplicationsAlejandro Piñeiro | [email protected] | www.igalia.com/accessibility

Safety First?

3 November 2012“Authorities say a driver distracted by his cell phone caused a head-on crash that killed an elderly man and seriously injured an elderly woman in central California."

31 October 2012“An eastern Utah man was charged Wednesday with hitting and killing a Vernal teenager with his car while texting behind the wheel.”

8 November 2012“Police say a distracted driver caused a head-on crash.... The driver of the second truck and his passenger had to be extricated from the vehicle by firefighters."

9 November 2012“Off-duty officer killed, Cal Trans flagger seriously hurt in chain reaction crash.... Cal Trans said the accident was likely caused by a distracted driver."

Page 5: Achieving a Safe and Seamless User Experience Through Accessible Web Applications (Rome 2012 W3C Web&Automotive Workshop)

Achieving a Safe and Seamless User Experience Through Accessible Web ApplicationsAlejandro Piñeiro | [email protected] | www.igalia.com/accessibility

5

"In 2010, 3092 people were killed in crashes involving a distracted driver and an estimated additional 416,000 were injured in motor vehicle crashes involving a distracted driver."

U.S. National Highway Traffic Safety Administration

Page 6: Achieving a Safe and Seamless User Experience Through Accessible Web Applications (Rome 2012 W3C Web&Automotive Workshop)

Achieving a Safe and Seamless User Experience Through Accessible Web ApplicationsAlejandro Piñeiro | [email protected] | www.igalia.com/accessibility

6 Hands-Free via Speech Input

For:

● Users who cannot use a keyboard and/or touch screen (i.e. due to disability)

● Users who should not use a keyboard and/or touch screen (i.e. due to driving)

Page 7: Achieving a Safe and Seamless User Experience Through Accessible Web Applications (Rome 2012 W3C Web&Automotive Workshop)

Achieving a Safe and Seamless User Experience Through Accessible Web ApplicationsAlejandro Piñeiro | [email protected] | www.igalia.com/accessibility

7

For:

• Users who have difficulty visually accessing screen contents (i.e. due to disability)

• Users who have difficulty visually accessing screen contents (i.e. due to driving)

Eyes-Minimal via Simplified UI

Page 8: Achieving a Safe and Seamless User Experience Through Accessible Web Applications (Rome 2012 W3C Web&Automotive Workshop)

Achieving a Safe and Seamless User Experience Through Accessible Web ApplicationsAlejandro Piñeiro | [email protected] | www.igalia.com/accessibility

8

For:

• Users who cannot visually access screen contents (i.e. due to disability)

• Users who should not visually access screen contents (i.e. due to driving)

Eyes-Free via Speech Output

Page 9: Achieving a Safe and Seamless User Experience Through Accessible Web Applications (Rome 2012 W3C Web&Automotive Workshop)

Achieving a Safe and Seamless User Experience Through Accessible Web ApplicationsAlejandro Piñeiro | [email protected] | www.igalia.com/accessibility

9

For:

• Users who cannot activate on-screen elements directly (i.e. due to disability)

• Users who should not activate on-screen elements directly (i.e. due to driving)

Eyes-Free via Gestures

Page 10: Achieving a Safe and Seamless User Experience Through Accessible Web Applications (Rome 2012 W3C Web&Automotive Workshop)

Achieving a Safe and Seamless User Experience Through Accessible Web ApplicationsAlejandro Piñeiro | [email protected] | www.igalia.com/accessibility

10

“Since driving ... is primarily a visual-spatial-motor task, it is predicted (and observed) to be fairly efficiently time shared with tasks that are auditory and language based.”

Models of Attention, Distraction, and Highway Hazard Avoidance

Page 11: Achieving a Safe and Seamless User Experience Through Accessible Web Applications (Rome 2012 W3C Web&Automotive Workshop)

`

Implementation via Accessibility APIs

Page 12: Achieving a Safe and Seamless User Experience Through Accessible Web Applications (Rome 2012 W3C Web&Automotive Workshop)

Achieving a Safe and Seamless User Experience Through Accessible Web ApplicationsAlejandro Piñeiro | [email protected] | www.igalia.com/accessibility

12

Accessibility APIs allow you to interact with applications programmatically on behalf of the end user.

Accessibility APIs

Page 13: Achieving a Safe and Seamless User Experience Through Accessible Web Applications (Rome 2012 W3C Web&Automotive Workshop)

13

Achieving a Safe and Seamless User Experience Through Accessible Web ApplicationsAlejandro Piñeiro | [email protected] | www.igalia.com/accessibility

Example: Remember the Milk

1.Remember The Milk displays an alert that the driver is in an area with an associated task.

2.Device checks the car's speed to be sure it is safe, then speaks the displayed alert.

3.Driver says “No” to indicate he does not want to be given navigation directions.

4.Device clicks on the “No” button for the driver.

Page 14: Achieving a Safe and Seamless User Experience Through Accessible Web Applications (Rome 2012 W3C Web&Automotive Workshop)

Achieving a Safe and Seamless User Experience Through Accessible Web ApplicationsAlejandro Piñeiro | [email protected] | www.igalia.com/accessibility

14 Accessibility API Events

• Focus changes

• Selection changes

• Text changes

• Value changes

• Visual appearance changes

• Addition and removal of new objects

• Etc.

Page 15: Achieving a Safe and Seamless User Experience Through Accessible Web Applications (Rome 2012 W3C Web&Automotive Workshop)

Achieving a Safe and Seamless User Experience Through Accessible Web ApplicationsAlejandro Piñeiro | [email protected] | www.igalia.com/accessibility

15 Accessibility API Actions

• Press, release, and click on a button

• Toggle the state of a widget

• Drag and drop an item

• Etc.

Page 16: Achieving a Safe and Seamless User Experience Through Accessible Web Applications (Rome 2012 W3C Web&Automotive Workshop)

Achieving a Safe and Seamless User Experience Through Accessible Web ApplicationsAlejandro Piñeiro | [email protected] | www.igalia.com/accessibility

16 Accessibility API Interfaces● Application● Component● Desktop● Document● Hypertext● Image

● Selection● Streamable Content● Text● Editable Text● Table● Value

Page 17: Achieving a Safe and Seamless User Experience Through Accessible Web Applications (Rome 2012 W3C Web&Automotive Workshop)

Achieving a Safe and Seamless User Experience Through Accessible Web ApplicationsAlejandro Piñeiro | [email protected] | www.igalia.com/accessibility

17 Accessibility API Use Cases

• Provide access to users with disabilities

• Automated testing

• (Distraction-free access for drivers?)

Page 18: Achieving a Safe and Seamless User Experience Through Accessible Web Applications (Rome 2012 W3C Web&Automotive Workshop)

Achieving a Safe and Seamless User Experience Through Accessible Web ApplicationsAlejandro Piñeiro | [email protected] | www.igalia.com/accessibility

18 Requirements

• Developers: create accessible web apps.

• Layout engine: implement accessibility support for the platform.

• Platform: provide a means to expose that support to end-user tools.

Page 19: Achieving a Safe and Seamless User Experience Through Accessible Web Applications (Rome 2012 W3C Web&Automotive Workshop)

`

Applicable Standards and Existing Support

Page 20: Achieving a Safe and Seamless User Experience Through Accessible Web Applications (Rome 2012 W3C Web&Automotive Workshop)

Achieving a Safe and Seamless User Experience Through Accessible Web ApplicationsAlejandro Piñeiro | [email protected] | www.igalia.com/accessibility

20 For Web Application Developers

W3C Mobile Web Initiative

• Mobile Web Best Practiceshttp://www.w3.org/TR/mobile-bp

• Mobile Web Application Best Practiceshttp://www.w3.org/TR/mwabp

Page 21: Achieving a Safe and Seamless User Experience Through Accessible Web Applications (Rome 2012 W3C Web&Automotive Workshop)

Achieving a Safe and Seamless User Experience Through Accessible Web ApplicationsAlejandro Piñeiro | [email protected] | www.igalia.com/accessibility

21 For Web Application Developers

W3C Web Accessibility Initiative

• Mobile Accessibility Overviewhttp://www.w3.org/WAI/mobile/Overview.html

• Web Content Accessibility Guidelineshttp://www.w3.org/TR/WCAG20

• Accessible Rich Internet Applications (ARIA)http://www.w3.org/TR/wai-aria

Page 22: Achieving a Safe and Seamless User Experience Through Accessible Web Applications (Rome 2012 W3C Web&Automotive Workshop)

22

Achieving a Safe and Seamless User Experience Through Accessible Web ApplicationsAlejandro Piñeiro | [email protected] | www.igalia.com/accessibility

W3C HTML Speech Incubator Group

• Speech Input API Specificationhttp://lists.w3.org/Archives/Public/public-xg-htmlspeech/2011Feb/att-0020/api-draft.html

• HTML Text to Speech (TTS) API Specificationhttp://lists.w3.org/Archives/Public/public-xg-htmlspeech/2011Feb/att-0022/htmltts-draft.html

• Speech JavaScript API Specificationhttp://lists.w3.org/Archives/Public/public-webapps/2011OctDec/att-1696/speechapi.html

• Final Reporthttp://www.w3.org/2005/Incubator/htmlspeech/XGR-htmlspeech/

For Web Application Developers

Page 23: Achieving a Safe and Seamless User Experience Through Accessible Web Applications (Rome 2012 W3C Web&Automotive Workshop)

Achieving a Safe and Seamless User Experience Through Accessible Web ApplicationsAlejandro Piñeiro | [email protected] | www.igalia.com/accessibility

23 Layout Engines Supporting ARIA

● Trident● WebKit● Gecko● Presto

Page 24: Achieving a Safe and Seamless User Experience Through Accessible Web Applications (Rome 2012 W3C Web&Automotive Workshop)

Achieving a Safe and Seamless User Experience Through Accessible Web ApplicationsAlejandro Piñeiro | [email protected] | www.igalia.com/accessibility

24 Choosing One

● Trident● WebKit● Gecko● Presto

Page 25: Achieving a Safe and Seamless User Experience Through Accessible Web Applications (Rome 2012 W3C Web&Automotive Workshop)

Achieving a Safe and Seamless User Experience Through Accessible Web ApplicationsAlejandro Piñeiro | [email protected] | www.igalia.com/accessibility

25 WebKit: Free as in Freedom● Primarily BSD-style and LGPL licenses

● http://svn.webkit.org/repository/webkit/trunk

Page 26: Achieving a Safe and Seamless User Experience Through Accessible Web Applications (Rome 2012 W3C Web&Automotive Workshop)

Achieving a Safe and Seamless User Experience Through Accessible Web ApplicationsAlejandro Piñeiro | [email protected] | www.igalia.com/accessibility

26 WebKit: Embedded-Friendly● Desktop (Safari, Chromium, Epiphany, etc.)● iPhone, iPad, iPod Touch● Android● Palm Pre● Amazon Kindle● Others

Page 27: Achieving a Safe and Seamless User Experience Through Accessible Web Applications (Rome 2012 W3C Web&Automotive Workshop)

Achieving a Safe and Seamless User Experience Through Accessible Web ApplicationsAlejandro Piñeiro | [email protected] | www.igalia.com/accessibility

27 WebKit: Developer Community

Chromium Apple WebKit Google Igalia Gmail Nokia OpenBossa Samsung RIM Others0

1000

2000

3000

4000

5000

6000

7000

8000

90008151

6099

5083

20261465

924 749375 315 313

1104

Commits Per Affiliation in 2011

Page 28: Achieving a Safe and Seamless User Experience Through Accessible Web Applications (Rome 2012 W3C Web&Automotive Workshop)

Achieving a Safe and Seamless User Experience Through Accessible Web ApplicationsAlejandro Piñeiro | [email protected] | www.igalia.com/accessibility

28 WebKit: Accessibility

• Mature, platform-independent core support

• Adaptations from WebCore to platform, e.g.:

–Macintosh

– Chromium

–GTK

– EFL

–Qt

–Win

Page 29: Achieving a Safe and Seamless User Experience Through Accessible Web Applications (Rome 2012 W3C Web&Automotive Workshop)

Achieving a Safe and Seamless User Experience Through Accessible Web ApplicationsAlejandro Piñeiro | [email protected] | www.igalia.com/accessibility

29

“The mission of the Indie UI Working Group ... is to develop event models for Application Programming Interfaces (APIs) that facilitate interaction in Web applications that are input method independent, and hence accessible to people with disabilities.”

W3C Web Accessibility Initiative

The Indie UI Working Group

Page 30: Achieving a Safe and Seamless User Experience Through Accessible Web Applications (Rome 2012 W3C Web&Automotive Workshop)

30

Achieving a Safe and Seamless User Experience Through Accessible Web ApplicationsAlejandro Piñeiro | [email protected] | www.igalia.com/accessibility

Indie UI Working Group Members:

● Access Co, LTD

● Apple

● Google

● IBM

● Institut Telecom

● Nokia

● Opera

● Univ. Catholique de Louvain

● Univ. of Manchester

● Invited (accessibility) experts

Representation from the Automotive Industry?http://www.w3.org/WAI/IndieUI/participation

Page 31: Achieving a Safe and Seamless User Experience Through Accessible Web Applications (Rome 2012 W3C Web&Automotive Workshop)

Achieving a Safe and Seamless User Experience Through Accessible Web ApplicationsAlejandro Piñeiro | [email protected] | www.igalia.com/accessibility

31 Summary● In-vehicle device applications can be used more

safely via alternative input and/or output.

● The alternatives are quite similar to, and may even be thought of as, assistive technologies.

● Accessibility APIs and standards for accessible web applications are established and being used.

● The automotive industry should evaluate this solution.

Page 32: Achieving a Safe and Seamless User Experience Through Accessible Web Applications (Rome 2012 W3C Web&Automotive Workshop)

Questions?