Writing guide for accessibility on the web
We build accessible websites. To sustain an accessible website, the content also needs to be carefully considered. For the past few years, we’ve been providing documents for clients with guidance. We’ve now decided to share the advice online and use this post as a reference point that we can keep updated.
General good practice
Content should be easy to read. Be concise. Keep paragraphs short. Sentences should be 10-15 words max.
Put your page content into chunks. Only have one topic in a paragraph. Use headings.
Put the most important content at the top of the page. Also known as the inverted pyramid. Your introductory sentences or paragraphs for any key landing pages are prime real estate for your messages. The goal is to capture the interest of site visitors and provide them with the information they need.
Don’t think of a website as linear (like a book). People will jump around pages and scan paragraphs. Consider that any web page can be accessed out of context. For example, a user may come directly to a web page through a search engine rather than from the home page of a site. Keep this in mind when writing the content for your pages.
Use the words your users use. By using keywords and keyphrases that your users use, you will help them understand the copy and will help optimise it for search engines.
Identify your users’ tasks. People come to your website with a specific task in mind. When developing your site’s content, keep your users’ tasks in mind and write to ensure you are helping them accomplish those tasks. If your website doesn’t help them complete that task, they’ll leave. You can use these tasks to inform page names, navigation and heading structure.
Avoid jargon. Explain all abbreviations and acronyms, unless they are well known and in common use – for example, VAT. Don’t refer to your own organisation as an abbreviation and acronym – people won’t know what it means.
Keep your content fresh. Outdated web content will confuse your users. It also degrades the user’s trust in your information. Add fresh content (text, images, video) as often as possible. Search engines will also prefer your side if it is kept updated.
Headings
Sighted people will visually browse a page using headings. People with screen readers will use headings to browse content. Search Engines will scan your pages for headings and give them priority over paragraphs.
Headings should be
- Be short and direct
- Meaningful and be able to stand on their own and be understood out of context
- Be search engine friendly
Headings are marked up in the HTML (they are not simply bold paragraphs). Headings available are H1 (heading 1) to H6 (heading 6).
An example of a heading structure:
H1: Running shoes are brilliant
H2: Why we think running shoes are brilliant
H3: They come in lots of colours
H3: They’re good for walking too
H3: They’re comfortable
H2: Where should you buy your running shoes?
H3: The best local sports shops
H3: Our favourite online sports shops
You don’t need to use a Heading 1 (H1) as this is the page title. If you are writing content, use H2 onwards.
Questions often make great headings.
Links
Sighted users will visually browse a page for links. Visually impaired users may use a screen readers to jump between links to find content. Users with a motor disability can browse the page by tabbing through the links.
Links should be understood out of context. Never use ‘click here’, ‘here’, ‘read more’, or ‘more’.
If a link is to a document, you can forewarn the visitor for eg Annual Report (PDF)
Hypertext URLs (such as https://maraid.co.uk/blog/2023/08/yayoi-kusama-at-manchester-international-festival/) should be avoided. Screen readers will read the URL letter by letter, which would be very difficult to interpret for a user. Short URLs may be used occasionally if the point is to convey what the URL is to the user, such as for a website homepage, such as https://www.gov.uk. However, if this is not necessary, then it’s better to display links as readable text, such as ‘Maraid Design website’.
Yes: For more information, visit the Maraid Website.
No: To find out more about Maraid, click here.
No: To find out more about Maraid, visit https://maraid.co.uk
Consider what content can be a link to help people – email addresses etc. Don’t make people go and search for something you mention if it already has a page somewhere.
Don’t format any content to be underlined. Visitors to the web see underlined words as links.
Lists
Use a bulleted list to break up content. Write a short sentence and support it with bullet points. Do not end sentences in a bulleted list with a period – periods stop the eye from scanning.
There are two types of lists. Unordered list (bullet points) and ordered list (numbers).
Lists are also useful to visitors using a screen reader. When a screen reader encounters a list, it will announce:
- The size of the list
- The position of each item in the list
- When the user has left one list and has entered another
Search Engine Optimisation (SEO)
Keywords are single words, while keyphrases are made up of a few words.
Search engines will give weight to where keywords and keyphrases are on the page. Consider the page title, headings H1-H6, paragraphs and position on the page (higher up is stronger).
Key phrases have more strength than single words. If someone searches for ‘Web Design Glasgow’ our site will appear higher in the search list if we have used that phrase rather than the same words separately on the page.
Images and alt text
Alt text (alternative text) describes the appearance or function of an image on a page. Alt text is read aloud by screen readers used by visually impaired users, displays in place of an image if it fails to load and is indexed by search engine bots to better understand the content of your page.
The best format for alt text is sufficiently descriptive but doesn’t contain any spammy attempts at keyword stuffing. If you can close your eyes, have someone read the alt text to you, and imagine a reasonably accurate version of the image, then you’re on the right track.
Don’t use images with text on them. Logos are probably the only time you will want to use images with text on. Add alt text to all logos.
Multimedia
Videos are a great way to get your information across. Create transcripts and captions for multimedia. Consider the file size and how much energy and bandwidth is being used.
Leave a Reply