Accessibility & WebGLUrban Škudnik

urban.skudnik@gmail.com, @urbanskudnik

Before you get all hyped...

http://tvtropes.org/pmwiki/pmwiki.php/Main/ThinkOfTheChildren

Everything is only your good will.

Accessibility

The State of H5

The good

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

WAI - ARIA

How does that look?<spantabindex="0"role="checkbox"aria-checked="true"onkeydown="return checkBoxEvent(event);"

onclick="return checkBoxEvent(event);">Label</span>

The best thing?

• Dojo - mature

• YUI

• GWT - partial

• jQuery UI - fully compliant by 2.0

Landmarks

• role =

• navigation

• complementary

• main

• form

The bad sadly-must-accept

• FF 4 & IE9 - 31 fully, 2 partially, one unsupported

• Chrome - 2 partially

http://www.html5accessibility.com/index-aria.html

Live updates

Benefits

http://www.flickr.com/photos/prairiefireimaging/4212859050/

WebGL

There’s always Flash...

...but surely we can do better!

What we have...• Bitmap (Canvas)

• Vector (SVG)

• OpenGL (Canvas)

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

WebGL

• Not very weby - OpenGL ES

• Low level API

• Hard without libraries

• No installation

• Rapid prototyping

Just how hard?

We are dealing with OpenGL, after all!

But we adopted libraries for JS too!

Warchest

• X3DOM

• GLGE

GLGE

• Blender-to-WebGL

X3DOM<x3d width="500px" height="400px"><scene>

<shape><appearance>

<material diffuseColor='red'></material></appearance>

<box></box> </shape> </scene></x3d>