Taking Accessibility
to the Next Dimension:
Thoughts About
Canvas 3D
@kliehm
HTML WG & HTML Accessibility Task Force.
http://www.bluishcoder.co.nz/2008/09/javascript-space-invaders-emulator.html
http://flickr.com/photos/tais/2411643409/http://flickr.com/photos/energeticspell/2332820792/
https://bespin.mozillalabs.com
<canvas id="canvas" width="500" height="350">
<img src="fallback.jpg" width="500"
height="350" alt="Pulp Fiction Minifigs"...
• fallback: shadow DOM
• always exposed to AT
• keyboard accessible
• focus ring in canvas
• caret position
http://blog.largeanimal.com/demo/
http://www.youtube.com/watch?v=uofWfXOzX-g
http://code.google.com/apis/o3d/
http://blog....
http://flic.kr/p/3XZgXW
• audio cues
• earcons
• sound radar
• tactile feedback
• speech synthesis
• hardware acceleration
http://goo.gl/olWUL
• user generated content
• 40% of objects in SL
don‘t have alt text
• summarize objects
• filter nearby objects
• screen-r...
http://blog.largeanimal.com/demo/
http://www.youtube.com/watch?v=uofWfXOzX-g
http://code.google.com/apis/o3d/
http://www.s...
Bolt-on
accessibility
http://flic.kr/p/8H1Q
Inclusive design
http://flic.kr/p/55Sh6D
http://flic.kr/p/8W93u
Thanks.
twitter: @kliehm
Slides: http://slidesha.re/a0QuR2
Contact: http://klie.hm/profile
Accessibility in Canvas 3D
Accessibility in Canvas 3D
Accessibility in Canvas 3D
Accessibility in Canvas 3D
Accessibility in Canvas 3D
Upcoming SlideShare
Loading in …5
×

Accessibility in Canvas 3D

1,743 views

Published on

My presentation at W3C TPAC 2010

Published in: Education, Design, Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
1,743
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
9
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide
  • Originally people thought canvas was just about painting boring images on a bitmap...
  • ... or for adding wet floor effects for photos.
  • Then people started getting creative, for example in this emulator written in JavaScript for the original Space Invaders engine that you can now play in your browser.
  • The lesson learned: given the tools people will do anything with a canvas!
  • Like building a rich text editor in canvas: Bespin was published by Mozilla and is now part of the Jetpack code editor.
  • Therefore it is important that there is fallback content.
  • Fallback content, aka. “the shadow DOM,” is always exposed to assistive technologies, unlike other fallback content that’s only displayed if the browser doesn’t support the element. Shadow DOM elements must be keyboard accessible, and the corresponding part of the bitmap must be highlighted with a focus ring, probably a caret position as well in the case of editable content.
  • In a 3D context one of the strongest use cases is in games. This is a demo of the 3D jump & run game “Infinite Journey” created in WebGL that runs in your browser (if you are lucky enough to have the right chipset).
  • In games the interaction is limited to a small number of objects, mainly player and non-player characters as well as items. They are in control of players or the game vendors and are well defined.
  • However, the main challenge in games is reaction time. Games for blind people feature several mechanics to support this, like audio cues, “earcons” (similar to icons), a sound radar to spot enemies and friends, sometimes tactile feedback is used (vibration) to identify objects, and there is speech synthesis for announcing the names of objects. There is a problem with hardware acceleration because it goes directly to the GPU, bypassing the accessibility API.
  • In 3D social worlds like Second Life the challenges are different.
  • There is user generated content. A lot of it! About 40% of the objects don’t have alternative or descriptive texts, on some islands as high as 85%. To prevent clutter, users get summaries of the number of people and objects present. Also only objects within a 10-20 meter range are announced. Screen-reader support is crucial because users heavily customize their software.
  • Eelke Folmer did a lot of research on the topic of accessibility in 3D worlds. Also IBM published games for blind and vision impaired people. I’d like to encourage you to contact them.
  • But it doesn’t stop at games and social worlds. For example there are medical applications. A CT scan of a hand has about 20-30 MB, a full body scan about 700 MB. I can imagine tools to process this information in the browser.
  • And of course architects use 3D models, among others.
  • Therefore my plea would be to reach out to the Khronos Working Group and vice versa.
  • Because bolt-on accessibility is ugly,
  • Whereas inclusive, integrated accessibility is beautiful …
  • … and good for your health.
  • Accessibility in Canvas 3D

    1. 1. Taking Accessibility to the Next Dimension: Thoughts About Canvas 3D @kliehm HTML WG & HTML Accessibility Task Force.
    2. 2. http://www.bluishcoder.co.nz/2008/09/javascript-space-invaders-emulator.html
    3. 3. http://flickr.com/photos/tais/2411643409/http://flickr.com/photos/energeticspell/2332820792/
    4. 4. https://bespin.mozillalabs.com
    5. 5. <canvas id="canvas" width="500" height="350"> <img src="fallback.jpg" width="500" height="350" alt="Pulp Fiction Minifigs"/> </canvas> http://www.flickr.com/photos/minifig/72091618/
    6. 6. • fallback: shadow DOM • always exposed to AT • keyboard accessible • focus ring in canvas • caret position
    7. 7. http://blog.largeanimal.com/demo/ http://www.youtube.com/watch?v=uofWfXOzX-g http://code.google.com/apis/o3d/ http://blog.largeanimal.com/
    8. 8. http://flic.kr/p/3XZgXW
    9. 9. • audio cues • earcons • sound radar • tactile feedback • speech synthesis • hardware acceleration
    10. 10. http://goo.gl/olWUL
    11. 11. • user generated content • 40% of objects in SL don‘t have alt text • summarize objects • filter nearby objects • screen-reader support
    12. 12. http://blog.largeanimal.com/demo/ http://www.youtube.com/watch?v=uofWfXOzX-g http://code.google.com/apis/o3d/ http://www.sci.utah.edu/cibc/software/41-imagevis3d.html
    13. 13. Bolt-on accessibility http://flic.kr/p/8H1Q
    14. 14. Inclusive design http://flic.kr/p/55Sh6D
    15. 15. http://flic.kr/p/8W93u
    16. 16. Thanks. twitter: @kliehm Slides: http://slidesha.re/a0QuR2 Contact: http://klie.hm/profile

    ×