Digital Accessibility Fundamentals: Document and Page Structure

Explore a high-level overview about use of titles and headings to make the structure of your page or document more clear to everyone.

Document and page structure

 

Whether you are building content in a Word document, PDF, Mass.gov, or a website, structure is very important. Use tools within the authoring application you are using to format things like headings and lists. The first thing to remember is to always follow proper heading structure. This helps screen reader users to understand the organization of your content, and to navigate with shortcuts. When building a web page, landmarks can be used in addition to headings to increase accessibility.

Headings

Headings often appear as text that is bold or larger than the body text. The visual style of headings doesn't have any accessibility requirements beyond standards for text and color contrast. They can look however you want to design them. However, the proper paragraph formatting should be applied.

You will find different heading levels (H1-H6) available in Word (in the Styles Pane), Mass.gov (in the toolbar at the top of the text editor), and in HTML. Your primary heading 1 (H1) describes the content of the document or page, and acts similarly to a title. A document or page should only have one H1 level heading. The rest of the headings on the page should follow an outline format under that H1. 

Here's an example of the simple heading outline for the homepage of Mass.gov:

• H1 - Welcome to Massachusetts
  • H2 - Popular searches
  • H2 - Featured
  • H2 - News and updates
    • H3 - Urban tree-planting grants
    • H3 - Hurricane safety tips
    • H3 - Find a fishing spot
      • H4 - Follow us on social media

Heading structure may be more complex, depending on how much content is on a page. It is important not to skip heading levels. Don't choose your headings based on how the text looks. If you want to change how the text looks, you can do so without changing the heading level in Word or in HTML. Mass.gov has text styles tied to the heading level, so you won't be able to make changes to how those headings look. Following are correct and incorrect examples of heading order.

Correct Correct +

• H1
  • H2
  • H2
    • H3
  • H2
    • H3
      • H4
  • H2

Incorrect Incorrect +

• H1
  • H2
    • H4
    • H4
  • H2
    • H5
  • H3
  • H3

Titles

A document or page title is always important, and doesn't happen automatically. For a document, it isn't the same thing as the file name. On a web page, it isn't the same thing as a Heading. A title must be set in the metadata in a Word document and a PDF, and on a web page in the HTML.  While headings tell the user where they are in your document or page, the title tells a user what document or web page they are on. This is especially important if a user would have multiple documents or web pages (tabs) open at the same time.

Generally, your title will be similar to your Heading 1 (H1), but it may contain a little more information such as your agency name. If that is the case, the unique information should go first, rather than the agency. For example, on a web page:

Title: Unemployment Application - Department of Unemployment Assistance (DUA)

Heading 1: Unemployment Application

Avoid using generic titles that might be used for another document or page from another agency. Here is a comparison of a good title and heading, and one to avoid:

Good title example Good title example +

Title: Veterans' Programs and Services - Commonwealth of Massachusetts

Heading 1: Veterans' Job Programs and Services

Bad title example Bad title example +

Title: Programs and services

Heading 1: What would you like to do?

In the good title example, the title and heading are very similar. The title lets the user know the additional information of where the document or web page came from: the Commonwealth of Massachusetts. 

In the bad title example, the title "Programs and Services" is very generic. This could be for any agency or any state. Also, the heading "What would you like to do?" doesn't work as an H1, because it doesn't tell the user the topic of the document or page. That could work later in the document as an H2 or H3, but a title and H1 need to identify the purpose of the document or page.

Lists

In any document or web page lists should use proper formatting. This is important for screen reader users, because it lets them know how many items are in a list, and when each item starts and ends. If list formatting is not used, lists will be read out as a paragraph of text, and the screen reader user will not be able to easily navigate between each list item.

If you are using a text editor like the one in Mass.gov, or making a Microsoft Office document, be sure to use tools for ordered (numbered) or unordered (bulleted) lists. If making a web page in HTML, it's also important that you use the appropriate ordered <ol> or unordered <ul> tags.

Next steps

Learn more about structure in Word

Learn more about structure in PDFs (Link coming soon)

Learn more about structure in HTML (Link coming soon)

Explore more accessibility fundamentals