Three quick accessibility tips for HTML5, including section element, summary attribute and block links.

1. Three quick tips for
Accessibility and
HTML5

2. Charles has just given you a
broad overview of HTML 5
accessibility.

3. I am now going to focus on
a few quick aspects about
HTML5 and accessibility - a
micro view.

4. The <section>
element

5. HTML5 provides us with a
range of new “semantic
elements”.

6. <header>
<nav>
<section>
<article>
<aside>
<main>
<footer>
<figure>
<figcaption>

7. The <section> element
is used for a “thematic
grouping of content” - a
chunk of content that has a
single theme.

8. The theme of each section
should be identified with a
heading element (h1-h6).

9. <section>
<h2>
All about apples
</h2>
...
</section>

10. The <section> element is not
a replacement for a <div>.
The <div> element should be
always be used for generic
containers.

11. The section element is
also available to assistive
technologies. The section
element is mapped as a
region.

12. For assistive technologies
that support HTML5
elements, the <section>
element is announced
with “Region start” and then
“Region end”.

13. For this reason:
1. only use a section element
for the intended purpose
2. always include a heading

14. Additional meaning can
be applied to the section
element using the “arialabelledby” attribute.

15. <section arialabelledby="section-apples">
<h2 id="section-apples">
All about apples
</h2>
</section>

16. the summary
attribute

17. Some attributes from HTML4
are no longer allowed in
HTML5.

18. One of these is the
“summary” attribute which
is applied to the <table>
element.

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

20. <table summary="summary here">
...
</table>

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

22. So, how can we provide
this additional summary
information?

23. The simplest solution is
to provide the additonal
information directly above
or below the table element.

24. <p>
Summary information
</p>
<table>
...
</table>

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

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

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

28. <figure>
<figcaption id="summary1">
Summary information
</figcaption>
<table arialabelledby="summary1">
...
</table>
</figure>

29. The <a>
element

30. In the past, the <a> element
was always considered an
inline element.

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

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

33. With HTML5, the <a>
element is now allowed to
wrap around entire blocks
of content - creating a block
link.

34. “The a element may be
wrapped around entire
paragraphs, lists, tables,
and so forth, even entire
sections, so long as there is
no interactive content within
(e.g. buttons or other links).”

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

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

37. 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.

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

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

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

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

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

43. For a full list of all issues,
read “HTML5 Accessibility
Chops: Block Links”
http://blog.paciellogroup.com/2011/06/
html5-accessibility-chops-block-links/

44. Bottom line:
“A link should contain a
brief description of the link
target... include the key
information at the start of a
link”

45. More issues? Some
browsers do not display
block links correctly.

46. Issues can include
missing underlines, cursor
not changing, everything
underlined...

47. A safe way to solve the
problem is to apply a class
to any instance of block links
and then use the following
three declarations for the
class...

48. a.block-link
{
display: block;
text-decoration: none;
cursor: pointer;
}

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

50. Russ Weakley
Max Design
Site: maxdesign.com.au
Twitter: twitter.com/russmaxdesign
Slideshare: slideshare.net/maxdesign
Linkedin: linkedin.com/in/russweakley