Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Make images on your site accessible

Tuesday, October 9th, 2012 by Servage

Have you ever thought about what images on your would say to visitors, if they were not shown, but hat to be put in words? Would they be purely decorative, as part of your website’s design, or would they have actual contextual meaning, being a part of the content?

It’s important to consider the accessibility of images when thinking about not only alternative devices like mobile, but also for other devices, optimizing for general accessibility. A blind person for example doesn’t get a whole lot from images. Such a visitors client will, however, assist in presenting the image in an alternative way – if available.

Design images

Images that are part of your design should not be considered for the accessibility. They obviously should be manipulated depending on layout, client device etc., but this is a job for your style processing, rather than accessibility. Also, I’d argue that using images as part of the design via an img tag is breaking the HTML-CSS paradigm – in most cases.

Contextual images

Images that are part of the page’s content, for example an illustration for a blog post, a product image or similar, is definitely important for the reader to understand. So, how can you do that if the image can’t be displayed? Well, HTML has an “alt” attribute for this purpose, which enables you to add text, describing the image, which can be used in stead of the image. Some clients will simply show the text, some may use it to read it out loud. Either way, you describe the content – the image – with an alternative method (words), hence making it accessible to visitors who can’t view the image, for various reasons.

Example

<img src="path/to/elephants.jpg" alt="Elephants in the sun.">

There are more examples and issues to consider, but this is the basic way of making an image accessible to all clients. Read this blog article for more info.

 

Make images on your site accessible, 3.7 out of 5 based on 3 ratings
Categories: Tips & Tricks

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.