Alt Textual content: Not At all times Wanted

Alt textual content is a kind of issues in my muscle reminiscence that pops up anytime I’m working with a picture aspect. The attribute virtually writes itself.

<img src="https://css-tricks.com/alt-text-not-always-needed/picture.jpg" alt="">

Or when you use Emmet, that’s autocompleted for you. Don’t neglect the alt textual content! Use it even when there’s no want for it, as an empty string is solely skipped by display screen readers. That’s known as “nulling” the choice textual content and plenty of display screen readers merely announce the picture file identify. Simply make certain it’s really an empty string as a result of even an area will get picked up by some assistive tech, which causes a display screen reader to utterly skip the picture:

<!-- Not empty -->
<img src="https://css-tricks.com/alt-text-not-always-needed/picture.jpg" alt=" ">

However wait… are there conditions the place a picture doesn’t want alt textual content? I are likely to agree with Eric that the overwhelming majority of pictures are greater than ornamental and must be described. Your pictures are in all probability not ornamental and should be described with alt textual content.

Most likely is doing quite a lot of lifting there as a result of not all pictures are equal in terms of content material and context. Emma Cionca and Tanner Kohler have a contemporary examine on these conditions the place you in all probability don’t want alt. It’s a well-written and researched piece and I’m rounding up some nuggets from it.

What Customers Want from Alt Textual content

It’s the identical as what anybody else would wish from a picture: a simple path to perform fundamental duties. A product picture is an efficient instance of that. Offering a visible smooths the trail to buying as a result of it’s context about what the merchandise seems to be like and what to anticipate whenever you get it. Not offering a picture virtually provides friction to the expertise if you need to cease and ask buyer assist fundamental questions concerning the dimension and shade of that shirt you need.

So, sure. Describe that picture in alt! However possibly “describe” isn’t the perfect wording as a result of the article strikes on to make the following level…

Stop Describing What Pictures Look Like

The article will get into a typical lure that I’m all too responsible of, which is describing a picture in a means that I discover useful. Or, because the article says, it’s lots like I’m telling myself, “I’ll describe it within the alt textual content so screen-reader customers can think about what they aren’t seeing.”

That’s the flawed means of going about it. Getting again to the instance of a product picture, the article outlines how a display screen reader would possibly strategy it:

For instance, right here’s how a screen-reader person would possibly strategy a product web page:

1. Soar between the web page headers to get a way of the web page construction.
2. Discover the small print of a particular part with the heading label Product Description.
3. Encounter a picture and marvel “What info that I might need missed elsewhere does this picture talk concerning the product?”

Fascinating! The place I would encounter a picture and consider it primarily based on the textual content round it, a display screen reader is already questioning what content material has been missed round it. This passage is one I have to replicate on (emphasis mine):

More often than not, screen-reader customers don’t marvel what pictures appear like. As a substitute, they wish to know their objective. (Exceptions to this rule would possibly embrace web sites presenting pictures, corresponding to paintings, purely for visible enjoyment, or customers who may beforehand see and have misplaced their sight.)

OK, so how within the heck do we all know when a picture wants describing? It feels so awkward making what’s finally a subjective determination. Even so, the article presents three inquiries to pose to ourselves to find out the perfect route.

1. Is the picture repetitive? Is the task-related info within the picture additionally discovered elsewhere on the web page?
2. Is the picture referential? Does the web page copy instantly reference the picture?
3. Is the picture environment friendly? May alt textual content assist customers extra effectively full a activity?

That is the meat of the article, so I’m gonna break these out.

Is the picture repetitive?

Repetitive within the sense that the content material round it’s already doing a bang-up job portray an image. If the picture is already aptly “described” by content material, then maybe it’s potential to get away with nulling the alt attribute.

That is the determine the article makes use of to make the purpose (and, sure, I’m alt-ing it):

The caption for this picture describes precisely what the picture communicates. Subsequently, any alt textual content for the picture will probably be redundant and a waste of time for screen-reader customers. On this case, the precise alt textual content was the identical because the caption. Coming throughout the identical info twice in a row feels much more complicated and pointless.

The completely satisfied path:

<img src="https://css-tricks.com/alt-text-not-always-needed/picture.jpg" alt="">

However examine this out this picture about casual/semi-formal desk setting exhibiting how it’s not described by the textual content round it (and, no, I’m not alt-ing it):

If I used to be to explain this picture, I would get carried away describing the diagram and all of the factors outlined within the legend. If I can learn all of that, then a display screen reader ought to, too, proper? Not precisely. I actually recognize the slew of examples offered within the article. A sampling:

1. Bread plate and butter knife, situated within the high left nook. 
2. Dessert fork, positioned horizontally on the high middle. 
3. Dessert spoon, positioned horizontally on the high middle, under the dessert fork.

That’s means much less verbose than I’d have gone. Speaking about how lengthy (or brief) alt should be is one other subject altogether.

Is the picture referential?

The second picture I dropped in that final part is an efficient instance of a referential picture as a result of I instantly referenced it within the content material previous it. I nulled the alt attribute due to that. However what I tousled will not be making the picture recognizable to display screen readers. If the alt attribute is null, then the display screen reader skips it. However the display screen reader ought to nonetheless comprehend it’s there even when it’s aptly described.

The completely satisfied path:

<img src="https://css-tricks.com/alt-text-not-always-needed/picture.jpg" alt="">

Do not forget that a display screen reader might announce the picture’s file identify. So possibly use that as a chance to each name out the picture and briefly describe it. Once more, we wish the display screen reader to announce the picture if we make point out of it within the content material round it. Merely skipping it could trigger extra confusion than readability.

Is the picture environment friendly?

My thoughts all the time goes to efficiency after I see the phrase environment friendly pop up in reference to photographs. However on this context the article means whether or not or not the picture may help guests effectively full a activity.

If the picture helps full a activity, say buying a product, then sure, the picture wants alt textual content. But when the content material surrounding it already does the job then we are able to go away it null (alt="") or skip it (alt=" ") if there’s no point out of it.

Wrapping up

I put just a little demo along with some testing outcomes from a couple of completely different display screen readers to see how all of that shakes out.