Structure

Headings

Headings separate and organize the content on a webpage. When sighted users view a website they generally browse Headings to choose what part of the page they want to read. Screen reader users also browse by Headings. If they are used properly in a roughly hierarchal way they can easily browse content and skip to specific sections.

What is a heading?

The text directly above this text is a Heading level 3. The code behind it is an "<h3>" element.

Is this bold text a heading?

No, the text above is just bold text. That does not make it a Heading. A screen reader user would not be able to browse or access it as a Heading. The code behind it is just a "<strong>" element.

How do I make a heading?

For content creators:

Content management system editor interface with a dropdown full of headings 1 thru 5.

Most content management systems have a dropdown menu where you can choose Heading styles.

It is important to nest Headings in the order that they are listed. Screen reader users rely on headings to get a rough outline of the contents of the page. For example:

H1 - Page title
- H2 - A headline
  text
  - H3 - Supporting heading
    text
  - H3 - Supporting heading
    text
- H2 - A new headline
  text
  - H3 - Supporting heading
    text
    - H4 - Supporting subheading
      text

Choosing a Heading based purely on its appearance leads to confusion because it disorganizes the content outline.

For web developers:

Use heading tags and style them with CSS.

<h1>Heading 1</h1>
<h2>Heading 1</h2>
<h3>Heading 1</h3>
<h4>Heading 1</h4>

Never use CSS on a <div> to mimic Headings. Changing its appearance does not make it a Heading.

View official documentation on Headings

Lists

List elements are used for collections of related content. Clearly grouping related items as a List helps people understand the relationship. Lists are great for screen reader users because it will announce how many items are in a List and what item they are currently reading.

For content creators

Good List

The following text is a Bulleted List:

Cats
Dogs
Fish
Birds

Using the Bulleted List button in the content editing interface will put accessible Bulleted List code.

Bad list

The following text is not a List:

- Cats
- Dogs
- Birds
- Fish

It is just words separated by a dash and does not have the same structure or functionality as a proper Bulleted List.

For developers

Real Bulleted List

The following example uses real list item markup. It will be red to a screen reader with information about how many bullets exist and what bullet number is being read.

<ul>
<li>Cats</li>
<li>Dogs</li>
<li>Birds</li>
<li>Fish</li>
<ul>

Fake List Using Dashes and <br>

The following markup is not a list, it is just a paragraph with breaks. It will be read to a screen reader as dashes in a sentence.

<p>- Cats<br>
- Dogs<br>
- Birds<br>
- Fish<br></p>

View official documentation on Lists

Tables

A Table is an element used to display information in an organized format. It contains rows, columns, and cells. Visually presenting information in a table makes it easy to digest for sighted users. When tables are used properly with Table Headings it provides the same information to screen reader users.

Please note that Tables should never be used as a design tool to force non-Tabular data or information. If the Table does not have logical headers the Table is probably not being used semantically.

For content creators

Most content management systems have a way to add tables in the content area. It will open a dialog box that allows you to choose how many rows and columns to create. It also provides an option for assigning header cells. Table headers make it clear what contents can be found in each row or column. Almost every table should have table headers to define the contents of its rows or columns.

Table dialog box open with headers dropdown selected

Some tables have two header rows. Some tables only have header rows. That's ok. Choose the option that fits the way your data is formatted.

Good Table with Headers

Date	Title	Location
Friday	Adopt a cat event	Animal Shelter
Saturday	Dog training	Super Pets
Sunday	Adopt a dog event	Dog Park

This is a good Table because Table Headers were assigned in the Insert Table dialog box. Note: It is not the colors that make these Table Headers. It is because the code behind it was set to be Table Headers.

Bad table with no headers

Date	Title	Location
Friday	Adopt a cat event	Animal Shelter
Saturday	Dog training	Super Pets
Sunday	Adopt a dog event	Dog Park

This is a bad Table because there are no Headers assigned.

For Developers

Table with Headers

Note that the Table Headers use <th> instead of <td>.

<table>
       <tr>
           <th>Date</th>
           <th>Title</th>
           <th>Location</th>
       </tr>
       <tr>
           <th>Friday</th>
           <td>Adopt a cat event</td>
           <td>Animal Shelter</td>
       </tr>
       <tr>
           <th>Saturday</th>
           <td>Dog training</td>
           <td>Super Pets</td>
       </tr>
       <tr>
           <th>Sunday</th>
           <td>Adopt a dog event</td>
           <td>Dog Park</td>
       </tr>
</table>

Table without Headers

Note that the Table Headers are not marked. They are all <td>.

<table>
       <tr>
           <td>Date</td>
           <td>Title</td>
           <td>Location</td>
       </tr>
       <tr>
           <td>Friday</td>
           <td>Adopt a cat event</td>
           <td>Animal Shelter</td>
       </tr>
       <tr>
           <td>Saturday</td>
           <td>Dog training</td>
           <td>Super Pets</td>
       </tr>
       <tr>
           <td>Sunday</td>
           <td>Adopt a dog event</td>
           <td>Dog Park</td>
       </tr>
</table>

View official documentation on Tables