Where It's AT – Assistive Technology Blog

HTML5 Structural Elements and ARIA

HTML5 introduces several new structural elements that will be very beneficial for accessibility: <nav> (for identifying navigational elements), <header> (a group of introductory or navigational aids), <article>, <aside> (tangentially related content, such as a sidebar), and <footer> provide meaning to major page structural areas. These can also be used to enhance keyboard navigation (a user could press the “N” key to jump to the page navigation, for example). Many HTML5 structural elements mirror or map to ARIA landmark roles:

• <article> — role=”article”
• <footer> — role=”contentinfo” (only one per page)
• <header> — role=”banner”
• <nav> — role=”navigation”
• <aside> — role=”complementary”

If transitioning to HTML5, you will want to use both the HTML5 native element and the ARIA role (e.g., <nav role=”navigation”>) until assistive technology support for HTML5 improves. Of note is that ARIA provides very useful role=”search” and role=”main” that do not have HTML5 counterparts. The accessibility of nearly all web pages would be increased if these roles are implemented.

ARIA Attributes and Element Styles

ARIA attributes are often necessary for optimal accessibility of web applications. They can be used to present information and meaning that otherwise would only be presented visually. For example, a red border or red text might be used to identify errant form fields (such as a form field that was not completed properly). This color-only designation would not be accessible to screen reader users. However, adding aria-invalid=”true” would provide an indication to a screen reader user that this field is invalid or broken. With CSS, visual styles can be applied to elements based on their ARIA attribute values. Instead of setting the ARIA attribute and also styling the form control to present a red border, CSS styles of [aria-invalid=true] {border: 2px solid red;} could be used to automatically style the element based on its ARIA attribute.