HTML5 Doctor » Accessibility

Video: the track element and webM codec

Bruce Lawson — Thu, 24 Jun 2010 13:45:42 +0000

There are a couple of interesting developments in the world of HTML5 multimedia that you’ll be interested in. The first is the new element (currently only in the WHAT-WG spec due to political stuff).

is a child of a or element that links to a timed track, or time-based data. The kind of data is set via a kind attribute, which can take values of subtitles, captions, descriptions, chapters or metadata, depending on the type of information you’re adding to your media. These point to a source file containing timed text that the browser will expose via some kind of user interface, if the visitor requires additional data.

This will allow for “write once, use everywhere” accessibility; anyone linking to that file with a or element that includes the element can access your information.

The file format is a new format called WebSRT, which competes with about 50 other timed formats, including some W3C formats (hence the omission of from the W3C spec).

Added 9 July 2010: Here’s a readable overview of the SRT format.

Given that the format itself isn’t fully specified yet, it will be a while until we see implementation in browsers. But it’s good to know that there will be an official way to add accessibility information to media. Until then, I have a JavaScript hack to take timed s out of an in-page transcript to superimpose over a video.

WebM video format

The big news of the last month is that Google open-sourced the VP8 video codec that it acquired when it took over On2 Technologies. When combined with the Vorbis audio codec (that Spotify uses) and wrapped in a subset of the Matroska container format, it’s collectively known as WebM.

All YouTube videos are being transcoded to WebM, and Adobe have also announced they will include it in their Flash player. It’s available in an Opera 10.60 beta, a Firefox testing build, and a Chromium dev channel. Even Microsoft have said that IE9 will support it if the codec is installed on the computer.

The VP8 video codec itself is high-quality (Google had said that Ogg Theora wasn’t good enough compression-to-quality for YouTube, but Theora was based on the VP3 precursor to VP8). It’s available for streaming too.

If you want to encode to WebM, you can try the Miro Video Converter utility. Although it doesn’t allow you to optimise settings, it’s very easy to use. As the codec becomes more widespread, expect to see many more tools for content creation, editing, and transcoding.

Once production versions of the browsers are available, you should encode your videos with WebM as the first option, Ogg for older versions of Opera, Firefox and Chrome, falling back to royalty-encumbered H.264 for Safari and links to downloads or a Flash player for legacy browsers:






Your browser does not support video; download the WebM, mp4 or Ogg video for off-line viewing.

If, however, you’re having problems with the iPad, put the MP4 version first in the element; apparently there’s a bug that causes the iPad only to see the first element.

It’s a long haul, and it’s not over yet, but and .webM show significant progress towards our goal of accessible, open, and royalty-free video playing natively in the browser.

Share and Save:

Video: the track element and webM codec originally appeared on HTML5 Doctor on June 24, 2010.

The time element (and microformats)

Bruce Lawson — Tue, 09 Feb 2010 14:49:14 +0000

Microformats are a way of adding extra semantic information to a webpage using HTML classes — information like an event’s date and time, a person’s phone number, an organisation’s email address, etc.

They aren’t a “standard” per se, but they are a widely adopted convention within the geek community. And since they use an agreed-upon set of class names, they are as compatible with HTML5 as they are with HTML4 or XHTML.

HTML5 offers one potential addition to the microformats arsenal. Because earlier versions of some microformats presented accessibility problems in the way they encoded dates and times (see an article called hAccessibility that I co-wrote with James Craig), HTML5 offers a new element for unambiguously encoding dates and times for machines while still displaying them in a human-readable way.

The format is very simple: 13 November 2009:

The time element represents either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset.

W3C specfication

You can have whatever you want between the tags, so:

13 November 2009
13^th November
Bruce's 21st birthday
8PM on my birthday
8PM on my birthday—in Tokyo

are all equally valid.

Note that the last example has an optional timezone offset (+09:00) too (thanks, Oli!). You can also use “Z” (e.g. 2010-11-13T20:00Z) to represent Universal Coordinated Time (UTC), which is the equivalent of the timezone +00:00. Finally if you don’t specify a timezone offset the time is “local time” (in this case England).

The fly in the ointment

The only trouble with is that the it must contain positive date on the Proleptic Gregorian calendar, meaning you can’t encode a date before the Christian Era. Neither can you encode imprecise dates such as “July 1904″. Microformats, however, aren’t subjected to this restriction and are often employed to mark up, for example, very old events on Wikipedia or imprecise dates on museum websites. It’s likely that authors will continue using the current, more flexible microformat patterns unless the restrictions on the element are lifted. (The HTML5 working group has been continually petitioned to remove their arbitrary restrictions and widen the scope of time, but with no success).

