HTML5 Mark Word and Icon

New HTML5 sectioning elements expose structure to ATs

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:

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

Published by

Moe Kraft

For 16+ years, Moe has defended the rights of all abilities to access Information and Communication Technology (ICT). Specializing in Accessibility (#a11y), Moe fights for hyper-personalization of software and web applications including support for the blind, low vision users, deaf, mobility challenged, the aging population, foreign language speakers and those who learn differently. Basically Moe has disciplined herself to create apps for everyone. She is an active member of the W3C WCAG Working Group and the Boston a11y group. She received a B.S. in Computer and Information Science from University of Massachusetts, Amherst, MA and has been a software engineer at IBM and Lotus Development for 26 years. “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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s