Errata for Chapter 2

1,2 editions, Page 26 - 27

The <time> element was removed, and restored. It's not fully specified yet, but the good news is that the new incarnation is more powerful than it was before.

Previously, you could only mark up precise dates. So, 13 November 1905 could be expressed in HTML <time datetime="1905-11-13"> but November 1905 couldn’t be. This is a problem for historians where sometimes the precise date isn’t known.

Now, “fuzzy dates” are possible:

You can also separate the date and time with a space rather than a “T” (but you don’t have to). So both of these are valid:

Appending "Z" to the timezone indicates UTC (a way of saying "GMT" without it being comprehensible to normal people). Otherwise, use an offset:

In New! Improved! HTML5 <time>, you can represent durations, with the prefix “P” for “period”. This uses “W” (or “w”) for weeks, “D” for days, “H” for hours, “M” for minutes and “XQ” for seconds. Just kidding – that’s “S”.

You can separate them with spaces (but you don’t have to). So <time datetime="P4W3D5H"> is a duration of 4 weeks, 3 days and 5 hours, as is <time datetime="P4W 3D 5H">. A duration of 3 hours, 2 minutes and 23.005 seconds is <time datetime="P3H2M23.005S"> or <time datetime="P3H 2M 23.005S">.

This can be boiled down by a machine to a precise number of seconds. Because of this, you can’t specify a duration in terms of months, because a month isn’t a precise number of seconds; a month can last from 28 to 31 days. Similarly, a year isn’t a precise number of seconds; it’s 12 months and February sometimes has an extra day.

You still can’t represent dates before the Christian era, as years can’t be negative.

pubdate

The pubdate attribute (a boolean that indicates that this particular date is the publication date of the parent <article> (or, if there is none, the whole document) is currently missing from the W3C version of the spec, but is still current in the WHATWG version. Its status is unclear to me (but I’m still using it). [January 2012]

1 edition, Page 50 (first paragraph)

"Some of these obviously match HTML5 elements such as <article>, <form>, <heading> …"

<heading> should read <header>. What a numpty, eh?

1 edition, Page 53, <figure> section

See the example, coded:


<figure>
<img src=welcome.jpg 
  alt=""> 
<figcaption>
Bruce and Remy welcome questions
<small>Photo © Bruce's mum</small>
</figcaption>
</figure>

Since the book went to press, Steve Faulkner of The Paciello Group pointed out a problem with the alt text in this example.

In figures where the figcaption text tells you all you need to know ("Angelina Jolie and Remy Sharp pose on the red carpet at the premier of 'HTML5! the musical'"), don't duplicate this in alt text.

This is what I've done above, except that I've made a mistake: if an image has empty alt text (eg alt="") it is regarded as being presentational only, and having an implied ARIA role=presentation which would remove the element from the page's accessibility tree (no user agent does this, yet, but that's the general plan).

As the image is not purely presentational (if it were, we wouldn't be marking it up as a figure and giving it a caption) we shouldn't have empty alt, we should use no alternate text at all, e.g.

<img src=welcome.jpg>

Steve has written a very useful document HTML5: Techniques for providing useful text alternatives (that is a First Public Working Draft, therefore very, very susceptible to change) in which he writes

Circumstances in which it is not appropriate to use an empty or null alt attribute: An image is contained within a figure element and has an associated caption provided using the figcaption element.

On the other hand, you may think that the example above needs alt text <img src=welcome.jpg alt="Bruce and Remy glower menacingly into the camera"> because otherwise the joke isn't communicated to a screenreader user.

As an accessibility filip, it's useful to add ARIA attributes to associate the image with the caption until browsers "understand" the figure element and do this automatically.

When there is no alt text, use aria-labelledby to associate the id of the figcaption to the img:

<figure>
<img src=welcome.jpg aria-labelledby=figcap219>
<figcaption id=figcap219>
Angelina Jolie and Remy Sharp pose on the red carpet at the premier of 'HTML5! the musical'
</figcaption>
</figure>

If there is alt text, use aria-describedby:

<figure>
<img src=welcome.jpg 
alt="Bruce and Remy glower menacingly into the camera"
aria-describedby=figcap219>
<figcaption id=figcap219>
Bruce and Remy welcome questions
<small>Photo © Bruce's mum</small>
</figcaption>
</figure>