maxdesign.com.au

Published:

This presentation explores three quick tips around HTML5 and accessibility.

The <section> element

HTML5 provides us with a range of new semantic landmark elements such as:

The <section> element is used to identify a page region - or a a “thematic grouping of content”. It should only be used if the following conditions are met:

  1. The page region is sufficiently important that users may want to navigate to it.
  2. he page region can be identified, typically by including a heading that is a direct child element.

If these conditions cannot be met, authors should consider using a <div> element, as this is a generic container that can used without any special conditions.

The <section> element can be used multiple times within a single layout and each instance will generate a section or region landmark.

Additional meaning can be applied to the section element using the aria-labelledby attribute:

<section aria-labelledby="section-apples">
  <h2 id="section-apples">All about apples</h2>
</section>

The summary attribute

Some attributes from HTML4 are no longer allowed in HTML5. One of these is the summary attribute which is applied to the <table> element.

The summary attribute was used to provide assistive technologies with additional information about the table.

<table summary="Summary information here">
</table>

A lot of accessibility experts are not happy with this attribute being removed!

So, how can we provide this additional summary information?

The simplest solution is to provide the additonal information via the caption element - which generates an accessible name for the table

<table>
  <caption>Caption here</caption>
</table>

You could get a bit fancier and place all relevant content inside a <figure> element and the additional content inside a <figcaption> element.

<figure>
  <figcaption>
    Summary information
  </figcaption>
  <table>
  </table>
</figure>

You could also provide additional meaning by using the aria-labelledby attribute.

<figure>
  <figcaption id="aaa">
    Summary information
  </figcaption>
  <table aria-labelledby="aaa">
  </table>
</figure>

The <a> element

In the past, the <a> element was considered to be an inline element.

Inline elements were never allowed to wrap around block level elements.

With HTML5, the <a> element has been upgraded. It can now wrap around entire blocks of content - as long as there is no interactive content, or content with a tabindex attribute inside.

<a href="#">
  <p>A simple link.</p>
</a>

But why would this be allowed, when it breaks the very laws of nature?

There may be times when you want to link multiple elements inside a container to the same location - such as a link on a thumbnail, a heading and even some text.

In the past, this meant multiple links going to the same location - which could be confusing for some assistive technologies.

<div>
  <a href="#">
    <img src="a.png" alt="">
  </a>
  <h2>
    <a href="#">Heading</a>
  </h2>
  <p>Some text</p>
</div>

By wrapping the <a> element around the entire block, there is only one link required.

<a href="#">
  <div>
    <a href="#">
      <img src="a.png" alt="">
    </a>
    <h2>
      <a href="#">Heading</a>
    </h2>
    <p>Some text</p>
  </div>
</a>

While this can reduce confusion for some assistive technologies, it can make things more confusing for others.

For a full list of all issues, read HTML5 Accessibility Chops: Block Links

Be aware that some browsers do not display block links correctly.

Other issues can include missing underlines, cursor not changing, everything underlined...

So, if you want to use block links, be aware of the potential issues as well is the potential benefits!

That's it!