I teach a class over at the local college here in Long Beach and a majority of the content is hosted on the Canvas LMS so students can access it online. And, naturally, I want the content to be as accessible as possible, so thank goodness Canvas has a11y tooling built right into it.
But it ain’t all that rosy. It makes assumptions like all other a11y tooling and adheres to guidelines that were programmed into it. It’s not like the WCAG is baked right in and updated when it updates.
The reason this is even on my mind is that Jeremy yesterday described his love for writing image descriptions:
I enjoy writing
alttext. I recently described how I updated my posting interface here on my own site to put a
alttext front and centre for my notes with photos. Since then I’ve been enjoying the creative challenge of writing useful—but also evocative—
I buy into that! Writing
alt text is a challenge that requires a delicate dance between the technical and the creative. It’s both an opportunity to make content more accessible and enhance the user experience.
One of those programmed guidelines in the Canvas tool is a cap of 120 characters on
alt text. Why 120? I dunno, I couldn’t find any supporting guideline or rule for that exact number. One answer is that screen readers stop announcing text after 125 characters, but that’s apparently untrue, at least today. The general advice for how long
alt text should be comes in varying degrees:
- Jake Archibald talks of length in terms of emotion. Detail is great, but too much detail might distort the focal point, which makes total sense.
- Dave sees them as short, succinct paragraphs.
- Carrie Fisher suggests a 150-character limit not because screen readers will truncate them but more as a mental note that maybe things are getting too descriptive.
- Daniel Göransson says in this 2017 guide that it comes down to context and knowing when certain details of an image are worth additional explanation. But he generally errs on the side of conciseness.
So, how long should
alt text be? The general consensus here is that there is no hard limit, but more of a contextual awareness of what purpose the image serves and adapting to it accordingly.
Which gets me back to Jeremy’s article. He was writing
alt text for a group of speaker headshots and realized the text was all starting to sound the same. He paused, thought about the experience, compared it to the experience of a sighted user, and created parity between them:
The more speakers were added to the line-up, the more I felt like I was repeating myself with the
alttext. […] The experience of a sighted person looking at a page full of speakers is that after a while the images kind of blend together. So if the
alttext also starts to sound a bit repetitive after a while, maybe that’s not such a bad thing. A screen reader user would be getting an equivalent experience.
I dig that. So if you’re looking for a hard and fast rule on character counts, sorry to disappoint. Like so many other things, context is king and that’s the sort of thing that can’t be codified, or even automated for that matter.
And while we’re on the topic, just noticed that Twitter has UI to display
What’s the screen reader user experience like for the
longdescattribute? If it’s good, that might be what you’re looking for when there is more to say.
As far as I know, it was deprecated.
Moreover, this is not for a description in a way that
altattribute is used but for a URL to the description text (e.g. HTML page which contains long description text).
longdescattribute does practically not exist. It takes URLs, so even in browser/screen reader combinations where it works, it is a bad experience. Source: I helped to write the W3C/WAI Images Tutorial.
MDN docs state
longDescis deprecated. If you’d really want to supply a longer description I’d probably use
longdesc is deprecated and was removed from HTML5 (fortunately or unfortunately depending on your point of view).
longdesc is now obsolete. The recommended alternative is to use a regular link.
@Lars Kölker, do not use
aria-description. For starters,
aria-descriptionis only in the draft ARIA 1.3 spec. Additionally, it is not analogous to
longdescwas meant to hold a URL,
aria-descriptionis a flat text string). It also has no support yet, versus using
aria-describedbyto point to text on the page (visually-hidden or not). Never mind
aria-descriptionwon’t be picked up by automated translation services for some time to come.
As for the overall post, check with your users. Taking cues from a few popular web personalities is a reasonable start since they would hopefully get feedback from screen reader users and accessibility practitioners. But don’t take it any further than a starting point. Find out from the users of your site. And remember that brevity is generally a good baseline position.
The reason we limit alt text to 150 characters or less is mostly because screen readers treat alt text differently than body text. A screen reader user can pause body text or step through it by word or character. In most cases, screen readers will read alt text in its entirety so brevity is best. Another reason to keep it brief is that if it is lengthy (and this applies to longdesc as well), it may contain content that would also be of interest to sighted users. In this case, aria-describedby is a better choice.
Absolutely agreed that it comes down to context, and this is often where the problems start. A typical setup is to store images in some sort of asset management system, so the expectation is that alt text for the image should be stored in the same place. Unfortunately as the perception of the image is often based on the context of the surrounding page, the alt text generally needs to be written at the same time as the rest of the content. This isn’t easy to explain to editors.
WCAG is one of those things you must learn by doing. Download NVDA for windows, or enable voiceover on the Mac.
Spend time and learn the keyboard shortcuts – yes, there are many more than just Tab.
Turn off your monitor, or close your eyes, and navigate your site. You’ll quickly learn how good or bad your experience is, far more than a Lighthouse score or the AXE tools tell you.