Page structure

Are you using semantic elements and roles?

Why it’s important

Manaia is low-sighted and navigates pages by jumping to the page section she wants to get to.
Alan has developed a repetitive strain injury that makes it painful to use a mouse. He regularly navigates to sections on a webpage using his keyboard.

Use sectioning elements to create an outline of the page structure. Examples of these elements include header, nav, main and footer. Use content sectioning elements such as section, article and aside to organize the content into logical parts.
Add role="banner" to your masthead and role="contentinfo" to your page footer once per page to define landmark elements.
Use ARIA(this link opens an external website) landmarks for elements that are not natively accessible or if retrofitting HTML4 pages. In particular, elements developed with JavaScript, AJAX, and DHTML.

Last modified: 5 May 2021