Toggle mobile menu visibility

How to make web pages accessible

Lists

There are two main types of list: 

  • Bulleted lists - also known as unordered lists 
  • Ordered lists - these are usually numbered 

Using bulleted or ordered lists to format any lists on your webpage will make it easier to read. This is because they can break up long sentences and make the information easier to scan. 

Using bulleted or ordered lists can also help people using assistive technology. They will help them understand your webpage. 

For example, when screen readers come to a bulleted or ordered list, they will tell the user there is a list and how many items are in it. This helps users orientate themselves and understand the information. 

Good example: 

'To receive support from the Client Hardship Service you must: 

  • Be 16 years old or over 
  • Live in Norfolk 
  • Be claiming a means tested benefit' 

Good example: 

  1. 'Press the "Borrow" button on the screen  
  2. Scan your library card, by holding it with the barcode facing up underneath the bottom of the screen 
  3. Place the item(s) on top of the shelf' 

Bad example: 

'To receive support from the Client Hardship Service you must be 16 years old or over, live in Norfolk and be claiming a means tested benefit.' 

How to create accessible lists 

You must make sure that any bulleted or ordered lists on your webpage are presented using the following HTML elements: 

This will: 

  • Help you format lists consistently 
  • Mean assistive technology correctly identifies the content as a list

Don't place non-list content within your lists. For example, don't insert a table or image between two bullet points. This can cause accessibility issues.

Instead, place the non-list content after your list. Or consider using text headings instead of a list.

Don't insert empty lines between list items. This can cause accessibility issues.

Other useful resources 

Share this page

Facebook icon Twitter icon Email icon

Print

Print icon