Build Better Page Structure

Here is how assistive tech interacts with structural elements of your website:

• Titles: When first landing on a web page, the screen reader will announce the page title.
• Headings: Users can quickly skim the page contents by listening to the headings, which provides the page structure and hierarchy. Headings can also act as page navigation. The screen reader allows a user to jump to any heading on a page.
• Multi-Column Pages: Content is described in a linear fashion by the screen reader. As such, even three-column pages are described as a single column starting with the entire first column, then second and third columns. Side-by-side items that look related visually may become read out of order on a multi-column page.

Create titles and headings that describe your content

A page title is the name of the web page document, whereas headings label chunks of content within a webpage and function to create the page outline and structure. 

Not only is the page title announced by screen readers when a person first visits the page, but the title also appears as the browser tab label and as page titles in your search results. As such it is best to create titles that are brief, but meaningfully describe your page content.

In turn, write headings that accurately describe each section of content within the page so your users can accurately understand the organization and content of your page.

Tip: Content management systems often combine the page title, section name, and website name in page titles. If the CMS allows you to set an order for these titles, it is best to include the page title first so it is the first to be announced by a screen reader or other assistive technology. For instance, this page is titled — “Build Better Page Structure | ALA Accessibility Resources for Libraries” 

Use headings to give your content a logical hierarchy

Use headings to outline your content— similar to a page outline or table of contents. Use headings in order and don't skip heading levels. You can control this order in most web page builders, such as WordPress and LibGuides, and in document editors, such as Microsoft Word. Here’s a page structure example for LibGuides:

• H1 LibGuide Title
  • H2 Box Title
    • H3 Section inside a box
      • H4 Sub-section
      • H4 Sub-section
    • H3 Section inside a box
  • H2 Box Title
    • H3 Section
    • H3 Section
      • H4 sub-section
      • H4 sub-section

Use headings instead of text size to indicate importance

• Don't change font-size alone to signify headings. This would not be understood by a screen reader.
• Similarly, don't change heading levels simply to make text larger or smaller. This can alter your page outline and make it difficult to understand.
• If you need to change the heading's font size, do so after making it a heading.
• Better than using the font size menu, customizing your CSS can resize headings across your entire website.