Week 13 Page 10: Accessibility

How to make your web graphics more accessible

Elephant by Roger Price (Flickr Creative Commons)

It's important to ensure that your web site and the graphics used in it are as accessible as possible to people with disabilities. There are certain steps you can take during the planning and production phases of a site design to accommodate their needs. Government and education sites (among others) are now required to adhere to the Americans with Disabilities Act's (ADA) accessibility rules so if you are working on a site of this nature it is imperative that you understand and put into practice the guidelines mandated by the law.

Here is an excellent definition and overview of web accessibility at the W3C site:

• http://www.w3.org/WAI/intro/accessibility.php Links to an external site.

Here is an overview of some tips for increasing the accessibility of the graphics you include in a web site:

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Use ALT tags

If you include images that communicate important information to a site visitor, you should include ALT text tags so a screen reader can convey that message. ALT tags are usually short in nature but it is possible to supply a longer ALT tag to describe non-text content as well. Any non-essential images do not need ALT tags otherwise a site visitor might be force to listen to something like: "yellow arrow" "blue circle" "dotted line" etc. Imagine how frustrating and annoying this would be!

Web site development software and management systems always provide input boxes for creating ALT tags.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Provide captions for animation/video with essential information

An animation or video without captions is not accessible to people who are deaf or hard of hearing. You should use software that allows you to insert accurate and compliant captions. Some video/animation programs have features that can help with captioning. Camtasia is one example: http://www.techsmith.com/camtasia.html Links to an external site..

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Avoid flashing/flickering content that might cause seizures

Flashing or flickering animated content is known to cause seizures in people who are susceptible. The guideline is to avoid anything that flashes or changes in rapid sequence more than 3 times in a one second period. Also avoid bright colored flashes.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Make sure your graphics have enough contrast and use accessible colors

To accommodate people with poor eyesight, your graphics should have enough contrast to distinguish them from other elements and/or to make out the content of the image (photo). Also check that the color you select for the graphics does not exclude accessibility for site visitors who might be color-blind.

Here are a few sites that might be helpful for checking your graphics:

• http://www.etre.com/tools/colourblindsimulator/ Links to an external site.
  This site allows you to upload a file to test for color blindness issues.
• https://www.toptal.com/designers/colorfilter Links to an external site.
  This site features a very effective tool for testing your pages for color issues. Copy and paste the URL from one of the lecture page site examples and see what it looks like for someone with color blindness.