8 Ways to make your website more accessible and why it is important
In 2020, more people than ever have been using the internet with some sources reporting an increase in web traffic of 50%-70% during the first lockdown. However, with more people now using the internet, there is an increasing need to ensure that websites are accessible for all who need to use them from employees working from home to remote teachers and students. A recent study into the accessibility of the top 1 million websites found that 98.1% of their homepages failed to comply with the Web Content Accessibility Guidelines (WCAG) which contain recommendations for making web content accessible for a wide audience with a range of needs and challenges.
What is web accessibility?
Web accessibility is simply ensuring that website content is available and that website features are functionable and usable for everyone. Websites should be created and optimised in a way that ensures that all users have a good experience on the site and are able to access the information they are looking for. Unfortunately, many websites are not built considering the requirements of people with a range of disabilities and conditions, including those who depend on assistive devices such as screen readers.
Why should I make my site accessible?
Because you should care! – The web should be for everyone and checking that your site is inclusive and usable for all is morally the right thing to do.
We often hear the quote ‘do good and good will come to you’ and this is certainly the case for accessible sites. There is a large overlap in best practices for accessibility and SEO, so improving the accessibility of your site for a diverse audience also has many benefits for the SEO. In addition, focusing on improving accessibility standards on your site can also increase your audience as you are able to reach more people.
How can I make my site accessible?
Below I will outline 8 ways that you can make your site more accessible, with additional information about the bonus SEO benefits:
1. Test how accessible you site currently is using online tools
Before improving your site’s accessibility, you must first be able to identify where your site is lacking. There are many online tools to help you to identify accessibility issues, including the Lighthouse report, which is part of Chrome Dev Tools. The Lighthouse audit includes an accessibility section which can identify some issues through its automatic testing and gives you a score out of 100.
The report also gives details on the audits that failed and why as well as providing a short list of suggestions of manual checks you should make on your site.
As mentioned above, some other great ways to test your site for accessibility is to try free online accessibility tools as well as regularly checking your own site manually for potential accessibility obstacles.
Bonus SEO Benefit: Running your site through tools like the Lighthouse audit will also flag up issues in other areas of the site such as the code or metadata that you may have been unaware of!
2. Use meaningful Headings and ensure text is readable
Headings and text are particularly important for users that use screen readers. There are approximately 285 million people in the world with visual impairments, and many of these people will need to rely on screen readers in order to use websites. Screen readers take the content of the page and read it out loud for those who are not able to see the website. When a webpage first loads, the screen reader announces the Page Title and therefore it is very important that this is relevant to the content on the page and explains what the page is about. Users of screen readers also use the headings on a page to quickly and easily navigate to the area of the page that contains the information they are looking for. Hence, it is helpful if meaningful headings are used and follow a logical structure, e.g. with one H1 at the top of the page, followed by H2s, H3s etc where relevant. To aid screen reader users to access these headings and subheadings more easily, you could add a clickable table of contents at the top of the page which can then be used to directly jump to the relevant section of text. This is especially useful on long pages that contain a lot of content.
You should also check that text placed in tabs or accordions is viewable in the code as this is necessary for screen readers to access it.
Bonus SEO Benefit: Using meaningful page titles and headings is a basic SEO best practice and ensuring that all text is readable in the code is important for web crawlers who need to access the content in order to index it.
3. Make links distinguishable and ensure they are labelled
It is important to make links on the page visually obvious and easy to distinguish from surrounding text. For example, if colour is the only way that a link is identified, then users who cannot see colour will have difficulty finding the links on the page. Instead (or as well as using colour) you can underline the links or add an outline to them.
Furthermore, as with page titles and text, screen readers announce links and read the anchor text. This anchor text should include a description of the link’s destination and purpose of linking. As with visual users, users of screen readers navigate through websites using links and so it is imperative that links are all labelled (no empty anchor text) and are labelled in a helpful and descriptive way. The anchor text should also make sense out of context of the surrounding paragraph as sometimes screen reader users navigate through lists of links on a page rather than going through all of the content.
For example, rather than simply using ‘Click here’ as the anchor text, which tells the user nothing about the link, the link should instead say ‘Click here to visit our team page’.
If your anchor text cannot be descriptive, use the aria-labelled by attribute to provide addition information about the link for users of screen readers.
Bonus SEO Benefit: Anchor text is also used by search engines to determine the context of pages and links so adding descriptive anchor text is best practice for SEO.
4. Add captions and transcripts to video and audio
There are 466 million people in the world with disabling hearing loss, this is over 5% of world’s population. Without the addition of captions, this group of people are unable to engage with and full enjoy the videos on your website. In addition, it is not only those with hearing loss who prefer watching videos with captions. A 2019 study into video watching behaviour found that 69% of people report viewing videos without sound in public places and 80% say they are more likely to watch an entire video when captions are available. At Varn, we have also seen from our own internal testing that videos with captions tend to have much better engagement and performance.
It is recommended that for accessibility, videos should have closed captions and you should also provide a transcript of your video. This does not only apply to videos on your website, but also on YouTube, LinkedIn and other social platforms. There are several tools online to help create transcripts and captions or you can manually add them. Transcripts should also be added for audio files such as podcasts.
The use of video and audio on websites should also be considered for users of screen readers. For example, if a video or audio file autoplays when a webpage loads, it can make it very difficult for the user to hear the screen reader and navigate through or away from the page. (Also, nobody enjoys it when audio starts unexpectedly playing loudly when you load a webpage!).
Bonus SEO Benefit: Closed captions and video transcripts can be indexed by search engines and are therefore likely to help your videos to rank in search results pages.
5. Add alt text to your images
Alt text is very important for screen readers as they use it to describe to the site visitor what the image is showing. All images should have concise alt text which accurately describes the image and makes sense rather than just being a collection of keywords. If no alt text is provided, often screen readers will just read ‘image’ which provides no context to the user. A good way to check the accessibility of your images is to imagine that you cannot see the images and simply read through the page using the alt text as a description in place of the visual image. This will make it easy to identify if the alt text is useful and if it conveys the correct context of the page.
Bonus SEO Benefit: Alt text is used by search engines to understand the context of the image when choosing images to display in the image results. Therefore, adding descriptive alt text improves the chances of your images being shown for relevant image searches.
6. Check the contrast of your colours
According to the NHS, 1 in 12 men and 1 in 200 women have colour vision deficiency meaning that they have difficulty distinguishing between certain colours. Therefore, it is important to ensure that colour isn’t being used as the only identified for certain features on a page. For example, we often see in forms that required fields are denoted by the text being red. This can make it difficult for some users to identify the required fields to complete the form.
In addition, using certain colour palettes can also make text difficult for some site users if the colour contrast ratio isn’t high enough. The WGAC recommend a colour contrast ratio of at least 4.5:1 for small text (below 18 point regular or 14 point bold) and at least 3.0:1 for large text (18 point and above regular or 14 point and above bold). There are many free online tools which can tell you the colour contrast ratio of text on your site.
7. Ensure form fields are labelled
Forms are an important part of many sites to allow users to contact the site owner and to lead to conversions. However, according to the million-site study mentioned earlier in the article, 59% of forms inputs were not properly labelled, therefore making it difficult, if not impossible for users of screen readers to complete the forms.
Websites with forms should check that tags have been included on each form field which describes the required input (e.g. email address) and for other fields such as checkboxes, aria-label attributes can be added for explanation. In addition, for forms which require Captcha verification, you should ensure that the audio option is available for users with visual impairments.
Furthermore, forms should be accessible by users who navigate using the keyboard rather than a mouse, so need to respond to the tab key to allow these users to progress through the form.
8. Get your developers involved
It is important that your web developers are clued up on accessibility standards and requirements so that your site is being built as well as optimised to be as accessible as possible. It is helpful if your developers also understand how screen readers work as screen readers rely on the HTML using helpfully labelled tags such as <button> and <table>. Holly Tuke wrote a brilliant article (https://bighack.org/message-to-web-developers-from-a-screen-reader-user/) for web developers about her experiences as a blind woman using a screen reader to navigate the web.
As with all SEO, improving the accessibility of a website is an ongoing and ever evolving process, and should be included where possible in all stages of a website from design, to build to optimisation. We hope that the tips above will help you to continue to improve the accessibility of your site and make the web a more inclusive place that everyone can enjoy.
If you would like help to improve the accessibility of your site, please contact the experts at Varn.
