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:
- 'Press the "Borrow" button on the screen
- Scan your library card, by holding it with the barcode facing up underneath the bottom of the screen
- 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:
- Bulleted lists: <ul> and <li>. Go to an example of accessible HTML for a bulleted list
- Ordered lists: <ol> and <li>. Go to an example of accessible HTML for an ordered list
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
