Refine Your Website: The Importance of alt Text
As today (9 May 2012) is Global Accessibility Awareness Day we thought we would give you a taste of what to expect with a quick and easy accessibility check that you can perform on your website. Website accessibility is all about making your website play nicely with the kind of technology that people with disabilities use to access the web. This includes everything from standard web browser features like being able to browse the web without using the mouse to using specialist software like a screen reader.
Websites today are often highly visual beasts, with lots of images and other goodies to make them look ‘just-so’. But what if you can’t see those images? Does your website still make sense?
alt Text
The HTML code used to make websites allows you to add extra information to images – this is called alt text. A blind web user browsing with a screen reader will hear the alt text for the image read out to them when they read your web page.
Ideally, alt text should be written so that a person who cannot see images gets the same experience of using the web page as a fully sighted person using a desktop browser like Internet Explorer – i.e. it is not necessarily a simple description of the image.
- If the image you are embedding primarily contains text, the alt text should be a repetition of that text, with extra information only where this is required to give context.Example: A picture of the front cover of a book called ‘Online Brand Consultancy by Refined Practice’ should have the alt text ‘Book: Online Brand Consultancy by Refined Practice’.
- If the image is a photograph that conveys information or a simple diagram, then identify it as such as well as naming the main subject of the image. Also, provide a concise description of the image where this is important to the context of the page.Example: A photo of a man eating an apple should have the alt text ‘Photo of man eating an apple’.
- If the image is a graphic or a photograph that does not convey information important to the page but is just ‘set dressing’ (e.g. used as a background image for some text) then if possible provide blank alt text (alt=””).
Example: If the image is just used as a background for a piece of text which already has a heading use alt=””.
- If the image is an icon conveying an action(e.g. an email icon conveying the action ‘send to a friend’) then use a concise description of that action as the alt text.Example: an email icon with a picture of an envelope conveying the action ‘send to a colleague’ should use the alt text ‘send to a colleague’, not ‘email icon’ or ‘picture of an envelope’.
As well as making your site much more accessible, adding appropriate alt text to an image will help search engines like Google to index your content, resulting in better search engine performance.
How to Test the alt Text on Your Site
Nuts and bolts time – how do you go about checking the alt text on your site? Here is one way:
- Open up the Firefox web browser (don’t have it? You can get Firefox for free here)
- Install the ‘Accessibility Evaluation Toolbar‘ add-on by Jon Gunderson.
- Restart Firefox
- Go to the web page you want to check
- Choose “Text Equivalents” then “Show Text Equivalents” on the new toolbar
- All the images on your web page are replaced with their alt text.
That’s it! Take a look at your page. Does it make sense with the alt text shown in place of the images? If not then it’s time to make a change!
This article originally appeared on the website of the Great British Business Show 2012.
