Rethinking Alt Attributes for website images

Example of Twitter using an alt tag

A picture is worth a thousand words. For a sighted person, it rings true. But if you are blind or have low vision, this old adage may not entirely add up. In Canada alone, there are more than one million people who require some form of assistive technology to surf the net.

It is important to keep this in mind when building a website. The simplest thing you can do to make your website more accessible is to include a text alternative for all non-text content. (Tip – this will also help make your website WCAG 2.0 compliant).

There are two ways this can be accomplished. The first would be to include an overt description of the image. However, this solution is not always preferred, as it can cause page clutter and change the style guide of your site.

The second and most desirable is to include an alt attribute for images which are relevant to the context of your site. Simply put, the alternative text found within the alt attribute (<img alt=) will be read by screen readers. If there is no alt text present, the screen reader will simply say “image”, and relevant information will be missed.

In cases where a more complexe description is required (i.e. graphs and charts) you may want to use a long description attribute (longdesc=). Within this attribute will be a link to a page that contains the full description.

So next time you meet with the person/team responsible for the managing your website, make sure to inquire about alt attributes. Need help writing your descriptions? Give us a call!

Featured Posts
Recent Posts
Search By Tags