How to write accessible web content

Headings

When was the last time you read a full page of text online? Yet people still publish essay-like pages. Get into the habit of using headings to break up your text. Clear, short, well structured headings help people skim read your text and find what they are looking for more easily.

In-page headings

Think about how your text chunks up and write 1-3 word headings which describe or introduce your sections. As a general rule, use one heading per two or three paragraphs (although you can go more or less depending on your text).

Avoid repeating headings adding a different word at the end:

• About our work in Birmingham
• About our work in Manchester

works better as

• Birmingham work
• Manchester work.

Make headings as clear and simple as possible - don't use puns or make people have to think about what the section underneath could possibly be about.

Main page heading

The main heading of the page should describe what the page is about (obviously!). Stick to the short, concise rule. If you can't do this, try and put the most important words at the start. For example:

• How we can help you recruit and support your volunteers

becomes

• Volunteer recruitment and support.

Don't forget to style your main page heading as a heading1 (h1) and subsequent headings hierarchically - subsections as h2 and subsections of these as h3 etc.

Headings in content-managed sites (CMSes)

In practice, your content management system will (or should) manage quite a lot of getting the heading hierarchy right without you having to worry about it. When you create a page title, it will assign an h1 to it, so the highest-level heading you should use in stylable page content would be h2. In these how-tos there is yet more automation: step title are assigned to h2, so the highest-level heading you can use in step text is an h3. It's worth spending a little time to understand how your CMS operates so you know how to make accessible heading structures with it.

Why this works for accessibility

People using access technology (such as screen readers or screen magnification) need labelled reference points on a page to navigate by. Including important words at the start make it easier to skim read. Screen reader users often pull out a list of the page's headings and use this to work out whether the page is what they are looking for.

Text

Length

Short, clear sentences and paragraphs are good practice. Sentences should be about 10-15 words long. If what you are writing is complicated, chunk it down into a few sentences. Eg:

• Our teams work closely with children, young people and their families in-person through counselling and support groups and by providing information, advice, education and practical support to help them through their situation.

becomes

• Our teams work closely with children, young people and their families. We run in-person counselling and support groups as well as providing information, advice, education and practical support.

Structure

Put the meaning of your sentence at the start. Don't write as if you are speaking where you usually put the meaning at the end to hold someone's attention. So:

• Our new programme of helping young people get into employment is called WorkNow.

becomes

• WorkNow is the name of our new programme which helps young people get into employment.

Plain English

Avoid complicated grammar or jargon. Don't make people have to think about what you are writing. The exception to this is if you are writing for a specialist audience (eg about your medical research) - think about your audience.

Accessible links

Click here

Argh, 'click here' (or 'more info', 'read more' etc) is my pet hate - people still do it! I have heard people say that they include it for people who are not used to using the web (such as older people). This may be a valid point, but older people use all kinds of websites which have different ways of presenting their links. They are used to clicking on something which looks like a link. Click here is just lazy writing.

And it's REALLY bad for screen reader users. They often navigate round websites using a list of the links on the page. Hearing 'click here', 'click here', 'click here' means nothing away from the context of the sentence.

Good link text

Clear labelling is key here. Use meaningful text as your link text. Best practice is to use the title of the page you are linking to (or the name of the organisation).

Avoid starting links with 'the' or 'a' - start with the most important word. Also check that you are not using the same word (or sets of words) on the same page linking to different pages. Make it meaningful. Eg:

• Read our full <press release> on project X's success in 2011 and the <press release> on activity in 2010.

(where <press release> is the link text) instead becomes

• Read our full <press release on project X's success in 2011>. Last year's achievements are highlighted in the <project X 2010 press release>.

Linking to downloads

Make sure when you are linking to Word documents or PDFs you include the file type and size in the link itself. Eg

• CV templates (Word, 39kb)

This makes it very clear that when you click on the link you will open a new type of document. Not everyone can open files in their browers or on their mobiles.

Have you got it right?

Writing accessibly is not complicated - just takes a bit of practice. If you're not sure you've got it right, get someone from outside your organisation to read what you've written and give you their feedback.

• Does your text make sense?
• Can they find what they are looking for on your site?
• Will they take the action you are asking them to (donate / sign up to newsletter etc)?
• What improvements would they make?

Add to this guide

If you can think of anything I've missed please feel free to edit or add comments to the page.