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.
Image may be NSFW.
Clik here to view.
<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.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
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:
- Image may be NSFW.
Clik here to view.
- Too Small:
- Image may be NSFW.
Clik here to view.
Do you have any suggestions for making responsive images accessible?
