What accessibility issues did we encounter most frequently last year? In this three-post series, Julie shares what she discovered. We start with the third most common pitfall: text alternatives for non-text content.

For the last month, I’ve been reviewing all the data we collected from our work here at Simply Accessible in 2015. We had a very busy year, and it shows in the mountain of remediation tasks we created! After scaling the mountain, sifting through our list of content types, and all the WCAG success criteria, I’ve collected our findings.

What accessibility issues did we encounter most frequently last year? In this three-post series, I’ll share what we discovered.

Findings from our research

It might not surprise you to learn that errors with text alternatives were the third most common problem we found. The internet would be a dull place without images to brighten it up, and we expect them everywhere online. But, wherever there’s a lot of elements, there’s a lot of errors, too. Nobody’s perfect!

We found hundreds of problems with alternative content for non-text items on web pages. Of those, 66.36% were informative images that needed a text alternative but didn’t have one. Another 20.33% were informative images with alt content that was either inadequate or not useful. And 10.35% were decorative images that had alt content but didn’t need it, with the last 2.96% being images with alt text that repeated other content.

Column graph of alt content problems, as described by percentages given above. Missing alts are divided by location, with nearly half as CSS background images.

This informative image has robust alt text describing the content of the graph. It’s the right thing to do.

The great alt text conundrum

Putting alt attributes on images is not a new, cutting-edge technique. It’s been possible since HTML 2 in 1995, and was part of the original WCAG 1 guidelines in 1999. HTML validators and code sniffers will tell you there’s an error when you’ve included an image without an alt attribute. I’m a bit disappointed that so many people are still not including them as a standard procedure!

Images with useful content belong in your HTML, so you can put in alt attributes. Decorative images (which includes icons paired with a text label for an action) can go in your CSS, or just take an empty alt attribute.

During my review, I noticed that nearly a third of the images without alt content were icon fonts. This is an increasingly popular technique to create icons for websites, using fonts made up of symbols instead of image files. Icon fonts can have CSS applied to them, and they scale really well on different sized screens.

The problem is, they’re usually added in as pseudo-elements via CSS, which means that, unlike image elements, they can’t have an alt attribute added to them. Similarly, many developers are still using background images to convey needed information (and background images don’t support alt text). To make these accessible, add some visually-hidden text for screen readers, or put the graphic in the HTML as an image element with an alt attribute. Check out my demo below to see how it’s done:

See the Pen QyBXdr by Julie Grundy (@stringyland) on CodePen.

A process issue, not a technical one

So, we’ve got the icon font front covered. But, that still leaves nearly half of our image errors, which were HTML images with either inadequate alt content or no text alternative whatsoever. We know how essential it is for people who use screen readers and voice-recognition software, but alt text is still not happening. You’ve heard how important this is over and over again: we’ve already published five articles on the subject.

You don’t need another reminder. You need practical support to do something you know is right.

I’ve met a lot of people who make websites, and all of us are incredibly busy. There are deadlines to meet and too much to do. When developers receive a pile of text and images to put into a site, the content authors are often too busy to tell us which images are informative and which are decorative. Content folks aren’t always aware of the real impact they could have, often assuming accessibility is up to the developers. So, devs end up guessing whether alternative content is needed, and we often guess wrong.

I believe our alt text conundrum is more of a process problem than a technical issue. Everyone on the team needs to understand what’s needed to make products accessible, and what their contribution—and responsibility—is.

Integrating alt text into workflows

While developing a large educational website project several years ago, I asked the content experts to add alt content whenever they gave me an image. I explained why it was important for people who rely on screen reader software, and how alt attributes work. The content writers thought this was a great idea, and promised to send content along with the images. But, they had a lot to write and a tight deadline. I never got my alt text. I had to make my usual educated guesses based on the surrounding text. I can’t blame them—they were as overworked as I was, and since there was no process in place, I sprung it on them in the middle of the usual workflow.

But it still needed to be done.

Kids eatingSo, in the quality assurance stage of our next project, about early childhood development, I made a list of all the images and emailed it to the content team. I wrote my alt text guesses next to each one, and asked them to review what I’d done. They were, of course, dismayed by my choices: how could I not realize that this photo of a little girl playing with friends was really important because it illustrated appropriate social skills, but that photo of a group of kids eating lunch was a bit of fluff to break up a long paragraph?

They took my list apart with their red pens. And now I had useful content for all my site visitors, not just the sighted ones.

But, the real payoff came during the next project, a website about design for non-designers. The content experts, clearly wanting to avoid any more godawful stuff written by me, sent the alt text they wanted highlighted in bright yellow next to each image. An illustration of the colour wheel was well described, and a photo of people using design software was marked ‘decorative’. I was thrilled! I made sure everyone on the project knew how great the content team was (but I kept quiet about secretly hoping for this result).

Sometimes developers have to be a bit sneaky. Demonstrating the perils of letting a code monkey write for a human audience can inspire a speedy change in workflow.

What barriers do you face when adding alt content to your images? What could you do about them? Could adapt current processes to include alt content at an earlier stage of the project? Can you modify your CMS so non-technical people can add text alternatives to their own images? I’d love to know your ideas to improve this essential aspect of sharing the web with everyone. Post them in the comments below.

3 thoughts on “Three common accessibility pitfalls for developers: text alternatives”

Read comments

  1. One of the problems is the fundamental difference of alt text (alternative text describing a visual element) and a caption (Something that makes the image intelligible in the flow of content). Eg. Caption: Vishnu and Sarah enjoy their lunch while secretly longing for play time.
    Alt text: Two girls sit with others eating at a wooden table.

    At the organization I work for we do very well with caption information. This is embedded in the metadata of the image in the ITPC Description field where I can easily find it. However there is no metadata field that would naturally contain a description of the photograph (eg alt text). This means I need to create it with similar questions about whether I have chosen the most important visual elements. It also means any programmatic ways of holding onto alternative text (when exporting an InDesign document to pdf or web content) leads to co-opting an alternative field — Headline for instance as a place to put made up alt text so that I don’t have to reinvent the wheel multiple times.

    Twenty years or so years in the world wide web and digital photography, you would have thought an organizational body (International Press Telecommunications Council) would have created a standard place to contain alt text in the metadata, apparently not.

Hi there! We've closed the comments after a week of spirited discussion on this post. If there's something we've missed, please reach out and let us know.