A list is a cluster of related pieces of information, either unordered or sorted by importance or sequence. They are a good way to break up and shorten large chunks of information making them easier to read and understand.
Lists are usually visually distinguished from the main body of the text by indentation and numbers or bullet points. Blind users lack these visual cues, so the coding of lists is important for helping them to navigate. For example, screen reader software will often announce the length of a list so users will know how many items to expect.
Clear presentation of lists is helpful to all users. If your list is becoming long or unwieldy, consider whether another format might be more appropriate, for example a table or paragraphs separated by headings.
Word and other text applications will normally add the correct list formatting automatically but take care when using software that doesn’t have this function.
- create lists using correct HTML markup or list function in text applications
- use unordered (bulleted) lists as standard, and only use numbers/letters when the order or sequence of list items is important
- make sure that bullets, or other symbols, used to mark the list, are clearly visible. They need to be large enough and have sufficient contrast with the background
- create the appearance of a list using bullet points or hyphens without correctly marking it up in HTML or using list function in text applications
|May find helpful
|Blind or partially sighted screen reader user
|To understand structure of the document and navigate to a list using L shortcut
|Correctly marked up lists
|Cognitive impairment or dyslexia
|Text that is easy to decode and understand
|Information formatted as a list, rather than items separated by commas within a dense paragraph
Creating good lists
Implementing a list with structural markup means that screen readers will correctly announce it and read out list items. It also means screen reader users can navigate to the lists easily or skip past them.
Choose the right type of list for your content – numbered lists should only be used for content where the order or sequence is important.
List markup in HTML
Lists need to be marked up using correct tags. Use
<ol> for numbered lists and
<ul> for bulleted lists. Mark each list item with the
Definition list markup
‘Description’ (or ‘definition’) lists are the sort of list you may see in a glossary, with a list of terms and their definitions, or categories and their examples.
An example of a definition list:
- Sarah Philips
- Date of birth
- 5 January 1978
- 72 Guild Street
- Contact details
For description lists use a
<dl> element. Each term needs to be specified within a
<dt> tag and each description with
Screen readers differ in how they announce description lists, so think about how content within list items communicates relationships. Consider the benefits of using this type of list against another format that might be more appropriate, such as a table.
Lists in documents
Use the list function within your text application to format the list the correctly. Use bullet points, or other symbols, as default and numbers or letters for sequential order.
If your document template has list styles built in, use those, as they will have the correct list functionality already built in.
Get in touch
If you’ve got a question or suggestion share it on the Home Office DDaT Slack channel #ask-accessibility or email firstname.lastname@example.org.