h5c3 meetup - accessibility & webgl
DESCRIPTION
Presentation on HTML5's accessibility support, what developers can do to enhance experience for people with disabilities, which problems ARIA solves and what kind of goodies are brought by WebGL.TRANSCRIPT
![Page 2: H5C3 meetup - Accessibility & WebGL](https://reader038.vdocuments.us/reader038/viewer/2022103115/556a266ed8b42a2f3f8b4dce/html5/thumbnails/2.jpg)
Before you get all hyped...
![Page 3: H5C3 meetup - Accessibility & WebGL](https://reader038.vdocuments.us/reader038/viewer/2022103115/556a266ed8b42a2f3f8b4dce/html5/thumbnails/3.jpg)
http://tvtropes.org/pmwiki/pmwiki.php/Main/ThinkOfTheChildren
![Page 4: H5C3 meetup - Accessibility & WebGL](https://reader038.vdocuments.us/reader038/viewer/2022103115/556a266ed8b42a2f3f8b4dce/html5/thumbnails/4.jpg)
Everything is only your good will.
![Page 5: H5C3 meetup - Accessibility & WebGL](https://reader038.vdocuments.us/reader038/viewer/2022103115/556a266ed8b42a2f3f8b4dce/html5/thumbnails/5.jpg)
Accessibility
![Page 6: H5C3 meetup - Accessibility & WebGL](https://reader038.vdocuments.us/reader038/viewer/2022103115/556a266ed8b42a2f3f8b4dce/html5/thumbnails/6.jpg)
The State of H5
![Page 7: H5C3 meetup - Accessibility & WebGL](https://reader038.vdocuments.us/reader038/viewer/2022103115/556a266ed8b42a2f3f8b4dce/html5/thumbnails/7.jpg)
The good
![Page 8: H5C3 meetup - Accessibility & WebGL](https://reader038.vdocuments.us/reader038/viewer/2022103115/556a266ed8b42a2f3f8b4dce/html5/thumbnails/8.jpg)
The bad
• FF4 (b6) - 6 elements, partial support for 4
• Opera 10.62 - 7 elements partially supported
• IE 9 - 3 partially supported
• Chrome - null.
www.html5accessibility.com
![Page 9: H5C3 meetup - Accessibility & WebGL](https://reader038.vdocuments.us/reader038/viewer/2022103115/556a266ed8b42a2f3f8b4dce/html5/thumbnails/9.jpg)
WAI - ARIA
![Page 10: H5C3 meetup - Accessibility & WebGL](https://reader038.vdocuments.us/reader038/viewer/2022103115/556a266ed8b42a2f3f8b4dce/html5/thumbnails/10.jpg)
How does that look?<spantabindex="0"role="checkbox"aria-checked="true"onkeydown="return checkBoxEvent(event);"
onclick="return checkBoxEvent(event);">Label</span>
![Page 11: H5C3 meetup - Accessibility & WebGL](https://reader038.vdocuments.us/reader038/viewer/2022103115/556a266ed8b42a2f3f8b4dce/html5/thumbnails/11.jpg)
The best thing?
• Dojo - mature
• YUI
• GWT - partial
• jQuery UI - fully compliant by 2.0
![Page 12: H5C3 meetup - Accessibility & WebGL](https://reader038.vdocuments.us/reader038/viewer/2022103115/556a266ed8b42a2f3f8b4dce/html5/thumbnails/12.jpg)
Landmarks
• role =
• navigation
• complementary
• main
• form
![Page 13: H5C3 meetup - Accessibility & WebGL](https://reader038.vdocuments.us/reader038/viewer/2022103115/556a266ed8b42a2f3f8b4dce/html5/thumbnails/13.jpg)
The bad sadly-must-accept
• FF 4 & IE9 - 31 fully, 2 partially, one unsupported
• Chrome - 2 partially
http://www.html5accessibility.com/index-aria.html
![Page 14: H5C3 meetup - Accessibility & WebGL](https://reader038.vdocuments.us/reader038/viewer/2022103115/556a266ed8b42a2f3f8b4dce/html5/thumbnails/14.jpg)
Live updates
![Page 15: H5C3 meetup - Accessibility & WebGL](https://reader038.vdocuments.us/reader038/viewer/2022103115/556a266ed8b42a2f3f8b4dce/html5/thumbnails/15.jpg)
Benefits
http://www.flickr.com/photos/prairiefireimaging/4212859050/
![Page 16: H5C3 meetup - Accessibility & WebGL](https://reader038.vdocuments.us/reader038/viewer/2022103115/556a266ed8b42a2f3f8b4dce/html5/thumbnails/16.jpg)
WebGL
![Page 17: H5C3 meetup - Accessibility & WebGL](https://reader038.vdocuments.us/reader038/viewer/2022103115/556a266ed8b42a2f3f8b4dce/html5/thumbnails/17.jpg)
There’s always Flash...
![Page 18: H5C3 meetup - Accessibility & WebGL](https://reader038.vdocuments.us/reader038/viewer/2022103115/556a266ed8b42a2f3f8b4dce/html5/thumbnails/18.jpg)
...but surely we can do better!
![Page 19: H5C3 meetup - Accessibility & WebGL](https://reader038.vdocuments.us/reader038/viewer/2022103115/556a266ed8b42a2f3f8b4dce/html5/thumbnails/19.jpg)
What we have...• Bitmap (Canvas)
• Vector (SVG)
• OpenGL (Canvas)
![Page 20: H5C3 meetup - Accessibility & WebGL](https://reader038.vdocuments.us/reader038/viewer/2022103115/556a266ed8b42a2f3f8b4dce/html5/thumbnails/20.jpg)
Right tool for the right job
• DOM
• Shapes
• Event handling - easy
• Single HTML element, rendering
• Pixels
• Event handling - hard
• Have to rely on internal buffer
SVG Canvas
![Page 21: H5C3 meetup - Accessibility & WebGL](https://reader038.vdocuments.us/reader038/viewer/2022103115/556a266ed8b42a2f3f8b4dce/html5/thumbnails/21.jpg)
WebGL
• Not very weby - OpenGL ES
• Low level API
• Hard without libraries
• No installation
• Rapid prototyping
![Page 22: H5C3 meetup - Accessibility & WebGL](https://reader038.vdocuments.us/reader038/viewer/2022103115/556a266ed8b42a2f3f8b4dce/html5/thumbnails/22.jpg)
Just how hard?
![Page 23: H5C3 meetup - Accessibility & WebGL](https://reader038.vdocuments.us/reader038/viewer/2022103115/556a266ed8b42a2f3f8b4dce/html5/thumbnails/23.jpg)
We are dealing with OpenGL, after all!
![Page 24: H5C3 meetup - Accessibility & WebGL](https://reader038.vdocuments.us/reader038/viewer/2022103115/556a266ed8b42a2f3f8b4dce/html5/thumbnails/24.jpg)
But we adopted libraries for JS too!
![Page 25: H5C3 meetup - Accessibility & WebGL](https://reader038.vdocuments.us/reader038/viewer/2022103115/556a266ed8b42a2f3f8b4dce/html5/thumbnails/25.jpg)
Warchest
• X3DOM
• GLGE
![Page 26: H5C3 meetup - Accessibility & WebGL](https://reader038.vdocuments.us/reader038/viewer/2022103115/556a266ed8b42a2f3f8b4dce/html5/thumbnails/26.jpg)
GLGE
• Blender-to-WebGL
![Page 27: H5C3 meetup - Accessibility & WebGL](https://reader038.vdocuments.us/reader038/viewer/2022103115/556a266ed8b42a2f3f8b4dce/html5/thumbnails/27.jpg)
X3DOM<x3d width="500px" height="400px"><scene>
<shape><appearance>
<material diffuseColor='red'></material></appearance>
<box></box> </shape> </scene></x3d>