DEV 5.3 - Define list and list items properly
Lists, when coded correctly, can provide useful information, e.g.
- The fact that there is a list of related items;
- The number of items in the list;
- The number of the current item in the list.
Lists also add structure to a page, making it easier to read and scan.
- If something is a list, always code it as one using
<ul>
,<ol>
,<dl>
:- Include all menus if possible:
- They are logically lists - and, when style sheets are turned off, maintain structure and meaning.
- Include all menus if possible:
- Avoid using inline images to create list effects:
- Spacers, bullets, etc;
- Use lists and style the CSS.
- Code
<ul>
,<ol>
,<dl>
Properly according to standards:
- Ensure correct syntax when embedding a list with a list (see example.)
- Use CSS to alter appearance of bullets and numbers, for example using:
- List-style: disc url(newbullet.gif) outside.
Video Clip
Watch a screen reader user identify lists on a page and how this can aid browsing a page.
Alternative Formats
If you experience any problems viewing the video above or wish to download a copy to your desktop select one of the alternative formats below.
A simple nested list
<p>Items needed for holiday:</p>
<ol>
<li>Sunglasses</li>
<li>Swimming things
<ul>
<li>Swimsuit</li>
<li>Towel</li>
</li> <!-- note the placement -->
<li>Suncream</li>
<li>Money</li>
</ol>
Note: Even horizontal menus can be coded as lists using CSS, e.g.
- Use
display:inline;
on the.ul
and.li
definition or; - Use
list-style-type: none;
on the.ul
definition,display: block; float: left;
on the.li
definition.