Subscribe to RSS feed

Posts tagged with "audio"

HTML5 multimedia accessibility at DevCSI Accessibility Hack Day

, , , ...

Fate took me five miles up the road to Aston University for a DevCSI Accessibility Hack Day where I spoke on HTML5 multimedia accessibility. Here are my slides: Some resources

After an evening hacking, Scott Wilson put together a webVTT generator W3C Widget. Download it, double click to install (on a system with Opera Desktop or similar Widget manager and run-time installed). Point it at a video, then simply pause the video after a "screenful" of dialogue, enter that subtitle, unpause, rinse and repeat, then hit the VTT tab and copy and paste your VTT file.

Autoplay, go away!

, , , ...

HTML5 has an autoplay attribute on the audio and video elements. Ostensibly, this is a problem for those who work in shared offices and who aren’t expecting sound to blare out when following a link, and would be a huge problem for people who rely on sound for understanding the Web, such as those using a screenreader, because the sound in a video would drown out all other content on the page.

Paradoxically, however, this could be good for accessibility. Simon Pieters points out

Removing the attribute will not make pages stop autoplaying video. Instead they will use script to make videos autoplay, and then it becomes harder for the user to prevent videos from autoplaying. (You could have a pref in the UA to disable autoplay.)

The idea is that a simple attribute is easier to write than scripts that force autoplay, and therefore content providers will use it. It's also much easier to write user scripts that block the autoplay attribute. Until Opera has a "never autoplay media" option in the configuration settings (soon!), you may wish to use this tiny Opera Extension Autoplay, Go Away! by Daniel Davis, Philip Jägenstedt, Bruce Lawson and Simon Pieters.

Why so many authors? Because it wasn't completely simple to write. Originally, Bruce had written


var els = document.querySelectorAll('video, audio');
for (var i= els.length - 1; i >= 0; i--)  {
	els.removeAttribute('autoplay');
	els.setAttribute('title', 'right-click to start media');
}

This simply loops through all media elements, removing the autoplay attribute if present, and adding an informative title. It worked perfectly on a test page in which linked to media stored locally, but failed on a test page that calls in media across the network.

Of all the HTML5 APIs, the media events are the subtlest and hardest to grasp to people not as brainy as Philip and Simon, with whom I consulted, who came up with the code that powers the extension:


window.addEventListener('loadstart', function(e) 
        {e.target.removeAttribute('autoplay') }, true);

which works pretty well on Mac and Linux, with some unduplicatable weirdnesses on Windows. It doesn't work for elements not in the document or for scripts that do play().

Anyway, please do any virus checking you feel you need to do (this isn't an official Opera extension) and download Autoplay, Go Away! beta 1.

And I'm available for freelance icon design, too.

Beta 2

I got some useful feedback from John Foliot who said

[the] title [attribute] is affected by the verbosity settings in screen readers, with the net result that for most power users of screen reader technology, the value of title is not read aloud more often than not … title should not be used to convey mission critical information, as many screen readers will miss it.

When planning how to do this, I had previously not used title, but instead had added the controls attribute but backed that out because it would disrupt the lovely design of someone's custom video player. But if they're so rude as to force autoplaying media, who cares about their design? So beta two dispenses with adding a title and adds controls instead.

Anyway, please do any virus checking you feel you need to do (this isn't an official Opera extension) and download Autoplay, Go Away! beta 2.

Schöne neue Welt von HTML5 - WebTech 2010 Mainz

, , , ...

Für Frühaufsteher gab es heute Morgen an der WebTech 2010 hier in Mainz meinen Talk Schöne neue Welt von HTML5 – ein schneller Überblick zur Geschichte von HTML5, neue Syntax and Semantik, Formulare und natürlich die multimedialen "Fonzie-features" video, audio und canvas.

Und hier die Beispielseiten, die ich kurz vorgeführt habe:

Formulare

video

canvas