Leave No One Behind with HTML5

@robertnyman

Mozilla is a global non-profit dedicated to putting you in control of your online experience and shaping the future of the Web for the public good

Accessibility

JAWS version 10 screen reader

NVDA 2010.1

VoiceOver on iPhone IOS4

<div id="demo-main" role="main"> <article id="demo-main-content"> <header> <hgroup> <h2>A title</h2> <h3>Subtitle to the above title</h3> </hgroup> </header> <p> Hello </p> </article> <aside id="demo-aside-content" role="complementary"> This is just a demo page to see HTML5 markup and WAI-ARIA landmark roles in action in a simple context </aside></div>

<header role="banner"> <h1>HTML5 example <a href="http://robertnyman.com/html5">- To: Information and samples for HTML5 and related APIs</a></h1> <p>This page has valid simple HTML5 markup with new elements complemented with WAI-ARIA landmark roles for accessibility</p></header>

<footer id="page-footer" role="contentinfo"> Created by <a href="http://robertnyman.com/">Robert Nyman</a></footer>

<aside aria-live="polite" aria-relevant="additions" aria-atomic="true"> Some sidebar content

</aside>

WAI-ARIA Authoring Practices 1.0

Live Regions

-

http://www.w3.org/WAI/PF/aria-practices/#LiveRegions

Video

<video controls src="myvideo.webm"></video>

<video controls> <source src="myvideo.mp4"></source> <source src="myvideo.webm"></source> <p>Hello, older web browser</p></video>

<video src="http://vid.ly/4w2g7d?content=video" controls></video>

must die!!!Not really

<video width="320" height="240" poster="poster.jpg" controls="controls"> <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 --> <source type="video/mp4" src="myvideo.mp4"> <!-- WebM/VP8 for Firefox4, Opera, and Chrome --> <source type="video/webm" src="myvideo.webm"> <!-- Ogg/Vorbis for older Firefox and Opera versions --> <source type="video/ogg" src="myvideo.ogv"> <!-- Flash fallback for non-HTML5 browsers without JavaScript --> <object width="320" height="240" type="application/x-shockwave-flash" data="flashmediaelement.swf"> <param name="movie" value="flashmediaelement.swf"> <param name="flashvars" value="controls=true&file=myvideo.mp4"> <!-- Image as a last resort --> <img src="myvideo.jpg" width="320" height="240" title="No video playback capabilities"> </object></video>

<video src="tribute.webm"> <track kind="subtitles" label="English" src="English.vtt" srclang="en" default></track> <track kind="subtitles" label="Croatian" src="Croatian.vtt" srclang="hr"></track></video>

<track kind="subtitles"><track kind="captions"><track kind="descriptions"><track kind="chapters"><track kind="metadata">

00:00:05.000 --> 00:00:11.500Play the best song in the world, or I'll eat your soul.

00:00:12.000 --> 00:00:14.000Well me and Kyle, we looked at each other, and we each said... "Okay."

Canvas

<canvas id="my-canvas" width="500" height="500"> I am canvas</canvas>

var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d");

context.fillStyle = "#f00";context.fillRect(0, 0, 100, 100);

context.fillRect(350, 50, 100, 100);

context.lineWidth = "10"; context.lineJoin = "round";

context.moveTo(50, 50);context.lineTo(200, 200);context.lineTo(100, 300);context.closePath();context.stroke();context.fill();

context.beginPath();context.strokeStyle = "#00f";context.arc(200, 400, 75, 0, Math.PI*2, false);

context.stroke();

pdf.js

History API

window.history.pushState(state, title, url);

var url = "http://robertnyman.com",title = "My blog",state = { address : url};

window.history.pushState(state, title, url);

Fullscreen

<button id="view-fullscreen">Fullscreen</button>

<script type="text/javascript">(function () { var viewFullScreen = document.getElementById("view-fullscreen"); if (viewFullScreen) { viewFullScreen.addEventListener("click", function () { var docElm = document.documentElement; if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } else if (docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } }, false); }})(); </script>

mozRequestFullScreenWithKeys?

html:-moz-full-screen { background: red;}

html:-webkit-full-screen { background: red;}

Camera

<input type="file" id="take-picture" accept="image/*">

takePicture.onchange = function (event) { // Get a reference to the taken picture or chosen file var files = event.target.files, file; if (files && files.length > 0) { file = files[0]; // Get window.URL object var URL = window.URL || window.webkitURL;

// Create ObjectURL var imgURL = URL.createObjectURL(file);

// Set img src to ObjectURL showPicture.src = imgURL;

// Revoke ObjectURL URL.revokeObjectURL(imgURL); }};

Pointer Lock API

var docElm = document.documentElement; // Requesting Pointer LockdocElm.requestPointerLock = elem.requestPointerLock || elem.mozRequestPointerLock || elem.webkitRequestPointerLock; docElm.requestPointerLock();

document.addEventListener("mousemove", function(e) { var movementX = e.movementX || e.mozMovementX || e.webkitMovementX || 0, movementY = e.movementY || e.mozMovementY || e.webkitMovementY || 0;

// Print the mouse movement delta values console.log("movementX=" + movementX, "movementY=" + movementY); }, false);

Polyfills

Polyfills

http://caniuse.com/

Boot to Gecko

https://github.com/mozilla-b2g/B2G

https://github.com/mozilla-b2g/gaia

WebAPI

Try new things

HTML5 -

The beauty of the Open Web

"So we saved the world together for a while, and that was lovely."

- Lost

Robert Nymanrobertnyman.com

@robertnyman