Three quick accessibility tips for HTML5


Published on

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

Published in: Education, Technology, Design
  • No worries. Keep in mind that you *CAN* use the method but this does not mean you *SHOULD*. It is up to you, your experiences testing with real AT devices, your site, and more importantly your site audiences.
    Are you sure you want to  Yes  No
    Your message goes here
  • @maxdesign well I didn't know that but I still think it's weird wrap an element other than an image with the figure element. But if the specs says so... I want to thank you for your answer. It was very enlightening.
    Are you sure you want to  Yes  No
    Your message goes here
  • Hi Edson,

    The W3C HTML spec states that the figure is for more than just images:

    'The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc.'


    If you run an HTML5 page through the W3C validator and the page contains a table with the summary attribute, the following warning appears:

    'The summary attribute is obsolete. Consider describing the structure of the table in a caption element or in a figure element containing the table; or, simplify the structure of the table so that no description is needed.'

    Are you sure you want to  Yes  No
    Your message goes here
  • Edson: I do not. I prefer the P element for table description.
    Are you sure you want to  Yes  No
    Your message goes here
  • Regarding slides 25 and 26, I don't think wrap a table or any other elements with the figure element is a best practice. Do you recommend that?
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Three quick accessibility tips for HTML5

  1. 1. Three quick tips for Accessibility and HTML5
  2. 2. Charles has just given you a broad overview of HTML 5 accessibility.
  3. 3. I am now going to focus on a few quick aspects about HTML5 and accessibility - a micro view.
  4. 4. The <section> element
  5. 5. HTML5 provides us with a range of new “semantic elements”.
  6. 6. <header> <nav> <section> <article> <aside> <main> <footer> <figure> <figcaption>
  7. 7. The <section> element is used for a “thematic grouping of content” - a chunk of content that has a single theme.
  8. 8. The theme of each section should be identified with a heading element (h1-h6).
  9. 9. <section> <h2> All about apples </h2> ... </section>
  10. 10. The <section> element is not a replacement for a <div>. The <div> element should be always be used for generic containers.
  11. 11. The section element is also available to assistive technologies. The section element is mapped as a region.
  12. 12. For assistive technologies that support HTML5 elements, the <section> element is announced with “Region start” and then “Region end”.
  13. 13. For this reason: 1. only use a section element for the intended purpose 2. always include a heading
  14. 14. Additional meaning can be applied to the section element using the “arialabelledby” attribute.
  15. 15. <section arialabelledby="section-apples"> <h2 id="section-apples"> All about apples </h2> </section>
  16. 16. the summary attribute
  17. 17. Some attributes from HTML4 are no longer allowed in HTML5.
  18. 18. One of these is the “summary” attribute which is applied to the <table> element.
  19. 19. The summary attribute is used to provide assistive technologies with additional information about the table.
  20. 20. <table summary="summary here"> ... </table>
  21. 21. A lot of accessibility experts are not happy with this attribute being removed!
  22. 22. So, how can we provide this additional summary information?
  23. 23. The simplest solution is to provide the additonal information directly above or below the table element.
  24. 24. <p> Summary information </p> <table> ... </table>
  25. 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. 26. <figure> <figcaption> Summary information </figcaption> <table> ... </table> </figure>
  27. 27. You could also provide additional meaning by using the “aria-labelledby” attribute.
  28. 28. <figure> <figcaption id="summary1"> Summary information </figcaption> <table arialabelledby="summary1"> ... </table> </figure>
  29. 29. The <a> element
  30. 30. In the past, the <a> element was always considered an inline element.
  31. 31. Inline elements were never allowed to wrap around block level elements.
  32. 32. <p> A simple <a href="#">link</a>. </p>
  33. 33. With HTML5, the <a> element is now allowed to wrap around entire blocks of content - creating a block link.
  34. 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. 35. <a href="#"> <p> A simple link. </p> </a>
  36. 36. But why would this be allowed, when it breaks the very laws of nature?
  37. 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. 38. In the past, this meant multiple links going to the same location - which could be confusing for some assistive technologies.
  39. 39. <div> <a href="#"> <img src="a.png" alt=""> </a> <h2> <a href="#"> Heading </a> </h2> <p>Some text</p> </div>
  40. 40. By wrapping the <a> element around the entire block, there is only one link required.
  41. 41. <a href="#"> <div> <img src="a.png" alt=""> <h2> Heading </h2> <p>Some text</p> </div> </a>
  42. 42. While this can reduce confusion for some assistive technologies, it can make things more confusing for others.
  43. 43. For a full list of all issues, read “HTML5 Accessibility Chops: Block Links” html5-accessibility-chops-block-links/
  44. 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. 45. More issues? Some browsers do not display block links correctly.
  46. 46. Issues can include missing underlines, cursor not changing, everything underlined...
  47. 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. 48. a.block-link { display: block; text-decoration: none; cursor: pointer; }
  49. 49. So, if you want to use block links, be aware of the potential issues as well is the potential benefits!
  50. 50. Russ Weakley Max Design Site: Twitter: Slideshare: Linkedin: