7 Common Web Accessibility Issues for the Visually Impaired

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, 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). The WCAG was developed by the Worldwide Web Consortium (W3C) and is the foundation of most web accessibility laws around the world. 

Before you start looking at the individual web accessibility guidelines, we recommend educating yourself and your staff on how individuals with disabilities access the internet and the hurdles they often face. This will help you understand why the guidelines are written as they are and can also be very useful in helping you establish your web accessibility process. Let's start with accessibility issues that users with visual impairments face, which are issues with:

  1. Layout
  2. Headings
  3. Navigation
  4. Non-HTML content
  5. JavaScript
  6. Missing or inaccurate alt text
  7. Bad form structure

How Individuals with Visual Impairments Access the Internet

Man using a braille keyboard and screen reader.
Those with visual impairments use screen readers to access the internet. A screen reader is a type of software which 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, to 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 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 tags), and detect text formatting within a document. In order to do all of these things though, the website must be coded for accessibility.

Having well-structured code is extremely important for screen readers 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 which allow the table to be navigated horizontally or vertically.

Common Accessibility Issues for Users with Visual Impairments

1. 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. Headings

Web 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 logically descending manner on the page (H1, H2, H3, etc.).

3. Navigation

Screen readers are unable to detect navigation. So, 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 create navigation that can be skipped.

4. Non-HTML Content

Non-HTML content such as PDFs PowerPoint presentations and Adobe Flash content 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. 

While the use of Flash content is no longer common, it still poses an issue for sites that still support them. Flash is time-based (such as a slideshow), so it is often inaccessible to screen readers. However, Flash can be made accessible to screen readers by making the content self-voicing or natively accessible. The Flash content should also have text cues for the screen reader so the user will be able to decide how to handle that content. Note that there are some cases where it doesn’t make sense to make Flash content accessible to those with visual impairments. It often makes more sense to make an alternative version which is more accessible for screen readers.

5. JavaScript

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.

6. Images with No or Inaccurate Alt Tags

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 is 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 attribute 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.

7. 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 aren’t labeled correctly. Each field needs a 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 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.

Looking for a complete solution to web accessibility. Monsido can help. Book a demo to see how we can help you achieve an accessible site.