Accessible responsive images

Responsive web design, creating a single page that morphs with the view port size, is a major feature of modern web design. There are many factors to consider for performance and accessibility. This article will touch on responsive design’s impact on image accessibility.

Responsive image strategy falls into two basic categories. The basic approach is to insert an image and give it max-width:100%, height:auto;. This will allow the image to resize to the width of its container. However, this means you will be downloading the same image for desktop and mobile devices. The other approach is to define a set of potential images and download the size that is most appropriate for the device. Lazy loading the images is the most common approach until the responsive image standard is included within the HTML5 specification.

Accessibility Concerns

Alternate text

All images, regardless of the responsive strategy, require an alt attribute with appropriate alternative text.
Snow storms on the horizon

<img src="polar-vortex.jpg" alt="Snow storms on the horizon" />

Alternate text is also important for containers that are using background images. The following div would appear as a text string to assistive technology.

<div class="hero img">
    Snow storms on the horizon
</div>

Use ARIA attributes to restore the image semantics.

<div class="hero img" role="img" aria-label="Snow storms on the horizon">
    Snow storms on the horizon
</div>

Images with Text

Obviously images with text still need to be readable when reduced for mobile devices.

neutered link
neutered link
neutered link

Target Size

Interactive elements need to be large enough for the user to easily click or touch. The iPhone User Interface Guideline suggests 44×44 pixels as the minimum size. Luke Wroblewski summarizes target sizes for different devices: Touch Target Sizes.

Ok:
Opera singer ala Lego
Too Small:
Opera singer ala Lego

Do you have any suggestions for making responsive images accessible?

Leave a Reply

Your email address will not be published. Required fields are marked *