Creating Accessible Webpages

In 2021 over 1 million homepages were tested for accessibility but only 2.5% conformed to guidelines.

Online accessibility is ensuring that your website and its contents can be accessed by as many people as possible including disabled and non-disabled users. The aim of online accessibility is to remove barriers that might prevent a user from fully interacting with your website, regardless of their ability or circumstances.

You may think that the accessibility of your website is the responsibility of the web team or the web developer who built the site or that it is expensive or difficult to achieve. This is not necessarily true.

Within your organisation, many people contribute to and have an impact on your website’s accessibility.

• Does your HR team write job descriptions and job specifications which are used online?
• Does your marketing team upload images and write articles for your website and social media?
• Does your admin team create Word or PDF documents which are used online?

Everyone who contributes to information that is used on your website needs to consider online accessibility. There are some elements of accessibility that you will need the help of a web developer to implement, but there are improvements you can make right now, with just a little bit of knowledge and technical know-how.

1. Use clear and simple language

Avoid the use of jargon or unexplained abbreviations. Be consistent with the language used.

2. Use clear and detailed instructions

If users are expected to undertake actions on your website, do you explain or give instructions? Are error messages clear and helpful?

3. Flexibility and Alternative options

Be open to offering alternative ways for people to engage with you. Give examples of this on your website with contact information for support.

4. Page Structure

Use appropriate headings and subheadings (using the H1 – H6 options), break-up large areas of text and be consistent in your style throughout. If using hyperlinks, always underline as well as using the blue colour and consider also using bold.

This gives structure to a page and helps screen readers and keyboard navigators move through the content and not miss relevant information or links.

5. Add alt text to images

Alternative text (alt text) on images provides a detailed description of what the image shows, which assists users with a sight loss and those who struggle to interpret images. Screen readers are unable to describe the image if there is no alt text. This is especially important if you use infographics or icons to provide essential information. Plus, alt text also assists with your Search Engine Optimisation (SEO).

The following points may need to be addressed by a web developer, but anyone can test them for accessibility:

6. Keyboard Navigation

Can you navigate your website without using a mouse? You can check this by using the tab key to navigate a web page, online form, or downloaded document. Can you move through the page in a logical order and do you know where you are on the page i.e. does your website use focus indicators?

7. Online Forms

Is there colour contrast? Is it clear where you are to fill out information? Does the form use placeholder text and when you start typing do the instruction disappear? Often placeholder text is not read by screen readers. Do you have the option to ‘view password’ if users are required to create an account or log-in?

8. Error Messages

Does the message clearly state the problem and how to fix it? Remember, don’t only rely on colour to highlight an error.

9. Colour Contrast

The difference, or ratio, between the text colour and the background colour on a website. Colours are often chosen to match the company’s branding but we don’t consider the impact this could have on some users. You will generally find that larger text is more forgiving than small text, due to its size, it’s naturally easier to read. Which is good news for using colour on bigger headings and things like that.

10. It’s good to Review!

When did you last review your website?

Thanks to our web development partners Cole AD for collaborating on these top tips.