AccessibilityLists

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.

Helping everyone

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.

The basics

Do:

• 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

Do not:

• 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

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 <li> tag.

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:

For description lists use a <dl> element. Each term needs to be specified within a <dt> tag and each description with <dd>.

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 UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.