Ten ways to improve the accessibility of your web pages

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

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

    2. 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 Brookes bus driving past our Headington Campus’.:
    A Brookes bus driving past our Headington Campus

    The code of the image tag would look like this:
    <img src=”/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.

    How to do this in Ektron

    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.

    3. 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. Brookes’ visual identity allows the use of uppercase text in headings but this should not be included in main paragraphs of text.

    4. 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="/">Click here</a> for more details about living in Halls' could become: '
            <a href="/">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>

    How to do this in Ektron

    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:

      Heading styles in Ektron

    The <h1> tag is reserved for page titles. The <h2> tag should be used for sub-headings. 

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

    How to do this in Ektron

    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.

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

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

    How to do this in Ektron

    Consult the pattern library for methods of working with text and images.

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

    How to do this in Ektron

    When creating styled elements, use the pattern library to select accessible colour combinations.

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

    How to do this in Ektron

    The <title> and <h1> are populated from the metadata title field and the meta-description comes from the metadata description field.

    Creating new pages

    When you create your page you will be prompted to input a title and description:

    Metadata fields for new pages

    Editing existing pages

    To edit the metadata for an existing page:

    • navigate to the page in the workarea (or click the ‘Properties’ link from pagebuilder 'edit design' view)
    • click ‘Edit’
    • click the ‘Metadata’ tab and edit the title and/or description fields
    • click ‘Save’.

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