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 alternative 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.

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.

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.

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.

Using SVG Sprites

Many developers use SVG Sprites so they can put all their SVG icons in one place and have their svg tags point to a shape in the sprite inside their HTML code. This can make your webpage more efficient when there are a lot of icons on a page, as described in the article Which SVG technique performs best for way too many icons? by Tyler Sticka. Here, we should you how to embedded them in an accessible ways like the other SVG examples on this page.

For more information about SVG Sprites, I would suggest Accessible SVG Icons with Inline Sprites by Marco Hengstenberg.

Using Icon Fonts

If you already are using a component similar to this in existing work that is not accessible, go to the developer walkthrough of this section to see we made our implementation accessible.

Font icons are a popular way to embed simple mono-coloured fonts into a webpage using a custom font to contain the icon shapes. I don't like using font-icons to embed icons into a webpage for a number of reasons:

1. Font icons don't have any semantic information. When you embed an SVG (either inline or using the <img> tag), then the accessibility API and the browser knows they are images, and report that correctly to screen readers. You can use role="img" but it is better to use native HTML5 markup and not ARIA (which the role attribute is), because of The First Rule of ARIA.
2. From a rendering standpoint, fonts use a different rendering engine that vector images, and that engine varies from operating system to operating system. Windows uses ClearType (which emphasizes detail) while OSX renders fonts as close to the printed page as possible (a great explanation about this is in the Hacker News thread for MacType: Better Font Rendering for Windows). Also, these technologies can (and are) tweaked by users to ensure they are legible to them. Unfortunately, what makes text legible don't result in good icon rendering (because what makes typography readable doesn't make vector graphics necessarily look good). It also results in cross browser (and cross OS) rendering issues sometimes.
3. If you need to use CSS transforms on font icons, the rendering suffers because of #2, and is really apparent in the Windows OS. I have written about this a while ago, but it looks like it is still is an issue. My blog post, Fixing Typography Inside of 2D Transforms has a work around for this, but it does affect performance. If you are using HTML5 Canvas in Windows, then there are other issues (although I admittedly haven't tested this in awhile); you can read my other blog post, How to Fix Small Transformed Text in HTML5 Canvas in Firefox for Windows for more information about that.
4. You are (sort of) stuck with solid colours. Yes, there is tech for multicolour fonts, but I am not sure that is critical mass and should be used yet.
5. You do a lot of cooler things with SVG (animation, CSS styling, etc) that you can't do with font icons.
6. As illustrated in Icon Fonts vs SVG – Clash of the Icons by Nihil Tyagi, SVG are more performant and can be positioned more easily.

Font icons come from the time when IE6 was still a thing, which didn't support SVG. It was a hack that suited a purpose, but we should move on, since SVG is everywhere now.

(I am also a calligrapher and love typography, so the idea of using font technology to render images just seems wrong to me ... the above just emphasizes that point-of-view.

That said, there are plenty of legacy code out there that use icon fonts. Here is how you code font icons in an accessible way. This code is refactored from a Codepen demo by George Martsoukos (modified to add the accessibility features in it).