Best Practices

Headings help organize your document. They make digital content accessible by breaking up longer sections and giving meaningful structure to documents. Headings are not just styled bigger and bolder, but are marked up in the code and can be navigated with assistive technology tools.

How Heading Structure Works

A document’s heading structure acts like an outline, organizing content into different levels of importance. The main title (Heading 1) introduces the overall topic, while subheadings (Heading 2 and below) break the content into sections and details. This hierarchy helps readers scan and understand the relationships between sections. 

Why Heading Order Matters

Heading structures must follow a logical sequence to guide the reader smoothly. Skipping heading levels (like jumping from Heading 1 to Heading 4) disrupts this flow and makes it difficult for readers, especially those using screen readers, to understand the document’s organization. Heading 2 should follow Heading 1, and Heading 3 should only be used within sections introduced by Heading 2.

Lists make content accessible by breaking up sections, letting readers know that items are related, and making content easier to navigate. Lists are not just visually styled, but are marked up in the code and can be navigated with assistive technology tools.

When creating lists, use built-in tools to format your text as a list. Don’t just start new lines, or input special characters in place of bullets or numbers.

There are two types of lists:

• Unordered lists (with bullets) for items that have no particular order
  • Use in general, unless order is required
• Ordered lists (with numbers) for items that have a sequence or order
  • Use for steps in a process, instructions, or ranked items
  • Do not use when order is not important

Lists, when properly formatted, can have nested items. Use nested items to create hierarchy and relationships among items in a list.

Alternative text, or alt text, is a short description of an image. Alt text makes images (photos, diagrams, logos) accessible by providing a meaningful text alternative for people who can’t see, access, or process the original image. Alt text is not the same as an image caption, but is added in the document’s code and usually not displayed.

Good alt text is accurate, short, contextual, and not repetitive.

• Accurate
  • Correctly describes the content or purpose of the image
• Short
  • Not longer than it needs to be
  • A few words to a few sentences, usually limited to 150 characters
• Contextual
  • Communicates the purpose of the image in context
  • When writing alt text ask yourself, Why is this here? Not just, What does this show?
• Not repetitive
  • Does not begin with “image of,” because assistive technology already identifies the image as an image
    • Can describe format or genre, such as “photograph of students lounging near Diag,” “pencil drawing of students at a table studying”
  • Does not repeat description provided in the caption or surrounding text

Alt Text Example:

Bad Alt Text: George Washington
Good Alt Text: A painting by artist Emanuel Leutze of George Washington crossing the Delaware River

Tables are used to display tabular data, in rows and columns.Tables make content accessible by simply showing the relationships between many data points. Accessible tables are not just visually styled, but are marked up in the code and can be navigated with assistive technology tools.

Tables should be simple with one clear heading column and/or row and no merged cells.

Complex Table Example:

In this example, there is a compound header with merged cells, as well as a merged cell in the data cells. A screen-reader would not be able to correctly associate the headers with the information included. Part of the merged cells would read as ‘blank.’

Simple Table Example:

Adding a column for the subject eliminates the need for the compound heading and separating all the merged cells makes it possible for a screen-reader to associate headers with data and allow users to follow the information through audio. (Note: the header row would need to be set as a header for it to associate down to the cells below).

Links let users go to a new page or place on the web or in a digital document. Links make content accessible by making it clear where each link goes, with good link text.

Accessible link text is short, descriptive, understandable, and unique:

• Short — Just a few words, no more than 5 if possible
• Descriptive — Describes where it goes or what it does, so a user knows what will happen in advance
• Understandable — Text that is readable for humans, not a long URL string
• Unique — Not the same as other link text on the same page or document, unless it goes to the same place

Avoid phrases that are meaningless out of context such as “more,” “click here,” or “this article.” These links are confusing to people who are visually scanning content, or browsing content by links only with assistive technologies including screen readers.