Close

Accessibility tips

Our website is used by a diverse range of visitors. Here are 10 things you can do to make your page more accessible for everyone. Many of these tips can help improve your search engine optimisation too.

Make link text meaningful

Why?

Users of screen readers often use the tab key to read out links in the order they appear on the page without reading the text around them. Some screen reading software packages also build a list of links on a page and display it at the end of the page.

What is best practice?

Make link text descriptive of the page or item you get to when you click on the link. Be wary of using URLs as link text as they are not always descriptive of their content or screen reader friendly.

For example, ' Click here for more details about living in Halls' could become: ' Find out more about living in Halls'.

WebAIM's article on ' Link text and appearance' provides more good practice advice.

Include meaningful alternative text for images using the 'alt' attribute

Why?

Alternative text has several functions:

  • Screen readers will read it in place of images, which means the content and function of images is accessible to visitors with visual impairments.
  • It is displayed instead of the image in browsers if it fails to load or the user has turned images off in their browser settings.
  • It provides meaning to images in a way that can be understood by search engines, which can help with search engine optimisation.

What is best practice?

Describe the content of the image using the ‘alt’ attribute.

For example, the alternative text for this image could say ‘A picture of our Clive Booth Postgraduate centre student hall’.:

A picture of our Clive Booth Postgraduate centre student hall

The code of the image tag would look like this:
<img src="https://oxb-prd-cdn-01.azureedge.net/mediacontainer/medialibraries/oxfordbrookes/images/student%20life/accommodation/prospective%20students/clive-booth-pg-centre.jpg" alt="A picture of our Clive Booth Postgraduate centre student hall" />

For images that are acting as links, the alt attribute acts as the link text as well as describing the content of the image.

Best practice for this is described well by Sitepoint in their article '  Making Accessible Links: 15 Golden Rules For Developers':

  • You don’t need to add the word ‘link’, and you also don’t need to add the word ‘graphic’ or ‘image’, as screen readers identify images to their users as well.
  • You do need to be careful when creating alt attributes for image links, because the alt attribute has two requirements: it must describe the image and it must tell the user what activating the link will do.  
  • For an image button then an alt attribute like ‘Search’, ‘Find’ or ‘Submit’ is great, but avoid using the word ‘Go’ as I’ve found users don’t understand that terminology (‘Go where?’ they ask).  
  • If you do have a linked image next to a text link that goes to the same page, then in most cases that image needs an empty alt attribute.

Minimise the use of strong (bold), italic and UPPERCASE text

Why?

Strong, italic and UPPERCASE text is often used to emphasise particular words or phrases but is not easy to read, particularly when applied to large chunks of text. Particularly for people with dyslexia.

What is best practice?

Use these styles for emphasis only, and sparingly. Oxford Brookes’ visual identity allows the use of uppercase text in headings but this should not be included in main paragraphs of text.

Structure your content using proper heading tags in the correct order

Why?

The structure of your page enables screen readers to determine its hierarchy. It also helps search engines determine the importance of content on your page and makes your pages easier for visitors to scan. 

While reading the page, a screen reader will indicate to users which elements are headings. It can also read out all headings on a page to help the user scan the content to find the part that is relevant to them. 

What is best practice?

Avoid using the <bold> or <strong> tag for headings. If the text is a heading, you should use an 'h' tag (such as <h1>, <h2>, <h3>). If text needs to be emphasized semantically within a paragraph, use the <strong> tag.

Include a <h1> heading at the top of your page. The next level headings should use <h2>, and headings underneath each of those should use <h3> etc.

For example:

<h1>Ten ways to improve the accessibility of your web pages</h1> 
    <h2>1. Do not use ‘Click here’ for link text</h2>                                             
    <h3>Why?</h3>                                             
    <p>Users of screen readers often use the <b>tab</b> key to read out links in the order they appear on the page, without reading the text around them. Some screen-reading software packages also build a list of links on a page and displays it at the bottom.</p>
   <h3>What is best practice?</h3>                                             
    <p>Make link text descriptive of the page or item you get to when you click on the link.</p>                                           
    <p>For example, '                 
        <a href="http://www.brookes.ac.uk/">Click here</a> for more details about living in Halls' could become: '
        <a href="http://www.brookes.ac.uk/">Find out more about living in Halls</a>'.</p>                                 
    <h2>2. Include meaningful alternative text for images using the 'alt' attribute</h2>                                             
    <h3>Why?</h3>                                          
<p>Alternative text has several functions:</p>

Keep your written content clear and concise, avoid complex language unless necessary

Why?

Using plain English is good practice for all web content. People want to find the information they need quickly and easily. For users with literacy difficulties or those using screen readers, keeping your text clear and concise will help them find and understand the information.

What is best practice?

To meet accessibility guidelines, content should not exceed a reading level more advanced than lower secondary education (between 11 and 13 years). This equates to a score of between 6-8 on the Automatic Readability Index (ARI).

Ensure important video content has a text alternative

Why?

Including a text alternative enables users with a visual or auditory impairment to access the content of the video. It is also helpful for other users, for example people who cannot have their sound turned on.

What is best practice?

Use captions and / or transcripts for your videos. YouTube has an automatic subtitling function but remember to check/edit them before your video goes live, as they aren't always accurate.

Here are some sites that provide further details:

Avoid including important text within images. If you can’t avoid this, include the text in the alt attribute as well.

Why?

Users of screen readers or text-only browsers may miss important information if it is included as part of an image, rather than as real text. 

Images of text also do not scale well - if a user resizes the website using their browser’s zoom function, the text will become fuzzy and difficult to read. 

They can also make your page take longer to load, which will encourage users to leave the site.

What is best practice?

Wherever possible, don't include text as part of an image. Instead, float the text over the image using CSS or display it above or beneath it.

This may not always be possible (for example, embedded logos), in which case try to provide meaningful alt text.

Ensure the colour contrast for text on coloured backgrounds is suitable

Why?

Low contrast text / background colour combinations makes text difficult to read for all users, especially those with visual impairments and some learning disabilities.

What is best practice?

Not all colour combinations available in our current visual identity are fully accessible, so bear this in mind when choosing colours for your pages. The style guide has a page that demonstrates the colour contrasts for text / background colours in our palette so you can see how accessible each one is.

We are looking at alternative approaches to components in the style guide to improve their accessibility, and, longer term, colour contrast will be considered within our wider visual identity.

Make sure your pages have a <title>, a meta-description and a <h1>

Why?

These three tags are particularly important for screen readers and search engines because they help the user / search engine work out what the page is about and how relevant it is.

What is best practice?

Your <title> should describe the page concisely and accurately. Search engines give great importance to the words in the page title.

Your meta-description should provide a brief summary of the page's content. Aim for a maximum of 160 characters, as search engines may not read or display characters beyond this point.

The <h1> should describe the page concisely and accurately, similarly to the title tag. It should ideally be the first element within the body of your page, and you should only have one <h1> on a page.

Use PDFs and Word documents appropriately, and make sure they have been created in an accessible way

Why?

Although PDFs and Word documents are readable by screen readers they can be inaccessible if their structure and styling does not adhere to good practice.

What is best practice?

Word and PDF documents share some accessibility principles with web pages - good practice for headings, alternative text for images and links is very similar.

WebAIM's 'Creating accessible documents' article provides a good overview of the things to consider.

Further reading