When I completed the first round of my HTML 5 redesign, some validation errors remained.
Most were due to WAI-ARIA roles being applied to new HTML 5 structural elements, which isn’t currently allowed (both specs are in draft, remmeber). I’m not worried about those; accessibility trumps validity for me, and ARIA doesn’t validate in HTML 4, either.
However, none of the embedded Flash movies from YouTube would validate. I was using the default code given by YouTube which nests an
embed tag inside an
object tag and which doesn’t validate in current flavours of (X)HTML because
embed was never in any spec.
Fearphage suggested using just the
object tag for the Flash movies, but Patrick Lauke pointed out that there are some problems with that approach:
- Internet Explorer can’t stream videos but must download the full movie before showing it
- screenreaders can’t access accessibility information within the Flash movie (admittedly not likely to be a problem with most YouTube uploads)
One of the HTML 5 design principles is to “pave the cowpaths”. Because everybody uses
embed, it’s been added to the spec. So by rearranging some of YouTube’s suggested code (self-closing
param elements, escaping ampersands in URLs and repeating the URL for a third time as a
data attribute on the
object element) I came up with an accessible-as-possible, cross-browser, valid HTML 5 way to embed Flash movies:
<object width="425" height="344" data="http://www.youtube.com/v/8-pFwbHMuwA&hl=en&fs=1">
<param name="movie" value="http://www.youtube.com/v/8-pFwbHMuwA&hl=en&fs=1" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed src="http://www.youtube.com/v/8-pFwbHMuwA&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344" />
What we need now is for some kind soul to write a wizard that converts YouTube’s default code into code formatted as above.
It’s with some irony that I write this post, because one of the exciting things about HTML 5 is the
video element that allows video to be added to a page with a simple
<video src="blah.src" controls>I'm fallback content</video> and then plays it without any plugins or scripting. It allows an open, patent-free video codec to interact with
canvas and SVG and it doesn’t require duplication of data twice or three times like the code contortions above.
Unfortunately it’s usefulness is mired in politics—see David Storey’s The future of video on the Web.
I’m too lazy to amend every instance from the last five years, but my home page is now valid apart from ARIA roles and an objection to the
feed: protocol on a link to my RSS feed.
Thanks Patrick and fearphage.