Only 3% of the web is accessible to people with disabilities, meaning a staggering 97% of websites are not designed to be suitable for those with visual impairments.
Today, website accessibility is an essential factor to consider as a UX designer. Small changes can make a huge difference for those using assistive technology, such as screen readers.
Even with that being said, a study of home pages from the top 1,000,000 websites still detected over 51 million distinct accessibility errors – an average of 51.4 errors per home page.
(Image source: Deque)
In this article, you can expect to learn more about the type of vision impairments that can impact website usage, as well as some of the most common accessibility mistakes that we see across the web.
We explain some strategies that can be implemented to overcome usability barriers, helping you create a more inclusive online experience.
Visual Impairments That Impact Web Usage
Globally, at least 2.2 billion people have near or distant vision impairment. The number of vision-based disabilities that website owners should be catering to is vast, but these can be grouped into some of the following categories.
- Total Blindness: Unlike those with low vision who may see light or outlines, total blindness means the sufferer is unable to see at all. It can be caused by complete retinal detachment, severe infection, injury, or a birth defect.
- Age-related degeneration: As humans get older, it is common for eyesight capabilities to lessen. The part of the retina that is capable of defining finer details becomes damaged and subsequently causes difficulties with vision.
- Color blindness: Differing among sufferers, color blindness consists of struggling to tell the difference between certain colors. Severity can vary, but it means individuals may struggle with different color combinations and reading against colored or busy backgrounds.
- Cataracts: Often seen in the older generation, cataracts are a condition that creates a cloudy blur over the lenses of the eyes, causing blurred vision. This leads to difficulties reading and writing and can also cause light sensitivity.
8 Common Accessibility Mistakes Made By Website Designers
When building a website, there are many factors to take into consideration. These include accessibility, search engine optimization, and choosing the right website design tool.
Whether you choose to build your landing pages from scratch or enlist the help of an AI-powered website builder such as Hostinger, the templates, colors and integrations you choose must be fully accessible to all users and run smoothly on multiple devices.
With this in mind, here are eight of the most common accessibility mistakes website designers often make when building a new website, helping you stay clear and build a more accessible platform:
- Inaccessible forms
In order to make a website form more accessible to users, the input fields need to be labeled to provide guidance on what information needs to be included.
Many online forms use designs that may look aesthetic to most but do not consider the needs of those who are using screen readers. A screen reader will read aloud the contents of each field to let the user know what is required, so any empty form tags will be impossible to complete.
There are many occurrences in which users get to the checkout page of an e-commerce website or a contact form when enquiring about a service and are unable to continue due to the inaccessibility of the page, highlighting the importance of accessible website customization.
Every form field has a <label> element, which can be titled to allow the screen reader the ability to read the information to the user.
(Image source: Methods)
- Unclear navigation
The framework of a website is one of the key aspects of user experience, controlling how a user is able to travel naturally from page to page. 70% of disabled online shoppers report having to click away from a website because they find it difficult to navigate.
The example below from Yale School of Art shows an array of poorly formatted tabs that are almost impossible to follow as it is, let alone when using a screen reader.
When it comes to accessibility, a user should be able to move throughout the site without needing a mouse, allowing screen readers to detect the menu structure. This being said, many websites are built in a way that means every time a new page is opened, a screen reader reads out the individual menu options every single time, not allowing the user to skip over it.
To create a user-friendly structure, navigation options should be clear, with large targets to click on rather than fly-out menus that will be difficult for those with accessibility requirements.
(Image source: Yale SOA)
- Insufficient color contrast
A lack of color contrast between the website background and any buttons, graphics, headings, or links can make it challenging for users with visual impairments, color blindness, or low vision. For example, red text on a white button background can impact people’s ability to interpret the information as the brain cannot easily distinguish the color contrast.
According to WCAG 2.1, background and foreground colors should have a contrast ratio of 4:5:1. A color contrast checker can be used to ensure all colors have the correct color contrast ratio.
(Image source: Flickr)
- Non-HTML content
Downloadable content such as PDFs, Word documents, and Excel spreadsheets require additional consideration for users of screen readers as they do not follow the same HTML format as the rest of the site.
This additional content needs to be tagged for navigation so the structure of the page can be translated by a screen reader. Tagging documents means the content within the file is defined. Any headings, lists, images, and other functions become identifiable for the screen reader and allow it to read the contents in the correct order.
For Microsoft content (Word, PowerPoint, Excel, etc.), the software offers the option to utilize the ‘Accessibility Checker’ function.
- Ambiguous links
In the same way a screen reader will read out text and navigation options, it will read out link text. If every link consists of ‘Read More’ or ‘Click Here’, the user will not be able to follow.
A study of the top one million websites revealed that 18% of the pages had ambiguous link text, and each of these pages showed an average of 5.9 links, resulting in over one million in total.
For many screen reader users who are looking to scan a page for the content they want, they may ask their reader to list all links on the page alphabetically. The reader would then read aloud all of the anchor text, providing no context, so the content of the link description is an important factor.
The link text should summarize the contents of the webpage that is being linked to, giving the user a description of its purpose so they are able to decide whether the link is worth following.
- Missing alt text
22.1% of images on website home pages don’t have alt text, meaning a screen reader is unable to describe the contents of a picture.
When a screen reader is reading the contents of a web page to a user, it will read the alt text of an image as a way to depict the meaning. For users who are looking at the website themselves, hovering the mouse over the image will also display the alt text, acting as an opportunity for the website owner to provide more information on the contents of the image.
As well as serving a purpose to those with visual impairments, adding alt text is also a good SEO practice, providing search engines with an explanation of the image that can, in turn, have an impact on page rankings.
(Image source: seobility)
- Poor semantic HTML
A webpage consists of different elements, mostly semantic, that are made up of HTML tags. Examples of these tags are <H1> to define a heading and <p> to define a paragraph break.
Screen readers rely heavily on semantic HTML, defining how the content should be interpreted and allowing the user to jump from element to element using shortcuts. When those with visual impairments are unable to see the structure of a webpage for themselves, the screen reader helps them navigate the sitemap, headings, buttons, and other features.
Creating a website using a tidy semantic (and non-semantic) HTML structure creates a naturally navigable page with a clear format, improving the user experience for both humans and screen readers.
- Complex fonts and text color
Having insufficient contrast between the text and the background can be very difficult for users who are color-blind or have limited vision. In the study of one million websites mentioned previously, 81% of the homepages presented low-contrast text.
When text is difficult to read, it can lead to eye strain as the user struggles to understand the words and make sense of the message. See the image below of a website example that uses a range of bright colors, together causing instant eye strain as you try to find what you are looking for. Color blindness is a big issue that needs to be considered, avoiding common combinations that may not be clear among those who are color blind.
In addition to having an impact on accessibility, complex fonts or low-contrast text colors can also prove difficult for a wider audience. If a user is browsing the site on their mobile when outdoors, the glare of the sunlight can make low-contrast text impossible to read.
When a user is not able to find what they are looking for quickly, not only can it be incredibly frustrating, but it can have an impact on conversions if this leads them to click off the website and look elsewhere.
(Image source: Arngren)
What’s Next For Web Accessibility?
As technology advances and awareness grows, those dealing with visual impairments become more capable of navigating the digital landscape independently.
As we look ahead in the world of web accessibility, it seems the landscape is evolving, but there is still a way to go. All website owners should be aware of these common accessibility downfalls and adopt a user-centered approach that is inclusive of all individuals.
