Page Structure
- Focus on readability and usability. Accessible websites improve the experience for all users.
- Organise content using semantic structure so assistive technologies, search engines, and website visitors understand the page hierarchy.
- Don't risk hiding key information in a side bar or column, as screen readers may read this out last on the page.
- Think mobile: make sure content (for example images and columns) will still make sense if displayed stacked on smaller devices.
Headings
- Use H1 headings and sub-headings (H2-H6) that accurately reflect the topic on the page for better SEO results and improved visitor experience.
- Don't skip over heading levels (for example moving from H2 to H4). Headings must always be in order (H2, H3, H4 etc).
- Don't use ‘bold’ to show something is a heading.
Readability
- Use short, concise sentences. If you need to use long sentences, try to limit it to one per paragraph and consider breaking it up with a dash or two.
- Use headings to split up content. Headings provide structure and meaning to your content and give readers an easy way to scan the page.
- Use shorter words when possible.
- Plain language is best.
- Define terms that may be unfamiliar first-time round.
- If you're working on a word document, consider completing the Flesch Readability Test. More information on the scores can be found on the Consumer Understanding checklist.
For more tips on writing, please refer to:
Text
- To allow assistive technologies to correctly read web pages, use proper headings to organise your information and alternative (alt) text.
- Avoid instructions based on colour or location on the page. For example, avoid ‘in the box to the right,’ or ‘select the blue button’, as this relies on the user being able to see. Combine location and text: ‘in the box to the right, titled ‘Related links and research.’
Links/buttons
- Ensure the link text describes the destination of the link.
- Avoid links like ‘read more’ or ‘click here’ as wider context may be lost when using screen readers. If you do have to use this, consider adding a title or aria-label to the link to explain it in more detail.
- Be specific about where links will lead.
- Keep ‘link text’ to 70 characters or less.
- Keep ‘button text’ to 4-5 words or less. (If a button needs further descriptive support that surrounding context does not give then micro copy can be used next to it).
- Avoid using the page URL as linking text.
- Indicate whether link is to a file, include (PDF), (word doc) etc.
- Ensure all links to the same website (e.g. www.aegon.co.uk) open in the same tab and links opening a new website (e.g. moneyhelper.org.uk) opens in a new tab.
Images
- Use alternative (alt) text on images to accurately reflect the purpose of the image and/or provide an accurate description. Example: say there is an image of a man on an escalator. Instead of saying 'an image of a man on an escalator', we'd say, 'a man wearing a backpack walking down an escalator'.
- If the image is linked, describe the link destination in the alt text.
- Be careful using images with text in them. Be sure image alt text communicates the same information as the text in the image.
- When using graphs or diagrams, include accompanying text to explain the meaning.
- For infographics or complex images with a large amount of text, its best to include a short description in alt text and a long description in adjacent text.
Video and audio
- Include both captions and transcriptions to ensure video content is accessible to all user needs.
- Use captioning and audio descriptions for video.
- Review any auto-generated closed captions for accuracy.
- Provide an accurate transcript of audio content.
- If embedding a video to a page, ensure the video is a minimum of 3/4 width of the page.
Lists
- Understand the differences between ordered (numbered), unordered (bulleted), and definition lists and use them properly.
- Avoid using lists for visual effect.
Tables
- If tables are required, they should only be used to present numerical data or short, simple text. Do not use tables to lay out content.
- Consider if the same information can be communicated via one or more bulleted lists.
- Include column/row headings to structure content and support screen readers.
- Consider including a title and a description of the table to add more context to the information it contains.