Feed on

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.

Leave a Reply

MDTAP | 2301 Argonne Drive, Room T17 Baltimore, Maryland 21218| Voice: 410-554-9230 Toll Free ⁄ Voice 1-800-832-4827|Email: mdtap@mdtap.org