If you work for any federal agency, or you sell a product to a product to a federal agency, this product must be complained with Section 508 Guidelines. Although Section 508 guidelines covers a lot of stuff, I will be talking about Web Accessibility. So I will assume you either work for federal agencies (universities, colleges …), or you sell products to these organizations, or simply you want to target everybody as your potential client and you want to be accessible. There is so many things when it comes to accessibility, so in this post I will only cover images.
When a visually impaired person visits your site, he may not see the images, or he may disable the images, he may be using a screen reader to surf your site. You have to accommodate his needs, and give him a chance to visit and understand your site as much as you accommodate a sighted person. How will you achieve this?
- Your images that have a content should have an alt attribute that explains what the image is.
Bad Example: <img src=”/images/acrobat.gif”> or <img src=”/images/acrobat.gif” alt=”acrobat”/>
Good Example: <img src=”/images/acrobat.gif” alt=”Acrobat Pdf Logo”/>
As you can see not having an alt attribute and a bad description in the alt attribute is not accessible.
Put yourself in the shoes of a blind user, who is visiting your site with a screen reader, this will help to improve your common sense.
- If you are using the images for decorative purposes, you should put an empty alt attribute to the image tag.
Bad Example: <img arc=”/images/background.gif”/>
Good Example: <img src=”/images/background.gif” alt=””/>
- If you have a complex description for your image, that you can not possibly use alt attribute to describe the context, use longdesc attribute of the image. For example if your image is a graph that shows the monthly sales, for different departments, it will be very difficult to explain this graph in the alt attribute. Luckily image has a longdesc attribute, you can link to another text or html file for more description. Here is an example:
<img src=”/images/JanuarySales” alt=”January Sales per department” longdesc=”/reports/januarysales.htm”/>
- If the images are disabled from the page, you should not lose any of the content from the page. Sometimes this happens because the image does not have an alt attribute, or the image is used as a background decoration, and the front text color is same as background color and text disappears.
It is easy to test your page for this type of violation, simply disable the images from your browser, and see if you still get the content :)