How to make web pages accessible

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.' 

Accessible list formatting  

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  
• Nested lists: 'li', 'ul' and/or 'ol'. Go to an example of accessible HTML for nested lists  

This will:  

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

Watch a demo of VoiceOver screen reader reading lists.

How to check lists 

1. Open the web page in a web browser, like Microsoft Edge or Google Chrome. 
2. Check any lists are formatted using the correct list HTML elements: 

• Install and use the lists bookmarklet; or 
• Open the browser developer tools (devtools) and look for the heading elements (eg. 'li' and 'ul' or 'ol') in the HTML 

How to edit or add lists 

Most content management systems (CMS) allow web page editors to edit or add lists in at least one of the following ways: 

• Manually edit or add list elements in the HTML 
• Apply list formatting to text using a toolbar 

For example, when editing a SharePoint site page, editors can apply list formatting using the 'Bulleted list' and 'Numbered list' buttons in the text formatting toolbar.