Go to the Students section
Go to the Staff section
Go to the Alumni section
Go to the Study section
Go to the Student life section
Go to the International section
Go to the Research section
Go to the Business and Employers section
Go to the About section
Our website is used by a very diverse range of visitors. Here are ten things you can do to make your page more accessible for everyone, and many of them can help improve your search engine optimisation too.
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 Halls' could become: ' Find out more about living in Halls'.
WebAIM's article on ' Link text and appearance' provides more good practice advice.
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 Brookes bus driving past our Headington Campus’.:
The code of the image tag would look like this: <img src="http://www.brookes.ac.uk/assets/0/1425/1426/2147492045/a87f0f8f-2695-4396-830d-12e0fbd33915.jpg" alt="A Brookes bus driving past our Headington 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 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.
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.
The Title of the image in Ektron is used to populate its alt attribute if you use Ektron’s ‘library’ option to add the image to a content module.
You can override this by editing the source code of the content module and manually changing the text in the ‘alt’ attribute for the image.
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. Brookes’ visual identity allows the use of uppercase text in headings but this should not be included in main paragraphs of text.
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.
<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>
For standard pages, the <h1> tag is automatically generated from the meta title field when you create the page.
Other levels of heading can be applied to the text by first highlighting the text, then using the styles in the format tab:
The <h1> tag is reserved for page titles. The <h2> tag should be used for sub-headings.
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).
Ektron doesn’t have a built in readability checker. Instead, use hemingwayapp.com to check the readability of your copy before uploading it to Ektron (add 5 to the grade hemingway gives your copy to calculate the reading age)
You can also check readability of pages which are already live on the website, and tackle these in order of priority, using the Readability module in Siteimprove.
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:
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.
Consult the pattern library for methods of working with text and images.
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. 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.
When creating styled elements, use the pattern library to select accessible colour combinations.
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.
The <title> and <h1> are populated from the metadata title field and the meta-description comes from the metadata description field.
When you create your page you will be prompted to input a title and description:
To edit the metadata for an existing page:
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.
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.