Skip to main content
LifeworksInclusive Guide

1. Page structure

Including critical page structure elements allows your website to be understood by various methods that interact with it.

Setting a proper and unique title, the document language, and basic meta-tags is useful for everyone, from mouse to touch screen and keyboard users, as well as screen readers and voice control users, and social media sharing and SEO bots.

🪄

Putting it into action

  • Include a mechanism to skip repetitive content blocks, such as the main site menu. The most common approach is to use a "skip navigation" link to enable users to navigate the page easily. Implement this link as the first element on your webpage by including it as a hidden button only brought to view when focused. When pressed, this button will take the user down to the main landmark, which should contain the webpage's main content.
  • Use semantic HTML whenever possible by using the correct tag for the job. For example, when creating a heading, use a <h2> tag; for a button, use <button>. Using the correct semantic element makes your job a lot easier in enabling assistive technologies such as screen readers to understand the content and structure of your webpage.
  • Set a default language for your document. You can set this globally using <html lang= "en-ca">. This default will help screen readers pronounce words and punctuation correctly.
  • Set a unique page title for every page using the <title> tag. This title is the first thing read by screen readers when a page loads, so it sets the context of what the user can expect to find on the page.