In his book, A Software Engineer Learns HTML5, JavaScript & jQuery, Dane Cameron calls the new HTML5 semantic elements “one of the least interesting features of HTML5″. I disagree, the HTML5 sectioning and grouping elements provide essential information to assistive technologies allowing their users, including blind and low vision users, access to information we take for granted.
Many of these new HTML5 sectioning and grouping elements map to the WAI-ARIA Document Structure and Landmark Roles. WAI-ARIA which became a W3C recommendation in March 2014, provides a set of specifications web authors can follow to add markup to improve the accessibility and interoperability of web content and applications. The markup includes roles, states and properties that expose page structure and element states and properties to assistive technologies. Assistive technologies, such as screen readers, can in turn communicate this information to their users providing users with essential information about the elements on the page and the ability to navigate and access those elements. This is pretty exciting to me.
Most of WAI-ARIA has been included in the HTML5 specification which became a W3C recommendation in October 2014. The new HTML5 sectioning and grouping elements in particular provide structural information to assistive technologies about the web page or application. For example, a web page may include a banner and search box on top, a main body and footer information with copyright information at the bottom. By properly marking up the page structure with a header, main, footer and section elements along with providing the appropriate WAI-ARIA roles for these elements, a blind user can navigate the page using a screen reader and quickly jump to each of these sections on the page.
Although most major browsers support WAI-ARIA, the support for HTML5 accessibility elements is still being worked. The Paciello Group has been tracking this support on the website, HTML5Accessibility. The recommendation today is to continue to use WAI-ARIA roles on the sectioning and grouping elements until the user agents support the native semantics with implied WAI-ARIA roles.
The new sectioning and grouping elements may evoke memories of skip to main content and other skip links that assisted the user in navigating to main content and around blocks of content on a web page. As more web authors and user agents adopt HTML5 sectioning and grouping elements along with support for WAI-ARIA landmark and document roles, we can provide a more robust set of navigation techniques. David Todd provides a plugin on GitHub that can be installed into Firefox, giving even non-screen users the ability to navigate landmarks and sections on a web page.
So yes. These new sectioning and grouping elements get me excited that web sites and applications can be accessed by a large audience of users including persons with disabilities.
For more great resources on WAI-ARIA and HTML5 check out the follow:
- WAI-ARIA Authoring Practices (W3C recommendation)
- Using ARIA in HTML by Steve Faulkner
- Using WAI-ARIA in HTML (W3C draft)
- Sections and Outlines of an HTML5 Document, Mozilla Developer Network.
Code demoing new HTML5 sectioning and grouping elements
<!DOCTYPE html>
<html lang=”en-US”>
<head>
<meta charset=”UTF-8″>
<title>Sample of HTML5 sectioning elements</title>
</head>
<body>
<header role=”banner”>
<p>[header section]
<h1>This is the header.</h1>
<p>
Header sections contain elements typically found in banner such as
navigation links, search fields and logos.</p>
<section role=”search”>
<p>[search landmark]
<form id=”SearchForm” target=”_blank” action=”search” method=”get”>
<div>
<label for=”search-input”>Search</label> <input id=”search-input”
type=”search” placeholder=”Enter query terms” autocomplete=”off”
value=”” name=”qt” maxlength=”100″> <input
id=”search-button” type=”button” value=”Submit”>
<div></div>
</div>
</form>
<p>[end of search]
</section>
<p>[end of header]
</header>
<main role=”main”>
<div>
<p>[start of main]
<h2>The Main Content</h2>
<p>This is the main content on the page. Screen reader users can
navigate directly to this content through the exposure of the page
structure using sectioning elements.
<p>We continue to use ARIA roles until the user agents provide
full support for the new HTML5 sectioning elements.
</div>
<p>[end of main]
</main>
<footer role=”contentinfo” aria-label=”Footer”>
<div>
<p>[footer section]
<h3>Footer content</h3>
In the footer you might find copyright info, links to Terms of use
and Feedback pages.
</div>
<p>[end of footer]
</footer>
</body>
</html>
Learn more about the IBM Accessibility, which works to establish IT accessibility standards, shape government policies, and develop human-centric technology and industry solutions so that all people reach their highest potential in work and life.
Join our conversations on Twitter, Facebook, LinkedIn, and Google+.
“This blog post and postings on this site are of my own opinion and don’t necessarily represent IBM’s positions, strategies or opinions.” – Moe Kraft
moekraft 