Using a mouse to navigate a website is what a lot of users do on a regular basis. Being able to move between and click on different items is no problem when all you must do is hover over a link and click. But if you rely on assistive technology to navigate between pages or the content structure of a website, using a mouse isn’t an option. That’s why it’s important to make sure your website is built with accessibility compliance in mind.

Why HTML Lists are Important for Accessibility

For users that require assistive technologies, like screen readers, to navigate websites, lists provide an easy way to navigate between items, or to skip past groups of list items. Because marking up content as lists indicates to the assistive technology that a relationship exists between all the items, the technology can offer better navigation options for the user.

Trying to replicate the visual style of a list without the markup can cause issues with navigation. It’s important to understand how best to format the content for your website so it can be understood by everyone. That includes not only marking up lists, but also using the correct type of list.

What Are the Three Types of Lists in HTML?

The three types of list tags in HTML are:

Unordered list (UL)
Ordered list (OL)
Definition list (DL)

Depending on the context, there are appropriate times to use one over another.

Unordered Lists

Unordered lists are for items that don’t have a set order or sequence, meaning the items can be re-arranged without affecting the reader’s ability to understand the content. By default, it precedes each list item with a bullet point. The valid way of starting an unordered list in HTML is with an opening <ul> tag and the ending with a closing </ul> tag. Between the opening and closing tags, the list items can be inserted using the opening <li> tag and the closing </li> tag.

Example of an unordered list:

<ul>

</ul>

Ordered Lists

For items that are listed in a meaningful sequence, the ordered list tag <ol> is appropriate to use. Examples of items that should appear in an ordered list are:

Step by step guides where the sequence of actions is important.
Lists where the number of items is important.
When the list of items has a specific hierarchy.

Example of an ordered list:

<ol>

<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>

</ol>

The output of this list type is a numbered list by default. But with some HTML manipulation, it can be changed to uppercase or lowercase letters or roman numerals by including a “type” attribute in the opening <ol> tag.

Uppercase example: <ol type=”A”>
Lowercase example: <ol type=”a”>
Roman numeral example: <ol type=”i”>

Definition Lists

When creating a list that acts like a dictionary or glossary, a definition list is best to represent that type of relationship. This includes marking up the items of the word or phrase and marking up the meaning for those items separately. For the definition terms, use an opening <dt> and a closing </dt> tag. For the definition of those terms, use an opening <dd> and a closing </dd> tag.

Example of a definition list:

<dl>

<dt>accessibility</dt>
<dd>the quality of being able to be reached or entered</dd>

</dl>

Determining When to Use a List

Just because lists are very accessible doesn’t mean they’re always the right answer. There are still times when separating items by commas or using full sentences helps the content read better.

Is Your Website Accessibility Compliant?

If you’re unsure about the accessibility compliance of your website, there’s no reason to wait for a legal notice to start making changes. Contact DiscoverTec today and we’ll give you a free accessibility consultation to help identify and remediate any accessibility issues your website might have.