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.
How Individuals with Visual Impairments Access the Internet
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 webpage, 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
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.
Web users with visual impairments rarely read an entire webpage. Instead, they scan the page looking for the parts which interest them most. They are also able to scan webpages 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.).
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. Inaccessible Flash
Since Flash content is time-based (such as a slideshow), 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 editors need to be careful about how they assign alt tags to images. The alt tag should clearly describe what information the image conveys. Your editors also need to know that screen readers will first read the alt tag and then the image caption (if it has one). If editors make the caption and alt tag the same, then the user will hear the same information twice! Even though this would be 508 compliant, it still wouldn’t provide a good user experience. Note that missing alt tags negatively impacts your website in other ways too, like decreasing your SEO.
Also note that decorative images should NOT have an alt tag. If a logo appears multiple times on a page, then only the first appearance should have an alt tag.
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 which explains which part of the form returned the error.
Need help with website accessibility? Monsido's total web governance tool can help!