If you use lists with complex or long items, use ordered lists so that items are numbered, or include the item number within your text. Numbers make recall and navigation much easier, so you should also tell the user how many items will be in the list.
An additional problem with unordered lists is that screen reader may not pronounce the presence of a bullet or graphic that does not have ALT text.
If you are using nested lists (a list within a list), then use a different numbering system in the secondary levels than in the top level. See the Nested List section for details.
When the list is an unordered list, or a list of bulleted items, screen readers may read the list as one long paragraph. Users may not know where list items begin and end.
Reasons to design an accessible Web site
Reasons to design an accessible Web site
To give access to your information to the widest possible audience Accessible sites tend to also be more usable Accessible sites tend to be more low-bandwidth friendly To comply with Penn State policy
When lists are structured as numbered ordered lists, screen readers read each number or letter for that list, improving comprehension of where items begin and end.
Reasons to design an accessible Web site (4):
Reasons to design an accessible Web site
1. To give access to your information to the widest possible audience 2. Accessible sites tend to also be more usable 3. Accessible sites tend to be more low-bandwidth friendly 4. To comply with Penn State policy
When nesting lists, use compound numbering (e.g. 1.1) or a different numbering/lettering scheme, so screen readers can distinguish different levels. This is also advisable from a usability perspective.
University Park Colleges and Departments
University Park Colleges and Departments
1. Agricultural Sciences 1. Agricultural and Biological Engineering...2. Arts and Architecture 1. Architecture and Landscape Architecture 1. Department of Landscape Architecture.
University Park Colleges and Departments
University Park Colleges and Departments
1. Agricultural Sciences A. Agricultural and Biological Engineering...2. Arts and Architecture A. Architecture and Landscape Architecture i. Department of Landscape Architecture.
You can replace bullets with custom bullet images, using cascading style sheet attribute – list-style-image:url(path)
Penn State's two colors are:
ol.paw {list-style-image:url(examples/paw.gif)}
<ol class="paw">
<li>Blue</li>
<li>White</li>
</ul>
The list-style-image attribute replaces a bullet with the image.
Penn State's two colors are:
Item 1 Blue
Item 2
White
Site Menu:
Home Page/Main Menu
| Section 508 Guidelines
| Quick Checklist
| Details by Tag
| Links
| I.T.S. Seminar Page
| Sitemap
©1999-2006 Pennsylvania State University.
This Web page is hosted by (by Teaching and Learning with Technology, a unit of Information Technology Services. Please contact the Webmaster if you have any questions.