12 Common Web Accessibility Issues for Visual Impairment
Collection :
It's common knowledge now that web accessibility is a basic human right. Besides opening your website to a broader audience of over 1 billion people with disabilities, accessibility best practices are aligned with other business goals such as SEO, usability, mobile-friendly designs, and more. The standard for web accessibility is governed by the Web Content Accessibility Guidelines (WCAG).
According to the Centers for Disease Control, visual disability is one of the top 10 disabilities among adults over 18 years and is one of the most common disabilities among children. Visual disabilities encompass a wide range of disorders and diseases, like complete blindness, color blindness, refractive errors (short-sightedness, farsightedness, and astigmatism), age-related disorders such as glaucoma, cataracts, and macular degeneration, as well as impairments like amblyopia (“lazy eye”) or strabismus (eyes turned outwards or inwards).
How individuals with visual impairments access the internet
The web is a very visual medium, so visual impairments can cause significant accessibility issues. Those with visual impairments use assistive technology like screen readers, screen enlargement tools, or refreshable braille displays to access the internet.
A screen reader is a type of software that works with the operating system to provide information about icons, menus, files, folders, and dialogue boxes. Since screen readers don’t rely on a mouse, they generally operate by responding to various keyboard commands. For example, a command may allow a reader to navigate a web page, read part of a document, or make a selection. All operating systems now come with screen readers. There are also some commercial screen readers, such as the popular JAWS (Job Access With Speech) software. Screen readers can read all or part of the visible text on a page, read certain text which is not visible to sighted users (such as alt text), and detect text formatting within a document. In order to do all of these things though, the website must be coded for accessibility.
A refreshable braille display allows users with visual impairments to read text output on a screen through the raising and lowering of pins through holes on a flat surface in braille combinations. Refreshable braille displays are used alongside screen reader software that gathers the content information from a web page and converts it into braille characters to be displayed.
Web accessibility issues for people with visual impairments occur when they encounter a website that is not coded to be both keyboard-navigable and to support assistive technology. Having well-structured code is extremely important for screen reader software to work properly because the presence of certain bits of code will trigger a command. For example, if a screen reader detects the code for a table of information on a page, it will trigger commands such as ones that allow the table to be navigated horizontally or vertically.
12 common accessibility issues for users with visual impairment
Here are the most common digital issues that people with vision disabilities encounter when using a web that isn’t made accessible or coded to accommodate assistive technology.
1. HTML layout
Some screen readers are able to detect and read the CSS of a page. However, others rely on the unstyled HTML. This can create issues when the screen reader is determining what should be read first on the page. To avoid this issue, all HTML should be structured in the same way that a printed document would be structured so it makes sense when read left to right, top to bottom.
2. Text contrast
One of the most common accessibility concerns is the low color contrast between text and backgrounds. Color contrast is an essential element of web accessibility as it helps users perceive content on a page. According to WCAG 2, contrast is the difference of brightness between two colors. Low contrast on text is a common accessibility issue, as people with low contrast sensitivity, such as older people, or people with color blindness may not able to distinguish between text and background of certain colors of a low contrast ratio.
In February 2021, WebAIM conducted an evaluation of the accessibility of a million website home pages and found that 86.4% of the home pages had low contrast text. According to the WCAG 2.1 level AA, the ideal color contrast ratio is 7:1 for normal text and 4.5:1 for large text.
Low contrast is an easy fix by adapting your website design and themes to accessible color combinations. There are many free accessibility tools like Monsido by Acquia’s Color Contrast Checker that you can use to check that there is enough contrast between your text and the background.
3. Heading structure
Website users with visual impairments rarely read an entire web page. Instead, they scan the page looking for the parts which interest them most. They are also able to scan web pages for pertinent information by using their screen reader to list headings. If the headings aren’t used properly (or at all), then the user will not be able to find what he/she is looking for on the page. That is why you should never use headings decoratively and should place them in a logical descending manner on the page (H1, H2, H3, etc.).
4. Keyboard accessibility
Using a mouse to navigate a website can be either difficult or even impossible for people with visual impairments, so instead, they use the keyboard to navigate. People with visual impairments can move through a website using keyboard commands and shortcuts. However, a website will have to have well-structured content with appropriate heading structures and coded to enable keyboard access to all content and functionality such as hyperlinks, links, forms, and media controls.
Keyboard users use the Tab key to navigate the page and as they do, there needs to be a visible keyboard focus indicator that shows them what element they are on in the page. These indicators appear as a border or as a highlight around the focused element, helping those with low vision to determine where they are on the web page. It is important that the website is coded for keyboard navigation as the focus indicator needs to follow a logical reading order.
5. Navigation links
Navigation links are also an accessibility problem. Screen readers are unable to detect navigation if not coded well. And when it is found on a page, a screen reader won’t know to skip over it. This means that users with visual impairments will have to listen to the navigation every time they load a new page. A solution to this is to accurately assign ARIA roles to navigation menus to indicate its purpose and to make it navigable. Also, ensure that a “Skip to main content” link is available so that the navigation can be skipped over by screen reader users.
6. Non-HTML content
Accessibility issues also extend to content like documents hosted on a website. Non-HTML content such as PDFs, Microsoft PowerPoint presentations, or Word documents, should also be made as accessible as possible. There are ways to make some of these documents accessible: PDFs for one can be tagged for navigation by a screen reader, while PowerPoint and Word, offer an Accessibility Checker function within the software to create accessible documents.
7. Javascript rendering
JavaScript used to be completely inaccessible to screen readers but now, most screen readers can access it. However, it is important to note that some people may have JavaScript disabled or be in an environment (such as a corporate workplace) where it is turned off. Users may also be using older versions of screen readers that can’t handle JavaScript. For this reason, it is important to make sure your website still works without JavaScript.
8. Missing (or inaccurate) alt text
Making an accessible website doesn’t mean you need to forgo images. It just means that your website editors need to be careful about how they assign alt tags to images. The alt text should clearly describe what information the image conveys. Keep the descriptions short and concise as screen reader users tend to navigate through content quickly. Your editors also need to know that screen readers will read the alt text first before reading the image caption (if it has one). If the caption and the alt text are identical, then the user will hear the same information twice! Even though this is technically compliant, it still isn’t great user experience.
For decorative images, include an empty (alt=” ”) or null (alt=””) alt text in the HTML code. This will tell the screen reader to skip over the image.
Note that missing alt text negatively impacts your website in other ways too, like decreasing your SEO. If your image is missing an alt text or an empty/null attribute, the screen reader will still announce the image without any description, which can make it very confusing for the user.
9. Missing link text
Links are crucial to navigating the web, but they bring about their own set of accessibility issues. Missing link text is a common obstacle for people with visual impairments. This occurs when there is no text used to describe or present the link. This can happen when functional images like buttons, logos, icons, or other images are used as links. A screen reader, however, cannot read that these images function as links.
To avoid this from happening, the image alt text should convey the purpose of the image and the action that will be taken, rather than just a description of the image. For example, for an image of a logo that is meant to lead to the home page, the alt text should be “*name of website*.com homepage” instead of just “*name of website* logo”.
10. Ambiguous link text
Vague link text like “Click Here” or “More”, or just displaying the whole link itself, may make sense to sighted users of a website where the visual content can provide context, but for screen reader users, these link texts are examples of terrible user experience. Regardless of the text that precedes these vague links, it still does not convey enough information to the user. As screen reader users have the ability to navigate from link to link, skipping the text in between, they do not provide context as to what the link is and where it will take you. This is easily fixed by using informative text that provides some detail as to what the link is about.
11. Poorly-structured forms
Most websites have form fields for users to fill out (a search box being one example of a form) and these form fields often present accessibility issues for individuals with visual impairments. One of the biggest issues with forms is that they often don’t have the correct labels and instructions that screen readers need to convey information about the form. Each field needs an accessible label for the screen reader to read so the user knows what to fill in. The buttons also need clear text so the user knows what to select after completing the form. If you are using CAPTCHAs, then there needs to be an audio or other accessible alternative for users with visual impairments.
Also, think about what happens when the form is filled out incorrectly. Commonly, websites will return the form with the incorrect fields in red. This obviously presents an accessibility issue for those who are unable to see the red field. Instead, there should be text to be read out which explains which part of the form returned the error.
12. Form expirations and time-outs
Many forms have security functions that cause the page or the form to expire after a certain amount of time. However, for those using assistive technology to fill out forms, the process might take longer and they may not know that there is a time limit on it. Either remove the time-outs on forms, give sufficient information that the form is time-limited, or provide the functionality for users of assistive technology to extend the time limit to finish the process.
These accessibility issues, while common, are relatively easy to fix and avoid once you are aware of them. Educating yourself on the basics of web accessibility and making use of the various web accessibility auditing software available, like Monsido by Acquia, can help both find issues if they happen to slip through the cracks, and helps you tackle them before your users get to them.
Looking for a complete solution to web accessibility? Acquia can help. See how we can help you achieve an accessible site with a free web accessibility audit.
Director, Performance Marketing Acquia
