Monday, July 15, 2024
HomeCSSWriting Helpful Alt Textual content

Writing Helpful Alt Textual content

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 (“different” textual content) is, it’s the textual content worth of the alt attribute of an <img>. It ought to describe the picture (though in observe doesn’t all the time!).

As a person you may by no means discover alt textual content, however there are contexts the place it’s extremely vital. 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 observe to place vital textual content content material in a picture, but when for some motive you do should do it then offering the identical info 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 generally occurs in an e mail shopper, or perhaps there’s a foul connection. Or perhaps the picture simply takes a extremely very long time to obtain. In these circumstances the alt textual content shall be exhibited to the person as a placeholder.

Pink box with the text “Two blue boxes with short text, one purple box with longer text”
How a picture’s alt textual content is likely to be exhibited to a person if the picture hasn’t loaded

As Jeremy factors out, writing alt textual content isn’t all the time simple, and sometimes 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”. Except all content material authors are well-trained, this observe is more likely to lead to some very inaccessible alt textual content, the place actually, 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="" shall be interpreted by screenreaders as purely ornamental and subsequently ignored, which is totally 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 vital distinction between an empty alt attribute and one which’s lacking totally. 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 difficulty I’ve seen come up more and more continuously is writing alt textual content for photographs that comprise quite a lot of textual content. It’s turn out to be frequent to see folks put up screenshots of textual content on Twitter: displaying interactions if you don’t wish to amplify the unique creator by retweeting or quote-tweeting, or posting an extended dialog that has occurred through one other medium are a few use circumstances.

One other case (standard within the developer group) is sharing code examples. Websites like Carbon let you “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 photographs.

Fortunately, Twitter now permits customers to offer alt textual content for photographs, so in lots of circumstances together with the code as textual content ought to suffice. However for longer textual content, what ought to we do? One chance is to offer a hyperlink to the unique content material within the tweet itself. Within the case of code, and even long-form content material when it will probably’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 just lately once I posted a screenshot of an HTML webpage that had loaded with out its CSS file. It contained quite a lot of textual content, however the level of posting the picture was to indicate what that web page regarded like with out its CSS, not the textual content itself.

Screenshot of tweet with the text “Another day working on the train where a CSS file fails to download, but THAT’S OK because ✨progressive enhancement✨”, accompanied a screenshot of the web page I was browsing at the time in its unstyled HTML form

I opted for alt textual content that described the content material of the picture, reasonably than copy-pasting your complete textual content:

Screenshot of W3C CSS Coloration Module spec web page displaying desk of contents

My alt textual content was most likely somewhat rushed and imperfect. I most likely ought to have included the truth that the webpage was displayed in its pure HTML, unstyled type. However hopefully would have given sufficient info 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.

Learn Jeremy’s article →



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments