Content appears like a list but is not marked up as such.

Link to Content appears like a list but is not marked up as such. copied to clipboard

Rule ID:: semantic-list
User Impact:: Serious
WCAG :: 1.3.1.f

Rule

Lists MUST be constructed using the appropriate semantic markup.

Background

People who can see are able to look at a list and get a sense that it is a list, how large it is, and its structure — whether there are multiple lists, nested lists, etc. People who are blind depend on screen readers for this information. Lists must be marked semantically in a way that correctly identifies the list structure and type: unordered, ordered, or description/definition. When list markup is correctly applied, screen readers are able to notify users when they come to a list and tell them how many items are in a list.

To fix this issue, use a semantic list.

Code Examples

Good Examples:

Unordered List:

<h3>Fruit:</h3>
<ul>
  <li>Strawberries</li>
  <li>Papaya</li>
  <li>Mangos</li>
  <li>Kiwis</li>
</ul>

Ordered List:

<h3>Selected Cheeses, from best to worst:</h3>
<ol>
  <li>Truffle Brie</li>
  <li>Goat</li>
  <li>Pecorino</li>
  <li>Gorgonzola</li>
  <li>Ricotta</li>
  <li>Cottage</li>
</ol>

Description List:

<h3>Acronyms Relating to Internet Technologies:</h3>
<dl>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
  <dt>HTML</dt>
  <dd>Hyper Text Markup Language</dd>
  <dt>HTTP</dt>
  <dd>Hyper Text Transfer Protocol</dd>
  <dt>WWW</dt>
  <dd>World Wide Web</dd>
</dl>

Failure Examples:

Fake unordered list:

<h3>Fruit:</h3>
<p>
  *Strawberries
  <br>
  *Papaya
  <br>
  *Mangos
  <br>
  *Kiwis
</p>

Fake ordered list:

<h3>Selected cheeses, from best to worst:</h3>
<p>
  1. Truffle Brie
  <br>
  2. Goat
  <br>
  3. Pecorino
  <br>
  4. Gorgonzola
  <br>
  5. Ricotta
  <br>
  6. Cottage
</p>

Fake description list:

<h3>Acronyms Relating to Internet Technologies:</h3>
<p>
  CSS - Cascading Style Sheets
  <br>
  HTML - Hyper Text Markup Language
  <br>
  HTTP - Hyper Text Transfer Protocol
  <br>
  WWW - World Wide Web
</p>

How To Fix

Fix this issue by using ONE of the following techniques:

Unordered list: Wrap a series of <li> list items inside a <ul> unordered list element. Unordered lists should be used when a set of items can be placed in any order.
Ordered list: Wrap a series of <li> list items inside an <ol> ordered list element. Ordered lists should be used when the list items need to be placed in a specific order.
Description list: Wrap a series of <dt> term and <dd> description pairs inside a <dl> description list element. Description lists should be used when defining or describing a list of terms.

Don't do this:

Create visual unordered lists that are not marked up semantically, such as by using <br> breaks and asterisks instead of automatically-generated bullets in a <ul> unordered list.
Create visual ordered lists that are not marked up semantically, such as by using <br> breaks and numbers instead of allowing the browser to number the items automatically with an <ol> ordered list.
Create visual description lists that are not marked up semantically, such as by using <br> breaks and hyphens instead of <dl> description list syntax.