Section 508 Compliant Graphic Design
Creating or evaluating graphics that must be Section 508 compliant is important whether you are designing a website or creating e-learning that must conform to accessibility requirements. Understanding Section 508 as it applies to graphics is also invaluable if you are responsible for quality assurance and need to evaluate whether you products meet necessary standards before they are sent to the client. This article will provide information that will help web developers, graphic designers, instructional designers, as well as quality assurance personnel and managers better evaluate the graphic design of their products. Although the content found in this article is only meant as an aid for complying with Section 508, the official comprehensive guidelines are available from Section508.gov.
The Section 508 standards that apply specifically to graphics are the following:
1. Text descriptions should be available for every non-text element. (This includes alt tags and the longdesc tag.)
2. Captions should be available for Multimedia presentations.
3. Information that is conveyed through color should also be presented without color.
Text Descriptions
Text descriptions are necessary for graphical elements within a page. Graphical elements needing the alt tag can include video files, the Flash plug-in, as well as static images. If these images do not convey a significant amount of information, a descriptive sentence or phrase for the alt tag is sufficient. However, if the image or plug-in provides a complicated idea such as a flow chart or diagram, then a longer explanation would be called for. Explaining a complex idea would be providing a viable alternative to a complex diagram. On the other hand, if the image in the page is only for decoration, then an empty alt tag is all that is necessary. Overall, to write effective alt tags it is important to keep in mind the purpose and audience to whom you are writing. One technique we have found helpful is to write the alt tag before creating an image. This practice not only results in effective alt tags but also helps ensure the resulting graphics integrate very well within their context.
Synchronized Captions
When determining whether a narrated multimedia presentation is Section 508 compliant, the first question to ask is if the presentation has captioned text. If there is captioned text, the second question is whether the captions are synchronized with the presentation. Synchronized captions can be closed captions which can be turned on or off by the user. Alternatively, open captions are a permanent part of the presentation, and are also sufficient. To get an idea of how captions should be written, try watching television with the sound off and closed captioning on. This is a good way to learn the nuances of captioning such as how many details are necessary to include. Additionally, NCAM (National Center for Accessible Media) has tools on their website for captioning multimedia such as MAGpie (Media Access Generator). They also have a Captioner for Flash that is available also.
Alternatives to Color
Color is an important consideration for graphic designers as well as instructional designers. Many people often make decisions about color without thinking much about it. However, when designing for accessibility it is necessary to be conscious of all color decisions and how they may affect the end user. A chart with a color coded key will not be as helpful as a key that makes use of patterns rather than color. Symbols are also helpful to use in addition to color in order to convey information.
Another consideration is whether the graphics in the presentation provide sufficient contrast. One way of testing whether there is enough contrast is to view the image in grayscale mode. Understanding color blindness is also important in making color judgments. For example, red/green color blindness is very common and should be considered when making graphical decisions. The colorblind webpage filter can help to simulate a color blind user’s experience. For additional information about colorblindness see WEBAIM’s colorblindness webpage. To see and learn more about effective color contrast Lighthouse.org has an article with some nice examples.
Removable CSS
Style sheets can be used for layout and other visual effects. However, if the page is not readable once the style sheet is removed, then the page is not Section 508 compliant. Additionally, when designing a webpage using CSS, the 508 Compliance ideas discussed above should still be taken into consideration so as to provide a general level of accessibility to visitors who have CSS enabled software. One way to test webpages without CSS is in the Firefox browser. If you do not already have this browser, you can download it at Mozilla.com. The Firefox browser has the webdeveloper extension. This extension provides a tool bar that is invaluable for testing webpages when developing CSS for accessibility and 508 compliance.