Perhaps because of this restriction, current microformat clients can’t consume microformats such as hCalendar if they’re coded to use . Stefan Schipor wrote to us saying, “The problem is that I need to parse the site with H2VX or any other similar thing for exporting. Sadly, H2VX doesn’t seem to read the datetime attribute in the elements. Nor does the FF add-on Tails. I tried the microformats IRC channel and the microformateers twitter account but I didn’t get any response. Do you know if there is any support for this? It would kill me to add elements just for it to work.”

Incorporating the `pubdate` attribute

This doesn’t mean that is an a waste of time, or that it’s more trouble than it’s worth (a white element, as it were). It has a great deal of scope outside microformats, too.

On my personal blog, I use it to mark up publication dates of articles. There is a boolean attribute pubdate specifically for this:


  
  My brilliant blogpost
  Published on 20 January 2010 in the Sexysocks category.
  
  I'm wearing sexy socks! Here's a picture.
  ...

The spec says:

The pubdate attribute is a boolean attribute. If specified, it indicates that the date and time given by the element is the publication date and time of the nearest ancestor article element, or, if the element has no ancestor article element, of the document as a whole.

You might be wondering why the pubdate attribute is needed at all. Why not just assume that any element in an

’s

is its publication date?

Consider this example:


  
  Come to my party on 1 March
  Published on 20 January 2010 in the Sexysocks category.
  
  I'm throwing a sexy socks party at Dr Naughty's Ladyboy Cabaret Roller-disco Bierkeller Pizza-parlour-a-gogo! Do come.
  ...

You’ll see that there are two dates within the

: the date of the actual party and the publication date of the article. The pubdate attribute is required to remove any ambiguity.

Where could time be used?

The uses of unambiguous dates in web pages aren’t hard to imagine. A browser could offer to add events to a user’s calendar. A Thai-localised browser could offer to transform Gregorian dates into Thai Buddhist era dates. Content aggregators can produce visual timelines of events.

Search engines can produce smarter search results. For example, in the recent heavy snow in the UK, I searched for school closures in my town and discovered my kids’ school was closed. After receiving a phone call from the school asking me where my kids were, I re-examined the webpage. In small print at the bottom of the page were the words "Published 5 January 2008". I expect that operators of search engines would rank more current pages more highly on searches connected with current events.

Share and Save:

The time element (and microformats) originally appeared on HTML5 Doctor on February 9, 2010.

Your Questions Answered #4

Richard Clark — Wed, 09 Dec 2009 08:52:14 +0000

Here we go with another post rounding up your HTML5 questions and sharing the answers with the world. We cover a wide range of topics this time, inlcluding ARIA, storage, offline capabilities, and document outlines, so read on to find the answers.

We also want to know what areas of HTML5 you’d like us to cover in future articles, so let us know!

Older browsers and XHTML

Brett Prichard asked:

If I were to use one of the new tags in HTML5, (i.e., or
) what would happen when the page is rendered by an older browser?

The other question I have is will there be an XHTML equivalent? XHTML 2.0 breaks off compatibility with HTMLs 1-4, but will it be compatible with HTML5? I prefer to code in XHTML.

Thank you for reading.

To answer your first question: nothing special. The content nested within the element is displayed. (In the case of video, the fallback content is shown.)

Regarding your second question, I wrote about the XHTML serialisation of HTML5 a while ago.

— Thanks, Bruce

ARIA

Joseph Chapman asked:

My colleagues and I wish to switch our doctype to the streamlined and implement several things we learnt from Jeremy Keith last Wednesday, primarily ARIA.

We know that support is good as long as we add an extra DTD, but we can’t find the appropriate doctype declaration to stick on the end of ...html> Any ideas? We are really keen to kick this off and use a new piece of technology that will help springboard our site to a new level of accessibility.

Any answers appreciated.

Thanks for your help.

It’s okay to add ARIA to HTML5 now without using a different doctype. I suggest you give this part of the spec a read.

I believe a task force has been created to more closely align ARIA to HTML5. We plan to cover ARIA more in a future post.

Hope this helps

— Rich

Attribute Minification

Nick Leon asked:

Hey there HTML5Doctor,

I consider myself a strong POSH developer. One of the requirements for valid XHTML is that “attribute minimization” is not allowed. HTML permits “attribute minimization”, where boolean attributes can have their value omitted entirely, e.g., . All XML attributes must have explicit quoted values, so in XML this would be written as .

I was wondering where HTML5 stands with attribute minimization. I noticed in some of your example code, you provided the minimized form of the attribute, e.g., . Is this valid in HTML5? Would this be the valid version for XHTML5:

