Making a website or mobile app accessible means making sure it can be used by as many people as possible, without them having to adapt it. At least 1 in 5 people in the UK have a long term illness, impairment or disability. This includes people with:
- Impaired vision
- Motor difficulties
- Cognitive impairments
- Learning disabilities
- Deafness or impaired hearing
Currently, all public sector bodies have to meet the 2018 accessibility regulations. This includes the central government, local government, some charities and other non-government organisations.
With this in mind, we have put together a handful of tips to get you started on your website accessibility journey. The majority of which are manageable changes that you can start implementing on your website from today.
Accessible website content management systems
It’s likely that your website is built using a content management system (CMS), some of the common examples include WordPress and Drupal.
Each of these systems will come with custom built themes and templates that you can use as a basis to start building your website. Within the documentation section of the theme or template, you will be able to read the notes on accessibility including tips on how to create accessible content within the theme/template. The same applies when you are selecting modules within a page, installing plugins or widgets on your site – be sure to read the documentation notes.
One of the key takeaways here is to ensure that you have options to edit headings, tables and any videos that you upload should provide the option for closed captioning.
Accessible headings
So let’s take a further look at headings in more detail. It’s important to use headings (<h1>, <h2>, etc.) correctly and strategically, this means the content of your website will be well-organised and most of all, easily interpreted by screen readers. This means do not use a header just because it looks good visually.
Examples of proper use of headings:
- Use <h1> for the primary title of the page. Avoid using an <h1> for anything other than the title of the website and the title of individual pages.
- Use headings to indicate and organise your content structure.
- Do not skip heading levels (e.g., go from an <h1> to an <h3>), as screen reader users will wonder if content is missing.
Alt text for images
When an image is on a website page, a screen reader will read the alt text associated with the image, think of it like a verbal description.
Firstly, when putting images on your website, ask yourself if the image is there for informational or descriptive purposes. If an image is used purely for decorative purposes, you can leave the alt text empty so that the screen reader is not distracted from the important text on the page.
If the image is for informational purposes, for example an infographic – the alt text should contain the message that you wish to convey through the image. If the image includes text, include that in the alt text.
Always remember to provide an alt text for images that are used as links.
Links within text
Linking to other pages on your website or external links is totally acceptable when it comes to accessibility requirements as long as you describe where the link will go. Using descriptive text properly explains the context of the links to the screen reader.
For example, if you are pointing visitors to a page called “About Us”:
- Try not to say: “Click here to read about our company.”
- Instead, say: “To learn more about our company, read About Us.”
Accessible colours
Red-green is the most common colour deficiency, affecting approximately 8% of the population. Therefore, if you were to use colours such as these – you will prevent individuals from understanding your message.
On the other hand, users with learning disabilities benefit from colour as they find it easier to distinguish and organise information.
To satisfy both groups:
- Use color
- Use visual indicators, such as an asterisk or question mark
- Distinguish blocks of content from one another using visual separation such as whitespace or borders
There are many free tools that you can use to assist you in making your page as visually usable as possible to individuals with low vision or varying levels of color blindness.
Accessible tables
The most important thing with tables is to use them for data, not layout. The screen readers will inform the user that there is a table with “X” columns and “X” rows which can distract from the content and it may result in your content being read in the wrong order.
When a data table is necessary, for example – you have a set of data that is best interpreted in a table format, such as a bank statement – use headers for rows and columns. This helps explain the relationships of cells via the screen reader. Complex tables may have several cells within the table that have a unique relationship to each other, and these should be identified by using the “scope” attribute in the HTML editor.
Remember, you can use table captions (HTML5) to give additional information to users about how best to read and understand the table.
To find out more about how we can help you to make your website meet accessibility standards, contact us.