Accessibility and the element

HTML5 has a set of elements that make page structure more accessible to assistive technologies (ATs). The <header>, <footer>, <nav>, <article>, <aside> and <section> elements make it possible for ATs such as screen readers to identify the purpose of chunks of content on the page. But a growing school of thought says that there is one element missing from this set of semantically important tags.

In September 2012, Steve Faulkner proposed adding the <main> element to the HTML5 specification. The new element would represent the main content area of a web page. Conforming pages would include one <main> element, and it would contain content unique to that page. In other words the <main> element wouldn’t contain content that is typically repeated across pages (such as primary navigation, logos and banners, or copyright information).

The <main> element would formalise the common practice of using id="main" or id="content" on the containing element of the main content area. It would also map the semantics and function of the role="main" ARIA landmark.

<body><!-- Other content --><main><h1>Tequila</h1><p>Tequila makes you happy...</p><h2>Types</h2><p>There are two types of tequila...</p></main><!-- Other content --></body>

The reasons for proposing this new element are compelling. HTML traditionally provides elements for marking up specific semantic structures. There is an established pattern of mapping those elements to roles, states and properties in browser accessibility APIs. It’s the availability of information via the accessibility APIs that enables ATs to identify the element and inform the user about its purpose.

The practice of defining a main content area by applying id="main" or id="content" is commonplace on websites, and existing developer practices have been cited as reasons to introduce elements such as <header>, <footer> and so on.

The <main> element would have multiple uses. It could be used to navigate to (and recognise) the main content area of the page. For example, screen readers could provide a shortcut that moves focus to the start of the main content area, informing the user with a short announcement. This behaviour is possible with role="main", but building the capability into HTML makes life easier for developers. The <main> element could also provide a more consistent hook for ‘skip to content’ links, and a reliable mechanism for styling the main content area of the page.

Another school of thought says that the main content area of a page can be determined by a process of elimination. It’s the first piece of content that isn’t inside the <header>, <nav>, <aside>, or <footer>. While this algorithm is OK, it isn’t as robust as a specifically defined element would be.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.