SlideShare ist ein Scribd-Unternehmen logo
1 von 21
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"/>
</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
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
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

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (10)

WebVR
WebVRWebVR
WebVR
 
Html1
Html1Html1
Html1
 
CSS3: stay tuned for style
CSS3: stay tuned for styleCSS3: stay tuned for style
CSS3: stay tuned for style
 
Build your own RasPiTV with Node.js & Socket.io
Build your own RasPiTV with Node.js & Socket.ioBuild your own RasPiTV with Node.js & Socket.io
Build your own RasPiTV with Node.js & Socket.io
 
Advanced Web Graphics with Canvas
Advanced Web Graphics with CanvasAdvanced Web Graphics with Canvas
Advanced Web Graphics with Canvas
 
Node
NodeNode
Node
 
TechEvent BASTA von WPF nach Angular in 60 Minuten
TechEvent BASTA von WPF nach Angular in 60 MinutenTechEvent BASTA von WPF nach Angular in 60 Minuten
TechEvent BASTA von WPF nach Angular in 60 Minuten
 
Real-time collaborative drawing
Real-time collaborative drawingReal-time collaborative drawing
Real-time collaborative drawing
 
Campus party - react native
Campus party - react nativeCampus party - react native
Campus party - react native
 
Digital Chicken
Digital ChickenDigital Chicken
Digital Chicken
 

Ähnlich wie Accessibility in Canvas 3D

Interface Styling & Scripting on WebKit Mobile
Interface Styling & Scripting on WebKit MobileInterface Styling & Scripting on WebKit Mobile
Interface Styling & Scripting on WebKit Mobile
David Aurelio
 
Artdm170 Week4 Java Script Effects
Artdm170 Week4 Java Script EffectsArtdm170 Week4 Java Script Effects
Artdm170 Week4 Java Script Effects
Gilbert Guerrero
 
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web Design[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
The Web Becomes Graceful
The Web Becomes GracefulThe Web Becomes Graceful
The Web Becomes Graceful
colorhook
 
[A5]deview 2012 pt hds webkit_gpu
[A5]deview 2012 pt hds webkit_gpu[A5]deview 2012 pt hds webkit_gpu
[A5]deview 2012 pt hds webkit_gpu
NAVER D2
 
[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design
Christopher Schmitt
 

Ähnlich wie Accessibility in Canvas 3D (20)

HTML5 Hotness
HTML5 HotnessHTML5 Hotness
HTML5 Hotness
 
Web Components mit Polymer und AngularJS 1.x
Web Components mit Polymer und AngularJS 1.xWeb Components mit Polymer und AngularJS 1.x
Web Components mit Polymer und AngularJS 1.x
 
Web Components mit Polymer und AngularJS 1.x
Web Components mit Polymer und AngularJS 1.xWeb Components mit Polymer und AngularJS 1.x
Web Components mit Polymer und AngularJS 1.x
 
Interface Styling & Scripting on WebKit Mobile
Interface Styling & Scripting on WebKit MobileInterface Styling & Scripting on WebKit Mobile
Interface Styling & Scripting on WebKit Mobile
 
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
 
Graph API - Facebook Developer Garage Taipei
Graph API - Facebook Developer Garage TaipeiGraph API - Facebook Developer Garage Taipei
Graph API - Facebook Developer Garage Taipei
 
Graph API - Facebook Developer Garage Taipei
Graph API - Facebook Developer Garage TaipeiGraph API - Facebook Developer Garage Taipei
Graph API - Facebook Developer Garage Taipei
 
Artdm170 Week4 Java Script Effects
Artdm170 Week4 Java Script EffectsArtdm170 Week4 Java Script Effects
Artdm170 Week4 Java Script Effects
 
Developing for Mobile
Developing for MobileDeveloping for Mobile
Developing for Mobile
 
What mean ye Storytelling?
What mean ye Storytelling?What mean ye Storytelling?
What mean ye Storytelling?
 
[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web Design[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web Design
 
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
 
This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existin...
This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existin...This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existin...
This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existin...
 
[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web Design[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web Design
 
The Web Becomes Graceful
The Web Becomes GracefulThe Web Becomes Graceful
The Web Becomes Graceful
 
[A5]deview 2012 pt hds webkit_gpu
[A5]deview 2012 pt hds webkit_gpu[A5]deview 2012 pt hds webkit_gpu
[A5]deview 2012 pt hds webkit_gpu
 
Tips for Creating & Maintaining a Successful Website
Tips for Creating & Maintaining a Successful WebsiteTips for Creating & Maintaining a Successful Website
Tips for Creating & Maintaining a Successful Website
 
Html5: something wicked this way comes - HackPra
Html5: something wicked this way comes - HackPraHtml5: something wicked this way comes - HackPra
Html5: something wicked this way comes - HackPra
 
[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design
 
A WebGL scene in 30 mins
A WebGL scene in 30 minsA WebGL scene in 30 mins
A WebGL scene in 30 mins
 

Mehr von Martin Kliehm

Mehr von Martin Kliehm (10)

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

Kürzlich hochgeladen

Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
ciinovamais
 
Gardella_Mateo_IntellectualProperty.pdf.
Gardella_Mateo_IntellectualProperty.pdf.Gardella_Mateo_IntellectualProperty.pdf.
Gardella_Mateo_IntellectualProperty.pdf.
MateoGardella
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
PECB
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
kauryashika82
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
QucHHunhnh
 

Kürzlich hochgeladen (20)

Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
 
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
 
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
 
Unit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptxUnit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptx
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activity
 
Gardella_Mateo_IntellectualProperty.pdf.
Gardella_Mateo_IntellectualProperty.pdf.Gardella_Mateo_IntellectualProperty.pdf.
Gardella_Mateo_IntellectualProperty.pdf.
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptxINDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
 
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
 

Accessibility in Canvas 3D

Hinweis der Redaktion

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