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:
- Non-HTML content
- Missing or inaccurate alt text
- Bad form structure
How Individuals with Visual Impairments Access the Internet
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
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.
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.