Category: HTML5

Useful links: FCC, Landmark roles, aria-level

US Broadband: The FCC and Network Neutrality at Wired Pen is a masterful summary of the current state of things.

Adactio has some good advice about WAI-ARIA Landmark roles, HTML5, and CSS attribute selectors.

I asked this question on Quora after some discussion about it here on Web Teacher. So far no one has answered. Do you have an answer?

In HTML5, should aria-level be used with header and hgroup elements as a best practice?

How to make HTML5 semantic elements more accessible

The new semantic elements in HTML5 hold accessibility promise. Here are some of the the new elements.

  • header: header can be used for a page element, a section, and article, or an aside element
  • footer: footer can be used for a page element, a section, and article, or an aside element
  • article: an article is a part of a page that is complete in itself with a heading, content, footer, and possibly sections
  • section: a section is a a section of a page; related content can be contained in a section but it should have a heading and may contain articles with their own headings
  • aside: the aside is tangentially related material on a page or as part of an article
  • nav: navigation

Accessible Rich Internet Applications Suite (ARIA), defines a way to make Web content and Web applications more accessible. It is used to improve the accessibility of dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.

ARIA roles work now in many browsers and screen readers. When they don’t, they are harmless. If you build a page as accessibly as you can and then add ARIA roles into it where possible, you increase the potential accessibility of the page. This is currently the recommended best practice with HTML5 semantic elements.

An ARIA role is added as an attribute to the relevant element. The landmark ARIA roles are helpful with the new HTML5 semantic elements:

There are also a number of roles that describe structure on a page.

Here are a few examples of how to add the landmark role information to various elements:

<header role="banner">
<nav role="navigation">
<aside  role="complementary">
<section role="main">
<footer role="contentinfo">

Some roles can only be used once per page. banner and contentinfo must be unique on a page. In other words, while you can have many header elements on a page, only one header can fill the banner role.

[Note: This post was updated on June 12, 2014.]

See also: ARIA Roles 101 and ARIA States 101.

More about aside elements – going for block

Yesterday I posted some info about testing the HTML5 aside element in several browsers, and pointed out that some browsers don’t render styles properly for it. Lars Gunter came into the comments with the tip that using display: block would solve the problem.

Today at Dev.Opera, Bruce Lawson and Chris Mills posted an article called New Structural Elements in HTML5. Look at this snippet:

First of all, if you put an unknown element into a web page, by default the browser will just treat it like a <span>, ie, an anonymous inline element. Most of the HTML5 elements we have looked at in this article are supposed to behave like block elements, therefore the easiest way to make them behave properly in older browsers is by setting them to display:block; in your CSS:

article, section, aside, hgroup, nav, header, footer,
figure, figcaption {
  display: block;
}

This solves all your problems for all browsers except one. Have a guess which one? … Yup, amazing isn’t it, that IE should prove to be trickier than the other browsers, and refuse to style elements it doesn’t recognise? The fix for IE is illogical, but fortunately pretty simple. For each HTML5 element you are using, you need to insert a line of JavaScript into the head of your document, like so:

<script>
    document.createElement('article');
    document.createElement('section');
    document.createElement('aside');
    document.createElement('hgroup');
    document.createElement('nav');
    document.createElement('header');
    document.createElement('footer');
    document.createElement('figure');
    document.createElement('figcaption');
</script>

This answers several questions for me. I’ve read a number of posts by Bruce Lawson at HTML5 Doctor, but haven’t seen this bit of advice anywhere before Lars mentioned it yesterday. And I’ve been doing a lot of reading about HTML5! So I’m here to say thank you to Lars, Bruce and Chris. You guys rock. Or block.

Some tests on the aside element

I built a page of HTML5 and tried a few CSS styling rules on it to see what browsers do with rendering a page of HTML5. The tests I want to talk about today involve an aside element. In this test, I used the aside in the footer of an article element to display information about the author of the article. (Note the use of an ARIA role in the aside element.)

Here’s the HTML I used.

<article>
Article content
<footer>
<aside class="aboutauthor" role="complementary">
<h3>About the Author</h3>
<p class="vcard"><a class="url fn" href="http://vdebolt.com">Virginia DeBolt</a> is the author of blah and blah. She blogs at blah and is a big blah.</p>
</aside>
</footer>
</article>

I used some CSS to make it stand out. Here’s the CSS I used.

.aboutauthor {
width: 30em;
border: 1px solid blue;
background: #CCC;
padding: 2px;
margin-right: auto;
margin-left: auto;
}

The results in four different browsers are shown in the image. I don’t have IE, so I can’t show you what happens there.

results of tests on the aside element in four browsers
RESULTS OF TESTS ON THE ASIDE ELEMENT IN FOUR BROWSERS

As you can see, Safari and Chrome recognized and styled the aside element. Neither the border or nor the background color was rendered in Firefox or Opera. The centering was not rendered in Firefox or Opera either, something you can’t tell from my composite image.

If this same content were added to the HTML as a div, every browser would display it as styled.

My testing leads me to believe that browsers are not yet ready to render the aside element properly.

ADDENDUM: Be sure to read the comments – Lars shared how to make it work in Firefox and Opera.

SEE ALSO: More on the aside element – Going for Block