List Rules

HTML Markup Details

ul element with li element

The ul and li elements can be used to create unordered lists of information.

The default rendering of an unordered list uses a solid black circle as the bullet for each item; this default can be modified to a variety of shapes including discs, circles and squares using the CSS list-style property.

Custom bullets can be defined using the CSS background-image property or the CSS list-style-image property. See more detailed description of these properties.

ol element with li element

The ol and li elements can be used to create ordered lists of information.

The default numbering of items in an ordered list uses decimal numbers starting from one (1).

The numbering style and current list number can be changed using the CSS list-style-type property. Possible values include decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian or none.

ol:start element

The value attribute can be used to set the starting number for an ordered list.

li:value element

The value attribute can be used to set the number for the current li element.

dl element with DT and dd element

The dl element can be used to create lists of definitions.

The dt element is used to itemize each term to be defined. One or more dd elements follow each dt element and provide definitions for the term.

CSS Properties

list-style-type

The CSS list-style-type property is used to change the default rendering of bullets and numbering of ordered (ol) and unordered lists (ul).

background-image

The CSS background-image property can be used on li elements of unordered lists to create custom bullet images.

This is much better than using the img element in the HTML code since there is no need to define alt text for the image, and updating the image can be done easily through modifying the CSS rather than direct editing of the HTML code.

This is also more flexible than the list-style-image property since it provides an option to vertically center the image.

list-style-image

The CSS list-style-image property is similar to the background-image property, but provides less control over the vertical positioning of the bullet image. The vertical position is fixed by current browsers, i.e. Internet Explorer, Mozilla/Firefox and Opera, to the value "top" which often makes the bullet image appear offset.

Accessibility Evaluation Rules

List Evaluation Rules

no.	FAE 2007	FAE 2008	Description
1	N/A	Pass/Warning	If consecutive p elements include a string of non-space characters followed by a period or right paranthesis character (")"), the markup may be representing an ordered list of items. If the markup is representing an ordered or other type of list, it should use HTML list markup with CSS for styling.
2	N/A	Pass/Warning	If consecutive p elements contain an img element with the alt attribute content that includes a single character or the null content, it may be representing a bulleted list of items. If the markup is representing a bulleted or other type of list, it should use HTML list markup and CSS, for incorporating the custom bullet.
3	N/A	Pass/Check	Nested lists deeper than 5 levels are difficult for people to understand, especially screen reader users. Reorganize the structure of the nested lists into sections that can be identified using meaningful section titles using heading markup.

FAE Rule Implemetation

FAE 2007

The Illinois Functional Accessibility Evaluator (FAE) currently implements FAE 2007 rules.

The Illinois Firefox Accessibility Extension currently implements these rules.

FAE 2008

The FAE 2008 rules are designed to optimize the rules for implementation of Section 508, W3C Web Content Accessibility Guidelines and Illinois Information technology Accessibility Act requirements and are based on the requirements of these standards and experience with the problems of FAE 2007.

The Illinois Firefox Accessibility Extension currently implements some of these rules.