Skip to content

Web pages

Home / Accessibility / Accessibility Guidance / Web pages

Make link text meaningful

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.

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 Accommodation could become: Find out more about living in Accommodation.

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

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

Alternative text has several functions:

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

For example, the alternative text for this image could say A Campus bus driving past our City Campus.

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 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.

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

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.

Use these styles for emphasis only, and sparingly. Sunderlands’ 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

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.

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.

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

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.

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

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.

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.

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.

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

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

Not all colour combinations available in our current visual identity are fully accessible, so bear this in mind when choosing colours for your pages. 

We are looking at alternative approaches to components in the style guide to improve their accessibility.

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

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.

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.