HTML5 Doctor » WAI-ARIA

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.

Absent Elements and Validation

Richard Clark — Tue, 25 Aug 2009 14:30:14 +0000

We received the below question from Guy Carberry who was wondering what effect changing the doctype on your HTML or XHTML pages to the HTML 5 doctype will have on those elements that are deprecated current draft.

The Question

There are several aspects to consider from this question so lets start by taking a look at Guys question in full.

Jeremy Keith says that we can change the Doctype declaration on XHTML 1.0 syntax pages to and it will immediately become HTML 5.

I'm a bit confused about what that means for the Absent and changed elements and attributes info detailed here: http://www.w3.org/TR/html5-diff/#absent-elements

"Some attributes from HTML 4 are no longer allowed in HTML 5. If they need to have any impact on user agents for compatibility reasons it is defined how they should work in those scenarios."

So if this is that case, how can you switch the doctype declarations and all be fine?

Thanks for your help,

Guy.

The Doctors Response

In answering the question we will need to break the question down into the following:

Which elements or attributes are deprecated?
Do I use any of those elements or attributes on my site?
How much do I need to worry about validation?
What effect will this have for backwards compatibility?
Can my content be accessed in all my target browsers and user agents?

Lets consider each of these in some more detail below.

1. Which elements or attributes are deprecated?

The elements deprecated (from HTML 4.01) from the HTML 5 specification are: basefont, big, center, font, s, strike, tt, u, frame, frameset, noframes, acronym, applet, isindex, dir

You can find a list of those elements and attributes along with detailed reasons of why they've been removed by reading HTML 5 differences from HTML 5.

2. Do I use any of those elements or attributes on my site?

If your site uses any of the above named elements or attributes you may consider changing them to more semantic elements as introduced in HTML 5. Alternatively you may decide to remove them and use CSS for presentation in the case of or

Guy told use that he works for a large university. The site uses a large number of tags which have been removed from HTML 5 as detailed above. To solve this issue for Guy, I feel he has three options if he wishes to make the site: HTML 5:

Change the doctype to HTML 5 and leave the elements in. (Bear in mind the HTML won't validate)
Change the doctype to HTML 5 edit the elements to become elements as advised by the specification
Do nothing and leave the site as HTML 4.01 or XHTML

It's difficult to be able to advise Guy on which option he should choose without knowing the full extent of the effort involved to implement these solutions or knowing the sites goals and project teams views on validation. Speaking of validation, the whole area is a minefield and it's what we'll attempt to cover next.

3. How much do I need to worry about validation?

While validation is undoubtedly important for your markup and your CSS, in my opinion it isn't crucial to a site. Allow me to explain, we recently received a couple of emails pointing out that this site doesn't validate. While there were some errors that have now been corrected, a primary reason why is the use of ARIA roles in the markup. These attributes currently aren't allowed in the current specification, however there is work underway to make this happen.

To illustrate this point let's look at Google, the search giant. If you look at the source on Google's search pages you'll see they use the HTML 5 doctype.

However, those pages don't validate because they use the and

elements amongst others things that we already know have been removed from the specification. Does this mean that users stop visiting Google? No.

Remember too that the specification is yet to be finalised and may still be changed (thus breaking you're perfectly valid docments), in partnership with this changes to the specification may not immediately take be implemented in the validators. We also need to bear in mind that HTML 5 takes a "pave the cowpaths" approach to development, meaning that the Hixie, et al will look at what authors already do and improve upon it.

4. What effect will this have for backwards compatibility?

Leading on from the point about Google as mentioned previously we know Googles site not validating doesn't matter but is it still backwards compatible? Yes. As far as we know, all the browsers support the tag. It's the validators that don't. If you want to use an antiquated element you can do, the browser will still handle it - it just won't validate.

In terms of backwards compatibility there is no reason why you couldn't start using new HTML 5 elements in your HTML 4.01 or XHTML 1.x documents, it could even be described as progressive enhancement. For example, why not include the element? It won't validate but maybe that doesn't matter? The browser will still be able to render video, hence "paving the cowpaths". Having said that if you're going to the effort of including new elements why not go the whole hog and change the doctype too?

5. Can my content be accessed in all my target browsers and user agents?

Again to look at Google, it still renders in older browswers and devices but to all intents and purposes it's HTML 5. Another aspect that the specification defines is that new features should work in or not break in older browsers.

Remy pointed out in a response to Guy that

Remember that the browser is still going to handle this, regardless of whether HTML 5 supports this or not. Just like and XHTML document although doesn't validate with frames, it still renders fine and still supports frames.

So from that we can conclude that browsers will still render deprecated elements or practices.

Summary

To wrap up I think we can answer Guys question by saying yes, changing the doctype will make your site HTML 5, but whether or not it validates is in essence an entirely personal or business decision. Whether this means you are making use of all the benefits of HTML 5's new elements, javascript API's or offline storage is a whole different subject.

Share and Save:

Absent Elements and Validation originally appeared on HTML5 Doctor on August 25, 2009.

HTML5 Doctor » WAI-ARIA

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:

Absent Elements and Validation

The Question

The Doctors Response

1. Which elements or attributes are deprecated?

2. Do I use any of those elements or attributes on my site?

3. How much do I need to worry about validation?

4. What effect will this have for backwards compatibility?

5. Can my content be accessed in all my target browsers and user agents?

Summary

Related Posts:

HTML5 Doctor » WAI-ARIA

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

Absent Elements and Validation

The Question

The Doctors Response

1. Which elements or attributes are deprecated?

2. Do I use any of those elements or attributes on my site?

3. How much do I need to worry about validation?

4. What effect will this have for backwards compatibility?

5. Can my content be accessed in all my target browsers and user agents?

Summary

Related Posts:

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

Thanks,

DRoss