?

Those are both valid HTML5 structures (however, controls=”1″ isn’t legal; you need to say controls=”controls”).

In HTML5, you can format attributes as you please. In XHTML5 (the XML serialisation), you need to obey the XML rules.

— Cheers, Bruce

Offline storage

Kevin Searle asked:

I’m having a hard time wrapping my head around the offline storage capabilities of the HTML 5 spec. Can you consider an “HTML 5 Offline Storage 101″ article?

Just to clarify, do you mean “storage” or “offline”? They’re two very different things.

Storage relates to variables, like cookie jars but a lot bigger.

Offline applications are about detecting connectivity and possibly running your app without a connection to the Web.

We (i.e., Remy) will be writing about both of these topics, but it’s useful to know which is more in demand than the other.

In the meantime, feel free to check out the demos I’ve written at HTML5 Demos (covering offline, storage, and web databases).

— Remy

Nav Title (in the document outline)

D Ross asked:

Working on my new site and checked it with the outliner. I’m getting an “untitled section” showing up because I don’t have a headline inside my “nav” element.

Is this correct? Do I really need to title my main nav?

If so, is adding an
or something similar with the words “main navigation” good enough? If so, is hiding it with display: none okay?

Thanks,

DRoss

Yes, “untitled section” is fine. I know it’s been suggested to the developer of the outliner that it should say “navigation” or something similar, but I’m not sure when or whether that will happen. (You’ll see the same thing with

too if there’s no heading nested directly beneath the element).

Thanks,

— Rich

The details element

Bart asked:

Hello Doctors!

I’d like to ask you a little help with understanding the “details” element.

As the W3 spec says: “The details element represents a disclosure widget from which the user can obtain additional information or controls”.

I’m not sure if I get it right, but I think I can use this element to put details about a post (such as date and time) and controls, including “answer”, “save” and “repost”.

Please tell me if I’m wrong.

Regards, Bart

PS. I love the HTML5doctor blog, it’s so important to explain how to use HTML5. Keep up the great work!

This question triggered a flurry of responses from several of us doctors, so we’ve added them all here for you.

Answer 1

The spec says

is not appropriate for footnotes, and you could argue that post details are footnotes. Also, the

element has the option to show or hide its content, which suggests to me that it’s not appropriate for the post details.

You could possibly use a

or a

for the post details, but I’m not clear on what you mean by “controls”.

For the date/time, you can use the element:

September 23rd, 2009

Other doctors might have other opinions, but I hope this helps.

— Tom

Answer 2

Just to follow up on Tom’s reply: the user viewing your content can control whether or not they see the details.

The

element is an interactive element that is collapsed by default, so that only the heading is visible. The heading should be marked up in a

element (if absent, it will read “Details”).

The control that the user agent should render (when fully supporting the

element) is a small triangular button to the left that, when clicked, toggles the visibility of the element’s contents.

If the

element should be open by default, it should have its open attribute set.

I would use

for any content that still allows the surrounding content to make sense while not necessarily needing to be seen. So in your example, I would put the metadata in the

, but not the “user controls” to reply, save, etc., since the user should always be able to see that they can perform these actions.

While the browser vendors haven’t implemented the interactive aspect of details, I, for one, will be emulating this using JavaScript.

I hope that helps (too!).

— Remy

Answer 3

You can also use pubdate as an attribute of :

September 23rd, 2009

pubdate is useful when you have two different times in the post. For example, for a future event:



Gig: Hixie and the Pixies, Jan 1st 2010, Royal Albert Hall
Published Sept 21, 2009

With Lachy on kazoo, Henri on Sousaphone, Pilgers on the triangle, and Hixie conducting

I feel a post about the element coming on…

— Bruce

More to come

That wraps up this round of questions! We’d like to know what areas of HTML5 you’d like us to cover in future articles, so leave a comment below or send us an e-mail.

Share and Save:

Your Questions Answered #4 originally appeared on HTML5 Doctor on December 9, 2009.

The section element

Bruce Lawson — Fri, 11 Sep 2009 12:38:17 +0000

We doctors are a bunch of chums using HTML5 and writing about how we do it. Apart from spurious requests for medical advice, the questions we receive most are about using the section element, and we realise that we’ve been using the section element incorrectly all this time.

Sorry.

What we’ve been doing wrong is using section to wrap content in order to style it, or to demarcate the main content area from the nav, header, footer etc. These are jobs for div, not section.

The section spec says

The section element represents a generic document or application section…The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.

section is a blob of content that you could store as an individual record in a database. It generally looks like this (and note that the heading goes inside the section element, not immediately before it):


