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>
<h4>Fake ordered list:</h4>
<pre><code>&lt;h3&gt;Selected cheeses, from best to worst:&lt;/h3&gt;

<p>1. Truffle Brie<br> 2. Goat<br> 3. Pecorino<br> 4. Gorgonzola<br> 5. Ricotta<br> 6. Cottage</p>

<h4>Fake description list:</h4>
<pre><code>&lt;h3&gt;Acronyms Relating to Internet Technologies:&lt;/h3&gt;
  &lt;p&gt;CSS - Cascading Style Sheets&lt;br&gt;
  HTML - Hyper Text Markup Language&lt;br&gt;
  HTTP - Hyper Text Transfer Protocol&lt;br&gt;
  WWW - World Wide Web&lt;/p&gt;</code></pre>

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.

References