I loved this text by Jeremy Keith on writing alt textual content for photographs. In case you’re not conscious of what “alt textual content” or (“various” textual content) is, it’s the textual content worth of the alt attribute of an <img>. It ought to describe the picture (though in apply doesn’t at all times!).
As a person you would possibly by no means discover alt textual content, however there are contexts the place it’s extremely essential. Screenreaders will announce the alt attribute to a person, so for somebody who’s blind or partially sighted, the alt attribute can present very important content material that may in any other case be missed. It’s not good apply to place essential textual content content material in a picture, but when for some motive you do need to do it then offering the identical data within the alt textual content is crucial to making sure screenreader customers get an equal expertise.
One other time alt textual content turns into helpful is that if a picture fails to load. This typically occurs in an e mail consumer, or possibly there’s a foul connection. Or possibly the picture simply takes a extremely very long time to obtain. In these instances the alt textual content might be exhibited to the person as a placeholder.
As Jeremy factors out, writing alt textual content isn’t at all times simple, and infrequently requires thought, consideration and empathy. That’s why I’ve a selected loathing for CMSs that default to utilizing the file identify as alt textual content. Think about, as a screenreader person, being learn out file names similar to “Screenshot 2022-05-22 at 14-43-16.png”. Until all content material authors are well-trained, this apply is prone to lead to some very inaccessible alt textual content, the place the truth is, even an empty alt attribute can be preferable.
Empty or lacking alt attributes
An empty alt attribute isn’t essentially a foul factor: Photos with alt="" might be interpreted by screenreaders as purely ornamental and subsequently ignored, which is completely acceptable for, say, a picture makes use of as an ornamental background. It may also be a good suggestion to make use of an empty alt attribute when the picture is already described by the encircling textual content. (The W3C web page on ornamental photographs contains some helpful examples.) But it surely shouldn’t be used as a lazy shortcut to skip the work of writing useful alt textual content.
There’s an essential distinction between an empty alt attribute and one which’s lacking completely. A screenreader coming throughout a picture with a lacking alt attribute will announce the file identify as an alternative, which, as we have seen, is normally unhelpful.
Writing alt textual content for text-heavy photographs
A problem I’ve seen come up more and more steadily is writing alt textual content for photographs that include a variety of textual content. It’s develop into frequent to see folks publish screenshots of textual content on Twitter: displaying interactions if you don’t need to amplify the unique writer by retweeting or quote-tweeting, or posting an extended dialog that has occurred by way of one other medium are a few use instances.
One other case (common within the developer neighborhood) is sharing code examples. Websites like Carbon assist you to “prettify” your code examples and save them as photographs to share on social media. With out alt textual content these code examples are meaningless to customers with out the means to bodily see the pictures.
Fortunately, Twitter now permits customers to supply alt textual content for photographs, so in lots of instances together with the code as textual content ought to suffice. However for longer textual content, what ought to we do? One risk is to supply a hyperlink to the unique content material within the tweet itself. Within the case of code, and even long-form content material when it could actually’t be accessed elsewhere, it could possibly be a Github Gist, for instance. (I’ve seen Dave Darnes do that.)
I had a little bit of an uncommon case that gave me pause for thought not too long ago after I posted a screenshot of an HTML webpage that had loaded with out its CSS file. It contained a variety of textual content, however the level of posting the picture was to indicate what that web page appeared like with out its CSS, not the textual content itself.
I opted for alt textual content that described the content material of the picture, reasonably than copy-pasting your entire textual content:
Screenshot of W3C CSS Shade Module spec web page exhibiting desk of contents
My alt textual content was in all probability a bit of rushed and imperfect. I in all probability ought to have included the truth that the webpage was displayed in its pure HTML, unstyled kind. However hopefully would have given sufficient data for somebody to get the gist of the picture, particularly when accompanied by the unique tweet. As Jeremy says in his article, the extra you write it, the higher you get.
