Enable

Accessible Images

When the HTML <img> tag was first supported the NCSA Mosaic web browser by Marc Andreeson in 1993, it changed the World Wide Web from a text-only to a multimedia platform. Other browsers that couldn't render images (like the terminal based Lynx web browser) needed a fallback so that users of their browsers could show something meaningful instead of images. Tony Johnson, the creator of the Midas web browser, requested a text altenative that could be used, and eventually that became the alt attribute.

"Alt text" not only is great for accessibility, it's also good to make your images come up in search engines. Good "alt text" handles both use cases well.

Creating accessible alternative text is a discussion on itself. WebAIM has a great introductory article about Alternative Text that is highly recommended. I also recommend Scott O'Hara's in depth article Contextually Marking up accessible images and SVGs.

HTML5 img tag

This is the best solution to use, especially when building from scratch.

The easiest way to add images to a web page.

Debit, Visa, MasterCard, American Express, Discover Network

Example code explanation

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

☜ Scroll to read full source ☞

                    
                

Decorative Image

Important if the image has the same information available in the surrounding text.

A decorative image is an image that is used to enhance an idea presented in text, but is not necessary to understand it. Icons around navigation items and error icons, around error text are perfect examples.

You made an error.

Please back away from the keyboard to avoid any further damage.

Example code explanation

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

☜ Scroll to read full source ☞

                    
                

ARIA Example

There are many sites that include images using the CSS background-image or background properties. Unless these images are decorative, we need to include alternative text as a fallback for these images as well. This can be done using aria-label with the img role.

Note that developers should use <img> tags wherever possible instead of this method. Not only is it better for SEO, but also for text based browsers as well.

The code in this example is based on that from Paul J Adam's img role demo.

Example code explanation

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

☜ Scroll to read full source ☞

                    
                

Inline SVG example with text markup

These rules should always be applied to all inline SVG images.

Although using the <img> tag is the best way to include an SVG into your web page (it's cachable, the markup is less heavy, etc.), it is sometimes desirable to include the image inline (especially if you are making it interactive via JavaScript). Follow the instructions below if you want your inline SVGs to be accessible.

A dark blue circle with text inside I am text in a circle

Example code explanation

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

☜ Scroll to read full source ☞