Sometimes, new authors need a gentle reminder to think about accessibility when designing and writing web pages and apps. Experienced authors need a quick way to look up the allowed ARIA roles, states and properties for each HTML element. Browser and Assistive Technology (AT) implementers need quick access from an HTML element to its platform accessibility API.
Since I started publishing these weekly summaries over a year ago, I've watched the HTML5 specification grow up. In episode 1, the big news of the week was the birth of an entirely new specification (Web Workers). Slowly, steadily, and sometimes painstakingly, the HTML5 specification has matured to the point where the hottest topic last week was the removal of a little-used element (
<dialog>) and the struggle to find a suitable replacement for marking up conversations.
This week's changes are mundane, and I expect (and hope!) that future summaries will be even more mundane. That's a good thing; it tells me that, as implementors continue implementing and authors continue authoring, there are no show-stoppers and fewer and fewer "gotchas" to trip them up. Thus, the overarching theme this week -- and I use the term "theme" very loosely -- is "the never-ending struggle to get the details right."
HTML5 is full of algorithms. Most of them are small parts of one mega-algorithm, called Parsing HTML Documents. Contrary to popular belief, the HTML parsing algorithm is deterministic: for any sequence of bytes, there is one (and only one) "correct" way to interpret it as HTML. Notice I said "any sequence of bytes," not just "any sequence of bytes that conforms to a specific DTD or schema." This is intentional; HTML5 not only defines what constitutes "valid" HTML markup (for the benefit of conformance checkers), it also defines how to parse "invalid" markup (for the benefit of browsers and other HTML consumers that take existing web content as input). And sweet honey on a stick, there sure is a lot of invalid markup out there.
- r3896 tells parsers to ignore almost any end tags before the
<html>tags. There are a few special end tags which cause the parser to start constructing a new document:
</body>, and oddly enough,
</br>. [Related: Bug 7672]
- r3909 clarifies how user agents should parse the
typeattribute of a
- r3923 tweaks the algorithm for parsing the
DOCTYPEdeclaration. This affects
- r3967 clarifies the algorithm for ignoring the first newline or carriage return character at the beginning of a
<pre>block. [Background: [whatwg] Initial carriage return in
- r3968 explains why the
<embed>element can have an infinite number of attributes. (Answer: because they are passed directly to the third-party plugin that handles the embedded content, and there are no restrictions on what kind of plugins you can have or what attributes they can take as input.)
- r3991 adds to the already-long list of legacy, non-conforming attributes that user agents may encounter in existing web content.
- r3871 and r3982 tweak the handling of Unicode surrogates. [Background: [whatwg] Surrogate pairs and character references]
- r3887 specifies that each
<area>in a client-side image map should be focusable.
- r3919 encourages browser vendors to expose tooltips to keyboard-only users. For example, in Firefox 3.5, if you hover your cursor over a hyperlink that defines a
titleattribute, you will see the
titleattribute as a tooltip. But if you tab to the same link with the keyboard, no tooltip appears. Now imagine that you're physically unable to use a mouse, and you begin to see the problem. [Background: Bug 7362 and Issue 80]
- r3928 defines an intriguing proposal about canvas accessibility, which probably deserves its own article. Here's the short version: you can already define "fallback content" within a
<canvas>element that is shown to browsers that don't support the canvas API. This change dictates that the "fallback content" should remain keyboard-focusable even in browsers that do support the canvas API. To quote the spec: "This allows authors to make an interactive canvas keyboard-focusable: authors should have a one-to-one mapping of interactive regions to focusable elements in the fallback content." This is a draft proposal; as far as I know, no browser actually supports it yet, and it may get reverted in the future. [Background: Bug 7404]
- r3969 clarifies that browsers must do nothing when the user activates a label whose corresponding input control is hidden (in any manner, including a
display: noneCSS rule). [Background: Bug 7583]
All of this week's security-related changes revolve around
document.domain. As you might expect from its name, this property returns the domain name of the current document. Unfortunately (for security), the property is not read-only; you can also set
document.domain to pretty much anything. This can cause all sorts of horrible side effects, since so many things (cookies, local storage, same-origin restrictions on
XMLHttpRequest) rely on the domain of the document. This set of changes attempts to reduce the nasty side effects (and the possible attack surface) in case you absolutely must set
document.domain to something other than its default calcuated value.
- r3875 states that setting
document.domainshould release the storage mutex. (The storage mutex is a global lock that is acquired when setting cookies and released immediately afterwards. Since cookies are domain-specific, changing the domain dynamically like this needs to release the lock in case the page wants to update the cookies on the new domain.) [Background: [whatwg] Storage mutex and cookies can lead to browser deadlock, [whatwg] RFC: Alternatives to storage mutex for cookies and localStorage, [whatwg] Application defined "locks"]
- r3878 states that setting
document.domainmakes Web Storage unusable, to avoid deadlocks with Web Storage's own locking mechanism. [Background: [whatwg] localStorage, the storage mutex, document.domain, and workers]
- r3879 warns against setting
document.domainon web applications that are hosted on shared servers. The spec explains the problem: "If an untrusted third party is able to host an HTTP server at the same IP address but on a different port, then the same-origin protection that normally protects two different sites on the same host will fail, as the ports are ignored when comparing origins after the
document.domainattribute has been used."
- r3905, r3948, and r3966 clarify that the
profileattribute (used by various microformats) takes a space-separated list of addresses, not just a single address. This has been the subject of heated debate for over 12 years, because HTML 4 claims that "the value of the profile attribute is a URI; user agents may use this URI in two ways..." while simultaneously claiming that "this attribute specifies the location of one or more meta data profiles, separated by white space." [Background: let's keep metadata profiles (head/@profile) in HTML for use in GRDDL etc., [whatwg] HTML4's profile="" attribute's absence in HTML5, Bug 7413, Bug 7484, Bug 7512, and Issue 55.]
- r3869 tweaks the definitions of
<details>based on an informal study by Jeremy Keith. r3979 further tweaks the definition of
<article>, and r3978 mentions that the
<article>element is semantically similar to the
<entry>element in RFC 4287 (Atom Syndication Format). [Background: [whatwg] article/section/details naming/definition problems. Related: Bug 7551]
- r3954 further clarifies the definition of
<footer>. [Background: Bug 7502]
- r3907 clarifies the workings of the registries for the enumerated values of
<meta name>, and
- r3904 tweaks the semantics of
- r3962 modifies the outline algorithm (used to generate a kind of "table of contents" of an HTML document based on sections and headers) to handle an obscure edge case. [Background: IRC discussion of edge case, Bug 7527, and in particular this comment on Bug 7527]
- r3987 gives an example to clarify that the
<nav>element does not always need to be a child of a
As regular readers of this column are aware, one of the big new user-visible features of HTML5 is native video support without plugins. As video is incredibly complicated, so to is the video support in HTML5. (Although not related to this week's changes, you may be interested to read my series, A gentle introduction to video encoding.)
- r3867 modifies the algorithm for sizing anamorphic video within a
<video>element, and r3913 defines how to display a frame of anamorphic video in a canvas pattern. [Background: Re: video size when aspect ratio is not 1, What The Heck Is Anamorphic?]
- r3924 defines what happens when you dynamically insert a
<source>element as a child of a
<video>element that also has a
srcattribute, and r3925 defines what happens when you dynamically remove a
<video src>attribute. [Background: Bug 7631, Bug 7632]
- r3927 gives advice on how browsers could render an
<audio>element with a
- r3992 makes further refinements to the
Forms continue to be difficult.
- r3874 allows browsers to reset the list of selected files of an
<input type="file">element by setting its
valueattribute to the empty string. [Background: [whatwg] Setting .value on <input type=file>]
- r3922 clarifies that setting the
disabledattribute of a
<fieldset>element should not disable the children of the fieldset's
<legend>element. [Background: Bug 7591]
- r3934 defines that the
maxLengthproperty should return -1 on a
<input>element that does not include a
maxlengthattribute. [Background: Bug 7427]
- r3957 clarifies that implicit form submission should validate the form first. [Background: Bug 7511]
Interesting Discussion Threads This Week
- I like this proposal for adding a
document.headproperty. It would presumably be faster than
document.getElementsByTagName('head'), and more reliable than
- Character encoding on the web is even worse than you think.
- Re: On testing HTML
Around the Web
- Brad Neuberg: A video introduction to HTML5
- Google (my employer) released an intriguing project called Google Chrome Frame. It's a plugin for Internet Explorer that enables a number of new HTML5 capabilities on an opt-in basis. Here's a few technical details. Reaction has ranged from impressed to unimpressed to positively ironic. Google Wave is one of the first web applications to opt-in and suggest that Internet Explorer users download the plugin.
- Steve Faulkner: HTML5 & WAI-ARIA: Happy Families, a slide deck about current HTML5 accessibility features, misfeatures, and support in browsers and assistive technologies.
- Burst Engine is "an OpenSource vector animation engine for the HTML5 Canvas Element."
- Peter-Paul Koch: The HTML5 drag and drop disaster
Tune in next week for another exciting edition of "This Week in HTML5."
I see more and more people switch over to HTML5 these days, and to help you make sure you did things correctly, there are some tools at your disposal that might be good to know about.
To make sure you didn't misspell any tag or nest elements in a way that is not allowed, or find similar mistakes in your markup, you can use Validator.nu.
Alt text for images
The above-mentioned validator has a feature to help you quality-check your alternative text for your
img elements. Check the Show Image Report checkbox.
You can also disable images in your browser or try to use a text-only browser — the information that the images convey should still be available (but in text form). Sometimes an image doesn't convey any further information than what the surrounding text already says, and in such cases you should use the empty value:
For further advice and examples on how to use the
alt attribute, the HTML 5 spec has lots of information on the topic. If you're not going to read it all, just read the section called General guidelines.
The document outline is the structure of sections in the document, built from the
h6 elements as well as the new sectioning elements (
nav). The document outline is more commonly known as the Table of Contents.
To make sure that you have used the new sectioning elements correctly, you can check that the resulting outline makes sense with the HTML5 Outliner.
If you see "Untitled Section" and didn't expect them, chances are that you should have used
div instead of
If you have a subtitle of a heading that shouldn't be part of the document outline, you should use the
<hgroup> <h1>The World Wide Web Consortium</h1> <h2>Leading the Web to Its Full Potential...</h2> </hgroup>
In this example, only the
h1 will show up in the document outline.
(This only applies to
table elements used for tabular data — not for layout.)
HTML tables have two types of cells: header cells (
th elements) and data cells (
td elements). These cells are associated together in the table: a data cell in the middle of the table can have associated header cells, typically in the first row and/or the first column of the table. To a user who can see, this association seems obvious, but users who cannot see need some help from the computer to understand which cells are associated with which.
You should mark up your header cells with the
th element and check that your cells get associated as you intended using the Table Inspector. If it isn't as you intended, you can consider simplifying or rearranging your table, or you can override the default association using
If you know about other tools for helping with quality assurance of HTML5, or if you have made your own, please share!
Welcome back to "This Week in HTML 5," where I'll try to summarize the major activity in the ongoing standards process in the WHATWG and W3C HTML Working Group.
In this article:
- Introducing the
- (Re)introducing the
- (Re)introducing the
- Other interesting changes this week
- Around the web
Topping our list of changes this week is the new
The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.
<header> element has been redefined:
The header element represents a group of introductory or navigational aids. A header element typically contains the section's heading (an h1–h6 element or an hgroup element), but can also contain other content, such as a table of contents, a search form, or any relevant logos.
Here is an example of how these elements can work together in marking up a specification:
<header> <hgroup> <h1>Scalable Vector Graphics (SVG) 1.2</h1> <h2>W3C Working Draft 27 October 2004</h2> </hgroup> <dl> <dt>This version:</dt> <dd><a href="http://www.w3.org/TR/2004/WD-SVG12-20041027/">http://www.w3.org/TR/2004/WD-SVG12-20041027/</a></dd> ... </dl> </header>
Relevant background reading:
- r3039: Rename
<hgroup>and restrict it just to supporting subheadings.
- r3040: Introduce a new
- r3041: Clarify that
<header>does not introduce a new section
- r3043: Attempt to resolve the terminology confusion of heading vs header.
- r3050: Disallow
<header>since that's probably indicative of an error, so validators should probably report it.
- r3051: Disallow
- announcement of the changes on the W3C HTML Working Group mailing list
Next up in this week's changes is the reintroduction and reformulation of the
accesskey attribute. In HTML 4, the
accesskey attribute allows the web designer to define keyboard shortcuts for frequently-used links or form fields. In HTML 5,
All elements may have the accesskey content attribute set. The accesskey attribute's value is used by the user agent as a guide for creating a keyboard shortcut that activates or focuses the element.
Also new in HTML 5: the
accesskey attribute may contain a number of shortcuts, space-separated, and the new
.accessKeyLabel DOM property contains the shortcut key that the browser ultimately chose.
One possible enhancement, not in HTML 5 but under consideration for HTML 6, is the use of more-than-1-character strings to define roles, such as
accesskey="help". The browser could then choose the appropriate shortcut key based on the user's platform and preferences.
I plan to write up a more detailed history of the
accesskey attribute in a seperate article. Until then, here is some background reading:
- r3065: define
- using the
accesskeyattribute to define a command
- accesskey announcement on the W3C HTML Working Group mailing list
- accesskey attribute on Google Doctype
window.setInterval functions have been in a state of limbo in the HTML 5 spec, waiting for an editor to take them and split them out into a separate spec. No editor has come forward, so back into HTML 5 they go.
These timer functions are complicated by their unique history in browser-land. They can take basically anything as their first argument. If you pass a function, it will be executed after the specified interval. If you pass anything else, the browser will call
WorkerUtils object). There is also a little-known but widely supported third argument to
setInterval, which passes arguments to the evaluated expression. Meanwhile, the second argument -- the timeout value -- can also be any datatype. Browsers must call
toNumber(toString(timeout)) and round down to the nearest integer.
- r3068 defines
- Timers in the HTML 5 specification
- brief mailing list announcement of timer updates
It seems that each week in HTML 5 brings more changes to the
<video> element. While this is not strictly true, it is certainly true this week.
- r3012: tighten up some terminology to account for videos playing backwards
- r3014: fire
errorevents at the
<source>element when it fails to load. But never mind that, because it didn't solve the problem, so it was overridden by...
- r3027: error events are only fired on
<source>elements, or once on
<video>if the UA gave up trying to load the video. [Media elements may never load, may load the wrong source, etc]
- r3035: a new DOM property,
video.startTime, which returns the earliest possible position. [Start position of media resources and ensuing discussion]
- r3049: you can now call
a_canvas_element.getContext('2d').createPattern(a_video_element). [Re: [canvas] Using HTMLVideoElement with createPattern()]
Speaking of events, there was a series of event-related checkins this week. The
onredo events, usually triggered by the user selecting the
Redo item from the Edit menu, have been moved from the
Document to the
Window.  These events are important for all sorts of web applications (think Google Docs and then work your imagination outward).
r3004 adds support for the
onafterprint events, which are supported in Microsoft Internet Explorer since version 5.
r3005 updates the global list of event handlers to include these new events, some video-related events, some storage-related events, and several others that have slipped through the cracks during the thrashing of these features.
Other interesting changes this week
- r3019: plugins (like Flash) release the storage mutex (i.e. the
document.cookielock mentioned in episode 28).
- r3015 adds
- r3032: the default size of
<h1>elements depends on how deep it is nested within nested
- r2988: if the document's last-modified is unknown,
document.lastModifiedshould return the current time.
<time datetime="valid-datetime"></time>should display the datetime value in the user's timezone and locale.
Around the web
- Ian Hickson has summarized the major use cases given for micro-data (RDFa, microformats, etc.) and plans to start addressing the use cases this week.
- W3Schools.com has added an HTML 5 reference section.
- Reminder: you can still help us review HTML 5! Your input is important!
Tune in next week for another exciting episode of "This Week in HTML 5."
Welcome back to "This Week in HTML 5," where I'll try to summarize the major activity in the ongoing standards process in the WHATWG and W3C HTML Working Group. The pace of HTML 5 changes has reached a fever pitch, so I'm going to split out these episodes into daily (!) rather than weekly summaries until things calm down.
On getting, [the
.valueproperty] must return the string
"C:\fakepath\"followed by the filename of the first file in the list of selected files, if any, or the empty string if the list is empty. On setting, it must throw an
According to bug 6529, Opera already implements something close to this, and is willing to modify their implementation to match the spec text.
For example, this might happen because the element is removed from its
Document, or has a
hiddenattribute added. It would also happen to an
inputelement when the element gets disabled.
But let's back up a step. What does it mean for an element to be "focused" in the first place? The spec has a whole section on the concept of focus. The short answer is that focus is just what you think it is: it's the element that responds when you type. As you tab around a form, the focus moves between form fields, where you can type information; as you tab around a page, the focus moves between links, which you can follow; if you tab long enough, focus moves out of the page and back to the location bar, and so forth.
The not-so-short answer that everything in the previous paragraph is platform-specific and, depending on your browser, highly customizable. The HTML 5 spec respects these platform differences, and defers the definition of what elements should be focusable to the browser, which ultimately respects the conventions of the underlying operating system.
The long answer is that virtually anything can be focusable, because HTML 5 standardizes a crucial accessibility feature that most modern browsers now implement, namely that any element can have a
It may not sound like it, but this is a really, really important feature for building accessible web applications. HTML 4 restricted the
tabindex attribute to links and form fields. For reasons unknown, Internet Explorer ignored that and respected a
tabindex attribute on any element. Starting with Firefox 2, Mozilla co-opted this implementation and wrote up a rough "standard" about using the
<span>s, yet they are still focusable and keyboard-navigable. The controls are in the tab order, so you can focus with the keyboard, then you can use the keyboard to further manipulate them, change their state, and so forth.
In HTML 4, there was no way to put custom controls into the tab order without breaking markup validity (unless you futzed around with custom DTDs or scripting hacks), because the
tabindex attribute could only be used on links and form fields. HTML 5 "paves the cowpaths" and standardizes this definition and behavior of
tabindex-on-anything. This is a huge step forward for web accessibility. The concept of focus is central to accessibility, and HTML 5 gives it the attention it deserves. (There's more to making controls accessible than just keyboard navigability, but if you don't have keyboard navigability, nothing else really matters. If you're creating your own custom Javscript widgets, you must read the (non-vendor-specific) DHTML Style Guide for implementing keyboard accessibility in custom controls.)
Now then, why is r2804 important? Well, if the element that has focus suddenly can't have focus anymore -- because it was programmatically hidden or disabled, or it was removed from the DOM altogether -- then it is vitally important to specify where the focus goes. So the HTML 5 specification lays it all out:
When an element that is focused stops being a focusable element, or stops being focused without another element being explicitly focused in its stead, the user agent should run the focusing steps for the body element, if there is one; if there is not, then the user agent should run the unfocusing steps for the affected element only.
[Background reading: Re: Lose Focus When Hidden? (SVG ISSUE-2031)]
Other interesting changes of the day:
- r2807 simplifies the definition of
- r2810 makes the presence of a
<noframes>element a non-ignoreable error for validators. (It was previously a "downplayed error.")
- r2811 defines that "
WindowProxyobject instead of a
Windowobject. I confess I have no idea what that means or why it's important. Perhaps a commenter could enlighten me?
- r2812 updates the way browsers should determine character encoding (using known aliases of common encodings).
- r2817 adds "transparent" to the list of colors that need to be parsed in an IE-compatible way.
- r2818 notes that putting a document in
designModedoes not actually prevent it from executing scripts.
Tune in... well, sometime soon-ish for another exciting episode of "This
Week Day In HTML 5."