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.
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:
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.
So, 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.