How to make your website accessible

Having a website is a great way of communicating with supporters and service users, however, those with disabilities such as visual impairments, auditory impairments, motor disabilities, and cognitive impairments may not always be able to access your website's valuable content. To improve your site’s accessibility, you must create a clear structure and adapt your content for assistive technologies.

Continue reading to discover more about website accessibility and practices to help make your website more accessible.

What is website accessibility?

When web professionals refer to website accessibility, they are referring to how usable your website is for people with disabilities. Software and service provider, Acquia, defines web accessibility as the “need for websites to utilise tools and technologies developed to aid the perception, understanding, contribution, navigation, and interaction of a person with disabilities on the site”. This consideration needs to be a foundation for all organisations, but particularly so for charities and community groups who must ensure that the 14.6 million disabled people in the UK are able to access their vital services and information.

The pillars of web accessibility include:

• Perceivable: Any information and webpages must be presented to website users in ways they can easily perceive. This means that all content must be available to the user to cater to at least three of the senses: sight, hearing or touch. For example, providing text alternatives for non-text content like images or videos helps those with visual and auditory impairments.
• Operable: Website components and navigation must be able to be operated with ease. This includes making all functionalities available from a keyboard for those unable to use a mouse and ensuring that users have enough time to read the content.
• Understandable: Information and the operation of the website must be understandable. This means that the content provided, and how the website is operated, must be easy to understand by all users. Clear instructions and simple language are essential to maintaining accessibility for anyone with cognitive impairments.
• Robust: Content must be structured in a way it can be interpreted reliably by a wide variety of assistive technologies. This involves using standard coding practices so that the website will remain accessible, even as assistive technologies and coding advance.

To assess your website accessibility, tools, and software such as BrowserStack and WAVE will help inform you of how accessible your website is by comparing it with Web Content Accessibility Guidelines and standards.

Read below to discover more information about how to incorporate web accessibility pillars into your website.

Accessible templates

To ensure your website has the same, simple page structure throughout, use an accessible template and Content Management System (CMS). An article from LinkedIn recommends using a CMS, such as WordPress or Drupal, which prioritises and integrates accessibility features directly into their frameworks, making it easier for companies to create inclusive digital experiences.

Colour contrast

There are various types of colour blindness that can cause colours on your site to become completely different to what you had intended, which, for example, can sometimes result in your text being indistinguishable from your background.

The simplest way to solve this problem is to ensure you do not make your site dependent on colours. Where you have important information, use a high-contrast colour scheme, such as black text on a white background. Tools such as Web Content Accessibility Guidelines (WCAG) contrast checker will help to ensure your text meets the required contrast ratios.

Fonts

To provide website accessibility for people who have difficulty reading or seeing, make sure you choose a font that is easy to read on your website – it must be simple, non-cursive and a size that is not too small for the average user. Scope for business recommends choosing fonts that are familiar, with characters that all look distinct from one another, for example Arial, Helvetica, or Tahoma.

If your website runs on WordPress, you may wish to consider installing a font resizer plugin, which enables users to increase text size to their own preference.

Alternative text

DreamHost shares how ALT text should be added to all your site’s non-text content to make it accessible to people with visual and auditory disabilities – this can usually be added to images when you upload them to your CMS. Providing descriptive ALT text for each image ensures that screen readers can convey the content and purpose of the non-text content to users. The ALT text should be concise yet informative, describing the image's content and relevance to the surrounding text.

Videos, audio, and other multimedia content must be accessible to all users. For example, audio recordings should have a transcript, and videos should come with closed captions to accommodate users with hearing impairments.

Website navigation

Website navigation is critical for enhancing web accessibility, ensuring that all users, including those with disabilities, can simply and efficiently interact with your site. Your website must be easy to move around within, where a user can easily access all the tools and information they need to use your site.

Navigation menus across all pages helps users to understand the site's structure and find their way around more efficiently – breadcrumb trails can also assist users in understanding their current location within the site and how to retrace their steps if necessary. Implementing an HTML site map also provides an overview of the entire site's structure, allowing users to quickly locate the section they need.

Keyboard navigation

Having all interactive elements, such as links, buttons, and forms, accessible via keyboard navigation is crucial for users who rely on keyboards to navigate websites, especially those with motor disabilities. According to GOV.UK, all interactions and access to content that can be used with a mouse must also be able to work using a keyboard.

Your site must be able to be navigated by using the tab key, alongside the enter or space keys, for it to be classed as keyboard accessible.

Simple content

Divide your content into easily readable sections and use H tags to clearly label your content. There needs to be a focus on making content easy to understand by keeping it short where possible and using simple language. AskEARN note that concise language is essential for helping users to navigate websites, especially for people with intellectual and learning disabilities, cognitive issues, traumatic brain injuries, and other disabilities.

To keep the content simple, avoid using dynamic content, such as pop-ups. Any features that appear in the way of content or any elements which move could be distracting, however if the dynamic content is essential, provide users with an option to remove. Avoid using rotating carousels or session timeouts, as these kinds of features not only distract users, but also do not allow enough time for the content to be digested.

As forms are a popular feature on most websites, you must check they are easy to navigate, with clear instructions and labelling for when people are completing.

Adapt for assistive technology

Blind and partially sighted people can access websites with the aid of screen readers, which dictate everything on your site back to the user. Clearly labelling all navigation links and buttons with descriptive text ensures that users, especially those using screen readers, know where each link will take them. Avoid vague labels like "click here" and instead use specific phrases like "learn more about our services" or "contact us." Consider adding skip links at the top of each page to allow the assistive technology to skip straight to the user’s desired content.

ARIA roles, a set of attributes you can add to HTML elements, help assistive technologies to interpret and navigate your content, making your website screen reader compatible. Adapting for assistive technologies helps to tailor your website’s usability and accessibility for anybody with disabilities.

Discover help & guidance for charities and small businesses, or discover more about our charity insurance and small business insurance solutions.

Please note: This article provides guidance for information purposes only. It should not be relied upon wholly when making or taking important business decisions – always seek the services of an appropriately qualified professional. The views expressed by websites referenced to are limited to those of the websites, and do not necessarily reflect the views of Markel Direct.