Any level of heading
rest of the content

With very few exceptions, section should not be used if there is no natural heading for it. Check your work in the HTML 5 outiner tool. If you see any instances of “untitled section” that corresponds to a section, you’re probably doing it wrong. (It’s fine for a nav or aside element to be untitled, however).

Section is also the most generic of the sectioning elements. Make certain that you don’t really need an article, which is defined as

a composition that forms an independent part of a document, page, application, or site. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, an interactive widget, or any other independent item of content

What about main content?

In HTML 5 you can specifically mark up all the “secondary” content on a page such as navigation, branding, copyright notices, so it feels odd that you can’t specifically mark up the most important part of your page—the content.

But what would be the purpose of marking it up specifically, anyway? If you need to style it, use a div. An assistive technlogy like a screenreader can find the main content because it is the first thing inside a page that isn’t a header, nav or footer.

Rules of thumb for using `section`

Of course, there are always exceptions, but these should give useful guidance for 99% of cases:

Don’t use it just as hook for styling or scripting; that’s a div
Don’t use it if article, aside or nav is more appropriate
Don’t use it unless there is naturally a heading at the start of the section
The revised spec (as of 16 September) says:

Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.

As blogposts and comments are often syndicated (by being pulled into other blogs or being linked via twitter, reddit etc) they should be articles.

Thanks to Opera’s Lachlan Hunt for fact-checking this article. Please also note that we haven’t yet changed the WordPress theme to get rid of extra sections, so for now please do as we say and not as we do!

Share and Save:

The section element originally appeared on HTML5 Doctor on September 11, 2009.

Accessibility & Native Drag and Drop

Remy Sharp — Thu, 23 Jul 2009 13:30:32 +0000

A few days before my native drag and drop article came out Gez Lemon wrote about accessibility in drag and drop, and touched on HTML 5.

I then promised to look at implementing accessibility with native drag and drop, and here’s my findings.

ARIA Support

This was quite easy to add, though only by following Gez’s article. Since I already had events for drag start, I just needed to add drag end to clean up and remove the ARIA effects.

I added the following to the dragstart event:

