SlideShare a Scribd company logo
Taking Accessibility
to the Next Dimension:
Thoughts About
Canvas 3D
@kliehm
HTML WG & HTML Accessibility Task Force.
Accessibility in Canvas 3D
Accessibility in Canvas 3D
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"/>
</canvas>
http://www.flickr.com/photos/minifig/72091618/
• 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.largeanimal.com/
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-reader support
Accessibility in Canvas 3D
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
Accessibility in Canvas 3D
Accessibility in Canvas 3D
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

More Related Content

PPT
Standards.Next: Canvas
PPTX
Managing Responsive Design Projects
PDF
Virtually Anyone
PDF
Track layout designer on an html5 canvas
PPTX
Hacking Reality: Browser-Based VR with HTML5
PDF
Inkscape: Mockup that site (BADcamp edition)
PDF
HTML5 for Web Designers
PDF
PPT presentation tools
Standards.Next: Canvas
Managing Responsive Design Projects
Virtually Anyone
Track layout designer on an html5 canvas
Hacking Reality: Browser-Based VR with HTML5
Inkscape: Mockup that site (BADcamp edition)
HTML5 for Web Designers
PPT presentation tools

What's hot (10)

PPTX
DOCX
KEY
CSS3: stay tuned for style
PPTX
Build your own RasPiTV with Node.js & Socket.io
PDF
Advanced Web Graphics with Canvas
PDF
TechEvent BASTA von WPF nach Angular in 60 Minuten
PDF
Real-time collaborative drawing
PDF
Campus party - react native
PDF
Digital Chicken
CSS3: stay tuned for style
Build your own RasPiTV with Node.js & Socket.io
Advanced Web Graphics with Canvas
TechEvent BASTA von WPF nach Angular in 60 Minuten
Real-time collaborative drawing
Campus party - react native
Digital Chicken
Ad

More from Martin Kliehm (10)

PDF
Open City Data & Open Culture Data
PDF
Kommunale Arbeit der ELF Piraten Fraktion Frankfurt
PPTX
Web Performance Optimierung (WPO)
PPTX
P2PU Web Accessibility Lesson 1: Setting Motivation
PPTX
Webmontag Frankfurt: Jugendliche mit selbstgebauten Flammenwerfern
PPTX
Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren.
PPTX
Performance. Webmontag. Frankfurt.
PPT
ARIA und HTML 5
PPT
PPT
Das Canvas-Element in HTML5
Open City Data & Open Culture Data
Kommunale Arbeit der ELF Piraten Fraktion Frankfurt
Web Performance Optimierung (WPO)
P2PU Web Accessibility Lesson 1: Setting Motivation
Webmontag Frankfurt: Jugendliche mit selbstgebauten Flammenwerfern
Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren.
Performance. Webmontag. Frankfurt.
ARIA und HTML 5
Das Canvas-Element in HTML5
Ad

Recently uploaded (20)

PPTX
Renaissance Architecture: A Journey from Faith to Humanism
PDF
2.FourierTransform-ShortQuestionswithAnswers.pdf
PDF
Microbial disease of the cardiovascular and lymphatic systems
PDF
Chapter 2 Heredity, Prenatal Development, and Birth.pdf
PDF
Pre independence Education in Inndia.pdf
PDF
Sports Quiz easy sports quiz sports quiz
PDF
Saundersa Comprehensive Review for the NCLEX-RN Examination.pdf
PPTX
Microbial diseases, their pathogenesis and prophylaxis
PDF
Supply Chain Operations Speaking Notes -ICLT Program
PDF
Anesthesia in Laparoscopic Surgery in India
PDF
3rd Neelam Sanjeevareddy Memorial Lecture.pdf
PDF
VCE English Exam - Section C Student Revision Booklet
PDF
102 student loan defaulters named and shamed – Is someone you know on the list?
PDF
STATICS OF THE RIGID BODIES Hibbelers.pdf
PPTX
human mycosis Human fungal infections are called human mycosis..pptx
PDF
Complications of Minimal Access Surgery at WLH
PPTX
PPT- ENG7_QUARTER1_LESSON1_WEEK1. IMAGERY -DESCRIPTIONS pptx.pptx
PPTX
master seminar digital applications in india
PDF
Computing-Curriculum for Schools in Ghana
PDF
FourierSeries-QuestionsWithAnswers(Part-A).pdf
Renaissance Architecture: A Journey from Faith to Humanism
2.FourierTransform-ShortQuestionswithAnswers.pdf
Microbial disease of the cardiovascular and lymphatic systems
Chapter 2 Heredity, Prenatal Development, and Birth.pdf
Pre independence Education in Inndia.pdf
Sports Quiz easy sports quiz sports quiz
Saundersa Comprehensive Review for the NCLEX-RN Examination.pdf
Microbial diseases, their pathogenesis and prophylaxis
Supply Chain Operations Speaking Notes -ICLT Program
Anesthesia in Laparoscopic Surgery in India
3rd Neelam Sanjeevareddy Memorial Lecture.pdf
VCE English Exam - Section C Student Revision Booklet
102 student loan defaulters named and shamed – Is someone you know on the list?
STATICS OF THE RIGID BODIES Hibbelers.pdf
human mycosis Human fungal infections are called human mycosis..pptx
Complications of Minimal Access Surgery at WLH
PPT- ENG7_QUARTER1_LESSON1_WEEK1. IMAGERY -DESCRIPTIONS pptx.pptx
master seminar digital applications in india
Computing-Curriculum for Schools in Ghana
FourierSeries-QuestionsWithAnswers(Part-A).pdf

Accessibility in Canvas 3D

Editor's Notes

  • #3: Originally people thought canvas was just about painting boring images on a bitmap...
  • #4: ... or for adding wet floor effects for photos.
  • #5: 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.
  • #6: The lesson learned: given the tools people will do anything with a canvas!
  • #7: Like building a rich text editor in canvas: Bespin was published by Mozilla and is now part of the Jetpack code editor.
  • #8: Therefore it is important that there is fallback content.
  • #9: 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.
  • #10: 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).
  • #11: 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.
  • #12: 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.
  • #13: In 3D social worlds like Second Life the challenges are different.
  • #14: 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.
  • #15: 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.
  • #16: 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.
  • #17: And of course architects use 3D models, among others.
  • #18: Therefore my plea would be to reach out to the Khronos Working Group and vice versa.
  • #19: Because bolt-on accessibility is ugly,
  • #20: Whereas inclusive, integrated accessibility is beautiful …
  • #21: … and good for your health.