The key to improving and enhancing any website is first understanding the what, the why and the how. Knowing those fundamentals helps eliminate the unknown and instead empowers us with the knowledge to plan and future proof.
In this article, we share with you our experience on the most common types of website accessibility mistakes we’ve come across over the years and how these can be avoided.
These are as follows;
1) Missing ALT description
2) Website navigation
3) Videos missing captions or transcript
4) Colour contrasts
5) Headings in an illogical order
1) Missing ALT description
At the top of the list of the most common mistakes is images without accessible descriptions which are known as the “alt” text. This is important, you should always remember, what information is conveyed by this image for alt. Why is this important? Not only does it contribute to higher SEO rankings on search engines, but it also provides great useful information for users with limited or impaired vision.
Recommended:
Use simple/clear language - enables all users to able to understand your content, including people with cognitive disabilities and low reading literacy.
Example:
- Bad: “A photo of pancakes".
- Good: “A stack of blueberry pancakes with a sprinkle of powdered sugar".
Points to note:
- Alt attributes should not contain the words "image" or "graphic" or similar. When a screen reader encounters an image, the semantic meaning of the <img> element is automatically conveyed to the user by announcing "graphic" or “image”.
- Remember that not all images need an alt tag, for example, if it is purely a decorative image then it doesn’t need an alt tag. You would simply add alt=“ " to leave it blank. This will be ignored by screen readers.
- Image and text graphics should be avoided if possible (text should be done in HTML format), if this cannot be avoided then an alt tag should be describing what the text is saying in the image.
- An image that serves as a link by itself is a purely visual means of identifying what the link does or where it may lead to. Add an attribute to the image which tells users where the link goes and/or what it does.
----------CODE EXAMPLE-------------
<a href="http://www.theseeingeye.org">
<img src="images/shepherd.jpg" alt="Visit the Seeing Eye's home page!">
--------CODE EXAMPLE ENDS----------
Useful Tools:
https://sitechecker.pro/alt-tags/
2) Website navigation
A major part of website accessibility is ensuring that a user can access your website via as many methods as possible, specifically to allow ease of use for users with motor function and vision difficulties. Your website should allow for navigation through the use of a keyboard tab and arrow keys or hardware such as a mouth stick or single-switch input.
Recommended:
Check the ‘tab’ via your keyboard - give yourself an accessibility test without using a mouse.
Example:
Points to note:
- Ensure that each page is labelled with lang attributes that value the primary language of the page. For example, if the primary language of the website is English, ensure that the opening <html lang=“en”> is marked with lang=“en” so that a screen reader can identify the language of the website it is set in. Not setting this will lead to read out failures.
- If your website has more than 5-10 elements that appear before the main body, then this should begin with a 'Skip to main content’ link.
3) Video missing captions or transcript
This is for deaf, hard of hearing people who need access to captioning on multimedia content. Providing text transcripts and captions for audio content i.e. interviews, webinars or podcasts.
It is also of benefit to have a sign language interpreter for the deaf community and for those who happen to watch videos in noisy environments such as public transport or public places as well. Having captions also helps in improving the website’s search engine optimization, as text form is better indexed by search engines.
Recommended:
If you are going for auto-captioning, i.e. YouTube. I would recommend editing the video captions so that they accurately reflect the content of the video.
https://support.google.com/youtube/answer/2734705?hl=en
Example:
Points to note:
-
- It’s estimated that 85% of Facebook caption videos are watched without sound that is useful for all audiences.
- Captions may not be suitable for all deaf people, especially if their first language is sign language. Some people may not be aware, but sign language is not universal to all. It would be best to seek advice from a signer and preferable to hire a deaf translator.
- Sign language is a natural and visual form of language that uses movements and expression to convey meaning between people, some deaf people will find it hard to follow via captioning and would rather have an interpreter to translate the meaning i.e. jargon, complex wordings and so on.
Useful Tools:
4) Colour contrasts
Believe it or not, there are an estimated 300 million people in the world with colour vision issues. 1 in 12 men are colour blind (8%). Often designers look at colours that have the most appeal to your brand. Whereas when it comes to website accessibility, the colours used should provide enough contrast that a user can differentiate between text and background.
Recommended
Web Content Accessibility Guidelines (WCAG) success states that normal text must meet a minimum contrast ratio of at least 4.5:1 and large text (18 points or larger, or 14 points or larger and bold) must meet a minimum contrast ratio of at least 3:1.
Check out the standards set by WCAG 2.1 here. https://www.w3.org/TR/WCAG21/#contrast-enhanced
Example:
Points to note:
There is a long held myth that only men are affected by colour blindness, however, 1 in every 200 women today are also affected by colour blindness.
Tools:
5) Headings in an illogical order
Organising your page structure to allow users to easily browse through your website will improve its SEO score ranking, making it easier to generate more traffic to your website.
When a heading is missing, it can confuse screen reader users, as page styling often has little or nothing to do with the way a page is actually organised.
Recommended
Ensure each page has a single <h1> heading, subheadings should be in <h2> and sub-subheadings in <h3> and so on. Levels should not be skipped.
Example:
<h1>Title of page</h1>
<h2>Main heading</h2>
<h2>Another main heading</h2>
<h3>Sub-heading</h3>
<h2>Yet another main heading</h2>
Notice that no heading levels were skipped, instead, they traversed in sequential order throughout the page.
Points to note:
For screen reader users, headings are critical for a screen reader to understand the content structure or outline for each page. Screen reader users often use headings for navigation.
Useful Tools:
Need help with your website’s accessibility?
We are currently offering to carry out a completely FREE comprehensive Accessibility audit on your online resources to determine if your website meets all current accessibility guidelines. This will include the production of a detailed summary report of the results and our recommendations where applicable. Get in touch to book your audit.
Alternatively, check out our article on ‘The Importance of Accessibility in Website Design’.