Web Accessibility: Lists

Why should we use lists? Why are lists important to web accessibility? How do are lists need to be structured in compliance with web accessibility laws?

Using ul, ol, and dl elements for defining list content ensures users with disabilities can easily distinguish a list from the rest of the content and move between items of a list and between lists themselves. You should write link text that clearly communicates the target of the link making navigation easier for all users. Using link lists also makes it easier to find and update links on web resources.

According to the Web Accessibility Guidelines (WAC), website designers and developers are required to:

Provide a text equivalent for every non-text element (e.g., via “alt”, “longdesc”, or in element content). This includes: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ascii art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video.

Lists must be displayed as HTML lists not lines of text so they are visually and contextually recognized as lists. The use of list HTML tags helps to reinforce the visual design element of a list, and screen readers for the visually impaired read these as lists.

Writing Lists to Include Users With Disabilities

  • Write Lists That Make Sense: When including a list or lists of links in your content, you should be using text that properly describes where the link will go as well as keep each list item specific to itself.
  • Color Value: Bullets and numbers should be clear and easy to identify with colored elements or graphics. The colors of the list design elements should be tested thoroughly for compliance with colorblind and visual tests.
  • Long Lists: Avoid using long lists of informational links, break them up into appropriate categories and give them a heading using emphasized text such as a bold section or heading. An alternative is to provide a jump link to skip over the long list.

Types of Lists

The following is a visual example of the various HTML lists. These are styled based on the current web design decisions and WordPress Theme. They may appear differently on other sites.

Unordered Lists: lists that don’t have a required order, but are bulleted points.

  • Grapes
  • Potatoes
  • Lettuce

The HTML is:

<ul>
	<li>Grapes</li>
	<li>Potatoes</li>
	<li>Lettuce</li>
</ul>

Ordered Lists: have a specific numerical order or ranking such as step by step instructions.

  1. Step 1
  2. Step 2
  3. Step 3

The HTML is:

<ol>
	<li>Step 1</li>
	<li>Step 2</li>
	<li>Step 3</li>
</ol>

Defintion Lists: create a list with two parts to each entry: the name or term to be defined and the definition.

This is a definition term
And this is the definition
term 2
definition 2
term 3
definition 3

The HTML is:

<dl>
<dt>This is a definition term</dt>
     <dd>And this is the definition</dd>
<dt>term 2</dt>
     <dd>definition 2</dd>
<dt>term 3</dt>
     <dd>definition 3</dd>
</dl>

Resources

Advertisements

3 thoughts on “Web Accessibility: Lists”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s