Global Accessibility Awareness Day Post Three: Describe It Well to Help Your Users Get the Picture
Blind users are reliant on textual description of most electronic content. Whether they are using a Braille display or a speech synthesizer, the content they review from documents and websites comes in the form of text. As we all know, the web and many documents are built with a great amount of graphical material. With the following tips, however, you can ensure that your content can be enjoyed by blind visitors as well.
Alternative Text/Text Descriptions of Non-Text Content
Providing alternative text and text descriptions of items that are not represented as text on the screen is an important and simple way to make your document accessible. Meaningful text descriptions of visual content make it possible for someone unable to see the graphics to understand the message you are trying to convey. Word, Excel, PowerPoint, PDF, and web technologies all provide methods for adding alternative text to images, charts, graphs, and other non-textual content. The benefits of this technique far outweigh the benefit to blind users alone. For instance, for any content that will end up on the web, well labeled graphics, graphical links, and other non-text objects may make it possible for visitors to utilize your website without downloading large graphics, saving them bandwidth and time. Mobile web users as well as those in rural locations will thank you for this provision. Moreover, meaningful graphic text in web content will improve search engine optimization, because Google can’t read pictures, but it can read your well-thought-out text descriptions. In order to use text descriptions effectively there are several things you may want to keep in mind.
- Text descriptions of images need to convey the same information as the images themselves, in the minimum number of words needed to make the meaning clear. If an image has a text description for all users to view, (such as explanatory text under a chart), it is not necessary to repeat that information in the description of the image, but it is important to provide additional description for relevant information in the image that does not have a text equivalent.
- Not all images should be described. Images used for purely decorative purposes, such as decorative flourishes between links on a webpage, should be suppressed as they will add nothing to the content being discussed, and will make it messier and less pleasant to review for screen access users.
- If an image contains a picture of text that is supposed to be read and used by the reader, that text needs to be conveyed in the image description. For example, a graphical link which reads “products” also needs to read as “products” in its alt text.
- It is inadvisable to use characterizations such as “image of,” or “graphic of” in the description of a graphic. This information is redundant as screen access packages will usually alert blind users that the item being read is an image; users who have disabled image viewing on a page will be able to tell where that image should be when browsing the page; and search engines will not benefit from the information.
Meaningful Link Text
It is important to remember to create links that make sense to screen access users. Many screen access products allow users to pull up a list of links in a document or webpage, and sometimes users will tab through the links on a page in order to get a feel for it, or to look for specific types of content. In order to allow users to quickly find the information they are seeking when using these skimming tools, there are several best practices that can and should be employed when creating links. Once again, like most other topics in this article, creating meaningful link text will also assist other users of your site who may be merely skimming for information.
- Avoid ambiguous link text, like “click here”, “go,” or “here”. Creating links with meaningful text will require a little extra thought on wording when writing content, but will make for clearer content for all users. It also makes creation of multi-format documents easier, because link text is largely a web technology that may not appear in a PDF or Word document of the same content (though it certainly could if the creator so chose).
- Avoid duplicate link text. If there are several “go” links on a webpage, a user skimming the content, (blind or sighted) will have to stop and review context to make sense of where they are going.
- Use consistent, commonly used link text for common purposes whenever possible. For instance, most web pages offer a link to “Contact Us” or “Contact” which leads to a contact page. Many screen access users will be able to jump directly to links that begin with a particular letter, and when looking for contact information will try the “C” key in order to find this information quickly. Similarly, when creating a web page it is important to use the same link titles to reach the same destinations no matter what page a user is on (unless this would break a path or a process). For instance, all pages on a shopping site may want to have links to the “Shopping Cart”, product categories, and “Sales”.
- Keep link text short and to the point. Giving too much information in a link makes it more difficult to read, and makes it less clear.
- Avoid using the words “link to” when creating link text. Screen access packages already announce links, and this will help to avoid redundancy. “Link Contact Us” is more pleasant to hear (or read) than “Link Link to Contact Us”.
- Do not create empty links. Links should always contain text, or graphics, (with appropriate alt text) or they will be confusing to keyboard and screen access users.
Forms, Buttons, Checkboxes, and Other Interactive Controls
When creating interactive elements, it is necessary to have labels which ensure that blind users are able to determine what these elements are, what they do, and how to interact with them. Adding labels to form elements and ensuring that they are properly associated will also assist in cataloging web resources. Some of these controls are rare in documents, but will be especially useful in specialized contexts like PDF forms or HTML files.
- Checkboxes, radio buttons, and other question/answer type interactive elements should be associated with a question, and the boxes/buttons themselves need to be explicitly associated with the answer they represent, otherwise screen access users may find that they are unable to identify the question being asked, or what answer is associated with the control. When moving through a form, it is difficult to determine whether to answer “yes” or “no” without the question.
- Combo boxes, edit fields and text boxes need to be labeled as well, and not merely have the text label next to them visually on screen. Unless a label is associated explicitly with the box, a user cannot tell what they should place in the box. The text labels that sit next to (or above, or below) these boxes visually will not be reliable markers as they are not always in the same place in relation to these boxes, and therefore could confuse users relying on the information they provide.
- It is important wherever possible to include the same text on buttons as in button descriptions. For example, some buttons may visually be styled with the word “Go” and may have an alternative text label of “submit”. If a blind user is working with a sighted user on the same document or webpage, if a low vision user is using a combination of vision and non-visual techniques, or if a user utilizing dictation and spoken navigation attempt to find or activate this button, the fact that its label and visual contents do not match will be confusing and may cause difficulty in navigating the page.
- Buttons and image-based links should contain meaningful text equivalents. For example, if a button is labeled as “Go” visually, it should contain the word “Go” in its description, but it also needs to tell a user where it is going. This is especially important if there are multiple buttons or links that contain the same text. For example, “Go to the project page” and “Go to my account” (alternatively “Account: Go” or “Project: Go”) are going to be far more meaningful to blind users than encountering multiple “Go” buttons without any further context