Structuring accessible webpages

If you're developing a website, when creating webpages you should ensure you have well-structured content that is coded correctly in HyperText Markup Language (HTML). This helps create accessible webpages which everybody can understand and navigate. Headings, lists and landmark regions help colleagues who use assistive technologies such as screen readers navigate and prioritise content on the page.

How page structure can help readers

Good page structure makes it possible to scan a page to find the content you want by identifying headings and lists through styling. Colleagues who are blind and browse with a desktop screen reader or a mobile screen reader rely on these tools to announce headings and lists. These headings and lists help them understand the structure of the content on a webpage. They can also use keyboard commands and gestures to navigate between headings and lists.

When a screen reader encounters a heading it will announce 'heading' and the heading level. For example, on the Scottish Government homepage a screen reader will announce 'heading level one, The Scottish Government'. If a screen reader encounters a list it will announce 'list' and how many items are in the list. This let's someone who is blind know when text is a heading or a list item. 

Colleagues who have cognition and learning disabilities can use headings to help find, understand and prioritise content on the page. The same goes for colleagues who use reader mode on their mobile phones or their own stylesheets to read content.

How headings in HTML work

You should use the <h1> to <h6> elements to create a heading hierarchy. The most important heading, or main heading, is an <h1> and the least important heading an <h6>. A subheading of the <h1> is an <h2> and a subheading of an  <h2> is an <h3> and so on.

Image example of the 'Scottish Government' highlighted as Heading 1 (h1) and Coronavirus as Heading 2 (h2). Heading 1 is shown first:

Creating headings for screen readers

To provide the best user experience for people who use screen readers you should:

• use clear and descriptive headings so colleagues can find what they want easily and understand the relationships between different parts of the content
• only add a heading if it introduces content such as text, an image or links
• don't use the heading mark-up for visual styling (this must be done through the Cascading Style Sheets (CSS))
• think about how many headings the page needs, as too many make navigation cluttered and too few make it harder to find the right content
• consider how your headings work together with landmarks on the page (for example, you should position headings at the start of landmarks where possible)

How lists in HTML work

Lists are used to group together collections of related items where it's helpful for the user to know there's a relationship between them.

Sometimes the order of items in the list isn't relevant, for example in a list of related links in an article. In this case use the elements <ul> for an unordered list and <li> for each list item.

If the order of items in the list does matter, use the <ol> for ordered list and <li> elements. For instance, in a list of step-by-step instructions the order is important.

If the list contains term and description pairs, such as in a glossary, use the elements <dl> for description list, <dt> for description term and <dd> for description details.

Image example of Scottish Government homepage with main navigation list of links highlighted. These are not in any order, showing it's an unordered list:

Creating lists for screen readers

To provide the best user experience for colleagues who use screen readers you should:

• use list elements for main navigation so the list is clear for colleagues who can't see it
• for multiple items of content that only contain short text and an image, such as news articles listed on a page or products, add these to a list under a heading
• not use list-style-type:none; on an <ol> element, as this causes browsers to treat it like an <ul> instead

Tips

Follow these tips to improve user experience for your colleagues:

• consider lists together with headings and landmark regions, as these should all work together so every part of the page is discoverable
• work with your designers to ensure what they have designed can be made into a logical page structure
• provide a unique label for landmarks if they don't have one or there are repeated landmarks of the same type on a page