addEvent(dragItems, 'dragstart', function (event) {
  // via ARIA say the element has been grabbed
  this.setAttribute('aria-grabbed', 'true');
  // code continues...

The added a new dropend event:

addEvent(dragItems, 'dragend', function (event) {
  // remove the ARIA grab attibute when we're not dragging
  this.setAttribute('aria-grabbed', 'false');
});

The effectAllowed and dropEffect combo was difficult to work out at first, though probably because I was playing with link and reference, whereas I should have been playing with move or copy. That said, a note about move and copy, move is a type of copy, with a clean up function to delete afterwards. Once I had this combo correct, the drop effects worked.

The changes required were to:

On drag: on all the drop targets add: setAttribute('aria-dropeffect', 'copy')
On drag: set the allowedEffect on the drag event: event.dataTransfer.effectAllowed = 'copy';
On drop: say what we’ll accept: event.dataTransfer.dropEffect = 'move';
On dragend: remove the drop effect from the drop targets: removeAttribute('aria-dropeffect')

The big problem for me was that I couldn’t truely test this.

Update: between the time I had finished my code and writing this article, NVDA (the Windows open source screenreader) announced that they recieved support from Yahoo!, and that ARIA drag and drop support is in their development roadmap.

The full working version of native drag and drop with ARIA support is available here: native drag and drop with ARIA support (source code)

Keyboard Support

Keyboard, sadly, is a whole different story.

I was able to replicate a lot of the keyboard features that Gez included in his demo. This included setting the tabIndex = 0 to allow the elements to tab to (superb trick by the way), included highlighting the drop targets as we drag.

However, the problem was: I wanted the user to be able to start the drag operation using the keyboard. Initially looking at the spec I couldn’t see that it was supposed to be supported (which it turns out, it is).

I started going down the path of using the keyboard to trigger drag events. I was able to replicate the drag event being triggered from the keyboard (like space starts the event), however, and this is a biggie, I couldn’t replicate the dataTransfer object. I tried faking it. I tried giving it nothing. I tried all kinds of random attempts to trick the browser in to giving me the object. It’s a no goer.

As it turns out, there is keyboard support written in to the spec (though in my personally opinion it’s not completely obvious to an author reading). The drag and drop operations should work like a copy and paste operation.

This is very clever, and I like it. Tab round to the dragable element, copy using the keyboard, which triggers the dragstart event, which I can then add classes to the drop targets, and make them tabbable. The user then tabs round to the drop targets, and pastes. This triggers the drop event and we’re all good.

No browsers support this keyboard event model.

I’ve raised bug for Mozilla and Webkit. They’ve both had comments on, and in both cases I’m not 100% sure what the comments mean, but speaking to the people involved via IRC, they’ve both said if it’s in the spec, it should be in the browser.

Let’s hope they do something about it. Now, how do I report a bug in IE…?!

Share and Save:

Accessibility & Native Drag and Drop originally appeared on HTML5 Doctor on July 23, 2009.

“Block-level” links in HTML5

Bruce Lawson — Mon, 13 Jul 2009 12:00:06 +0000

One new and exciting thing you can do in HTML 5 is wrap links round “block-level” elements.

Imagine you have a front page with lots of teasers for news articles, each of which leads to a page devoted to the full text of that article. Obviously, each story needs a heading and you’ll want an image too, and you’ll want them all clickable. In current mark-up you’ll probably have something like this:


Bruce Lawson voted sexiest man on Earth
A congress representing all the planet's women unanimously voted Bruce Lawson as sexiest man alive.
Read more

Note that you have three identical links (or two if, like the BBC News site, you assume your readers don’t need a “read more” link).

In HTML 5, you code it like this:



Bruce Lawson voted sexiest man on Earth
A congress representing all the planet's women unanimously voted Bruce Lawson as sexiest man alive.
Read more

Now the single link surrounds the whole teaser, removing duplication and creating a much wider hit area to click.

Two points to make about accessibility in passing: firstly, you don’t need to worry that each "read more" goes to a different destination (see WCAG 2) because the whole story is the link, so the link text is unique. Secondly, note that I’ve changed the alternate text on the image, as in the first instance the image is a link so I described its destination, whereas the second is just a picture so I describe the image itself—”gorgeous lovebundle”—and thereby give more information to a screenreader user.

Shiny, but not new

What’s also very interesting about this technique is that actually this isn’t new: you can do it now. XHTML 2 had a similar mechanism, which allowed href on any element Eric Meyer called for this to be adopted in HTML 5 but, of course, this isn’t backwardly compatible. One of his other solutions to the same problem was changing the rules for a, and my test page shows that it works now in all the browsers.

That’s one of the interesting things about HTML 5—it documents existing browser behaviour. As the browsers already handle wrapping links around block-level elements, and there is an obvious use-case, there was no reason to artificially keep the structure as invalid.

(One irony: Eric Meyer’s original use-case was to link all cells in a table row. This doesn’t work in HTML 5; you need script for that.)

Share and Save:

“Block-level” links in HTML5 originally appeared on HTML5 Doctor on July 13, 2009.

HTML5 Doctor » Accessibility

Video: the track element and webM codec

WebM video format

Related Posts:

The time element (and microformats)

The fly in the ointment

Incorporating the `pubdate` attribute

My brilliant blogpost

Come to my party on 1 March

Where could time be used?

Related Posts:

Your Questions Answered #4

Older browsers and XHTML

ARIA

Attribute Minification

Offline storage

Nav Title (in the document outline)

or something similar with the words “main navigation” good enough? If so, is hiding it with `display: none` okay?

Thanks,

DRoss

Answer 3

Gig: Hixie and the Pixies, Jan 1st 2010, Royal Albert Hall

More to come

Related Posts:

The section element

Any level of heading

What about main content?

Rules of thumb for using `section`

Related Posts:

Accessibility & Native Drag and Drop

ARIA Support

Keyboard Support

Related Posts:

“Block-level” links in HTML5

Bruce Lawson voted sexiest man on Earth

Bruce Lawson voted sexiest man on Earth

Shiny, but not new

Related Posts:

HTML5 Doctor » Accessibility

Video: the track element and webM codec

WebM video format

Related Posts:

The time element (and microformats)

The fly in the ointment

Incorporating the pubdate attribute

Your Questions Answered #4

Older browsers and XHTML

ARIA

Attribute Minification

Offline storage

Nav Title (in the document outline)

or something similar with the words “main navigation” good enough? If so, is hiding it with display: none okay? Thanks, DRoss

The section element

Any level of heading

What about main content?

Rules of thumb for using section

Related Posts:

Accessibility & Native Drag and Drop

ARIA Support

Keyboard Support

Related Posts:

“Block-level” links in HTML5

Bruce Lawson voted sexiest man on Earth

Bruce Lawson voted sexiest man on Earth

Shiny, but not new

Related Posts:

Incorporating the `pubdate` attribute

or something similar with the words “main navigation” good enough? If so, is hiding it with `display: none` okay?

Thanks,

DRoss

Rules of thumb for using `section`