Page structure

Language attribute

  • Declaring a language attribute on the HTML element enables a screen reader to read out the text with correct pronunciation.

    <html lang="en_GB">

  • Specify a language with the lang attribute on the html element.

Landmarks

There a 7 landmarks that should be considered – If the site is using HTML5 (required for any new sites) then the HTML5 tags below should be used. If this is not possible then the equivalent ARIA “roles” should be used on the containing <div> tag, for example

HTML5 : <header>

Non HTML5 : <div role=”banner”></div>.

HTML 5ARIA Role
<header>role=”banner”
<nav>role=”navigation”
<main>role=”main”
<footer>role=”contentinfo”
<aside>role=”complementary”
<section>role=”region” *
<article>role=”article” *
nonerole=”search”
<form>role=”form”

* The region and article roles are not ARIA landmarks but should still be used where appropriate

How should these landmarks be used:

  1. Header role=”banner” A region of the page that is site focused. Typically your global page header.
  2. Nav role=”navigation” Contains links to navigate to different pages of a website, screens of an application, or a sections within a single document.
  3. Main role=”main” Wraps the focal content of document. Use only once.
  4. Article role=”article” Represents an independent item of content such as a blog post or news item. There may be many articles in a single document. articles are not considered landmarks, but screen readers may still surface articles when navigating by regions or landmarks in a document.
  5. Aside role=”complementary” Supporting section related to the main content even when separated (for example, the sidebar).
  6. Section role=”region” A section is a thematic grouping of content, typically with a heading
  7. Footer role=”contentinfo” Contains information about the document (meta info, copyright, company info, etc).
  8. role=”search” Add a `search` role to your primary search.

Document outline

  • Use semantic headings and structure. For example, ensure that heading tags are appropriately nested and that every page has a single h1 tag that describes the page’s content.

While new HTML5 standards do suggest that multiple H1 tags can be used for articles and sections, screen reader software and W3C guidelines haven’t quite caught up with that as a standard.

  • Look at header, footer and sidebar.
  • Ensure all sections have a header even if that header is only available for screen readers or those viewing the site without css.