Using ARIA to fix non-standard image usage

This page tests the interaction when an image is used as the source and when it is used as a background on a div. We'll also look at how we can use ARIA to make the background approach more accessible. This test page was inspired by the article Lessons Learned from the Flickr Touch Lightbox, which explains why divs were used instead of image tags on a mobile application for better performance.

Test 1: normal image markup

Sample code:

<img src="http://farm1.static.flickr.com/39/84394012_c92a810ffb_m.jpg" width="240" height="189" alt="Puppies on the grass">

Test 2: make it a background image on a div.

We'll now use a div and place the image as a background. CSS will hide the text.

Sample code:

<div class="puppies">Puppies on the grass</div>
<style>
.puppies {
    display:block;
    width:240px;
    height:189px;
    background:url(http://farm1.static.flickr.com/39/84394012_c92a810ffb_m.jpg) no-repeat 0 0;
    text-indent:-1000em;
}
</style>

Test 3: make it act like an image

We'll now use some ARIA to make it seem like an image. We'll give it role="img" and move the text to aria-label attribute.

Sample code:

<div class="puppies" role="img" aria-label="Puppies on the grass" ></div>
<style>
.puppies {
    display:block;
    width:240px;
    height:189px;
    background:url(http://farm1.static.flickr.com/39/84394012_c92a810ffb_m.jpg) no-repeat 0 0;
    text-indent:-1000em;
}
</style>