Tag: Landmarks

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:

Continue reading New HTML5 sectioning elements expose structure to ATs