[techtalk] WEB DESIGN - What Makes Good ALT Text?

Tue Sep 17 14:39:55 PDT 2024

Welcome to the latest issue of Tech-Talk!

Reminder: When accessing resources at the Tech-Talk website<https://www.tech-talk.com/login/oregon>,
use ORLIBTECH for both the username and password when prompted.

Tech-Talk is a paid subscription service for staff of Oregon libraries and is supported in whole by the Institute of Museum and Library Services (IMLS) through the Library Services and Technology Act (LSTA), administered by the State Library of Oregon.
This is a concise written description of the image.

[https://files.constantcontact.com/ee1208b4001/34916cb2-412f-43fa-8294-1f7ecb0e9a3d.png]

[Three vibrant red flower bushes with orange accents and green foliage, potted in large white containers against a backdrop of a partly cloudy sky. A red arrow points to a text overlay that reads, "View the Tech Tip Video Here.]<https://opiayfbab.cc.rs6.net/tn.jsp?f=001hrdZcoBGtKW0r3kIqLvndSQZTAtF8S1YkyUK_MN5cJi7zjc5c2kIi8Mcom-8Rcrb5s59ig8saLxQLV2A-Fk0x03P9TWtCPzkNpx2fQEItgVtG03V6UBTpYfSZx28cQyEeT_X4QqOEsTXkVkZK0Svis8Tpx_KRQ9T0JrnLg4AUzkjqgV9BLL_QTsnoC1zOVJa8NLsCZz8Cb0=&c=VeUsN5ylpZDSRzXN1ULAoPZ99jbzGcUfUQaI2fH0UH5h3_zirnBiGw==&ch=aO-9_MsPv4BLd7ECgnbszAiN2RajnqOIlq1WyiWQjtW6rY0pC0850w==>

Photo by Jan Canty<https://opiayfbab.cc.rs6.net/tn.jsp?f=001hrdZcoBGtKW0r3kIqLvndSQZTAtF8S1YkyUK_MN5cJi7zjc5c2kIi8Mcom-8RcrbbB6FnV3UuOR0igpfhXimUfoYZKfa56xdfRlD7bTrUu5E9C2quErf6NMnb67LuGouvp_80rCL7BJfORxPZ2A7eBFhD-FYbHFJMGRniSYt-_cZW0AdQrw8PgTnQ5uSq6M8ZKwt92YS_00ADH_h3UmiQBHNnTET9qg4eTkIGdK0Lv81smJ2bg54LLGCPlkEgJ-ZWiA8Nhl5d-Q=&c=VeUsN5ylpZDSRzXN1ULAoPZ99jbzGcUfUQaI2fH0UH5h3_zirnBiGw==&ch=aO-9_MsPv4BLd7ECgnbszAiN2RajnqOIlq1WyiWQjtW6rY0pC0850w==> on Unsplash<https://opiayfbab.cc.rs6.net/tn.jsp?f=001hrdZcoBGtKW0r3kIqLvndSQZTAtF8S1YkyUK_MN5cJi7zjc5c2kIi8Mcom-8RcrbOY14H6dZe1MC-9lR5TrV-ePw591LznN0x5E7lebDR_QIhRPv_Sp4RfoDqkV3K7sw42-x3_tDJwMBbveQ1Vhs6ujBDnbDngxg9jm0iBSZmj8cWb8j5wcsMAmR0uiXc5VIUNKf1OL9XTVnmAXwb8Miwm2rv7BpKsFSrWhQbjsYhiv1oqWs_UhTT6GXMCDmDSwXNRHQupaUCBMw1c3IPCH4oUHbGD_XXOjwK0CI5YjL2TZFSkEYOA2WbA==&c=VeUsN5ylpZDSRzXN1ULAoPZ99jbzGcUfUQaI2fH0UH5h3_zirnBiGw==&ch=aO-9_MsPv4BLd7ECgnbszAiN2RajnqOIlq1WyiWQjtW6rY0pC0850w==>

[https://files.constantcontact.com/ee1208b4001/e25f6bcf-26a8-4e59-91f2-cc248962042d.png]<https://opiayfbab.cc.rs6.net/tn.jsp?f=001hrdZcoBGtKW0r3kIqLvndSQZTAtF8S1YkyUK_MN5cJi7zjc5c2kIi8eed9Z7ol8dJVUMcNtGZ2PQv_ZnOyfDc4ubBtsTj_Y4g-_pwT1xpZ2avfmnFJPoJ31mzyvHHlE0mio6ouJ7g3R8l_G3AhEfEgWIhyvUa1Sk&c=VeUsN5ylpZDSRzXN1ULAoPZ99jbzGcUfUQaI2fH0UH5h3_zirnBiGw==&ch=aO-9_MsPv4BLd7ECgnbszAiN2RajnqOIlq1WyiWQjtW6rY0pC0850w==>

Webinars for You

NOTE: All webinars begin at 3 pm ET / 2 pm CT / 1 pm MT / 12 Noon PT and are one hour long.
·     September 25: [GRAPHICS] Make Your Own Animated Greeting Cards wiht Music and Voice
·     October 9: [WORD/Google Docs] Mastering Document Templates and Formatting
·     October 23: [GRAPHICS] Use AI Tips and Strategies to Solve Problems and Craft Perfect Text
·     November 6: [INTERNET] Organizing Your Documents in Cloud Storage

View Webinars and Register Here<https://opiayfbab.cc.rs6.net/tn.jsp?f=001hrdZcoBGtKW0r3kIqLvndSQZTAtF8S1YkyUK_MN5cJi7zjc5c2kIi4Lm_xY1pG4NX-x5Ej7qYg0a0iELECTFJGaOWvi-1RCmFIY3Vlt8Bjp3hQQa8lul3hOuC3wx8inUlXtvpzzr2A15Ry8muLVmon_PUacHkwSqDpWWqS9AKfc=&c=VeUsN5ylpZDSRzXN1ULAoPZ99jbzGcUfUQaI2fH0UH5h3_zirnBiGw==&ch=aO-9_MsPv4BLd7ECgnbszAiN2RajnqOIlq1WyiWQjtW6rY0pC0850w==>

WEB DESIGN - What Makes Good ALT Text?

Intermediate

Have you ever been viewing a website page (or reading an email) and a picture doesn't load? You just see a tiny little box that is a placeholder for the image. There might be some text describing the image which is referred to as ALT text (an acronym for alternative text, a description of the picture).

There are other important reasons for having this descriptive text. Why do you need to know this? If you are making any changes to a website (or email) you will want to add this ALT text for every image. TIP: Watch for next week's Tech-Talk where we'll show you a tool that makes creating ALT text easy. Let's first look at what makes "good" ALT Text.

Why Add ALT Text?

[A screenshot of a WordPress media library interface. It shows an entry with a child wearing sunflower-shaped sunglasses standing in a field of sunflowers under a clear blue sky. The child is in a yellow outfit, smiling and having a joyful time in the sunny field.]

When you're viewing a website page or email, you typically don't see this bit of text as it is built into the HTML code in the backend of a web page, but it serves several important purposes:

1. Accessibility. First and foremost, these text descriptions help visually impaired users that are using screen readers understand the content of images. Instead of seeing an image, the ALT text is read aloud to help the reader visualize the what is in the picture.

2. Search Engine Optimization (SEO). A search engine (like Google) will use the text in ALT tags to understand the content of images. This can improve search engine rankings for that website page.

3. Image Failure to Load. And as mentioned earlier, sometimes when you're viewing a website page, an image may fail to display due to an error (such as a broken link). In this case, the ALT text will be visible in its place, providing readers with the image description.

So the ALT Tag, in describing the image, helps both the website users and search engines understand what the image represents.

TIP: Don't confuse a Caption with ALT Text. A picture Caption is meant to be visible to all readers on the page to give more context to how the image relates to the text around it.

What Makes Up an ALT Tag?

Actually, you won't see the ALT Tag and ALT Text (unless you're using a screen reader or the image doesn't load). But it's good to know what is going on, especially if you are working on a web page. Every image should have a good explanation in the ALT Tag.

The "Tag" (also referred to as ALT Attribute) has two parts for the screen reader to use:
1.  The location of the image - where that file is saved on the website (See red text below).
2.  The descriptive text (See green text below).

If you were to view it in the website code, it looks something like this:

<img src="https://www.tech-talk.com/images/name_of_image.jpg" alt="A clear and concise description of the image.">

If you are one of the people who have difficulty adding images with great ALT Text, we have some principles for you.

For instance, below are different examples of ALT text descriptions for this image.

[A man is doing push-ups on a wooden floor with a slightly frightened golden retriever lying on his back. A bottle of water, and a banana are on the floor nearby.]

POOR: [empty, no text added]

OKAY: A man doing push-ups.

BETTER: A man doing push-ups with a dog on his back.

GREAT: A man is doing push-ups on a wooden floor with a slightly frightened golden retriever lying on his back. A bottle of water, and a banana are on the floor nearby.

If you were unable to view the picture, see how you get a better visualization in your mind of what is in the image with more descriptive ALT text.

ALT Text Considerations

When crafting the ALT text for an image…
·     Keep it short and specific. Strive for concise and informative.
·     Determine the message the image conveys not only "what" is in it.
·     Use complete sentences with proper punctuation.
·     Put the most important information first in case it gets cut off.
·     Use keywords that will help in SEO (Search Engine Optimization) but avoid adding too many (referred to as keyword stuffing).
·     Don't include the words "image" or "picture" as it is assumed because an ALT tag describes an image. For example, don't say, "In the picture it shows…"
·     Avoid abbreviations or acronyms.
·     Check your spelling.

Now, using these principles, let's take a look at a few more examples. Here are some pictures showing both poor and well-written ALT text.

[https://files.constantcontact.com/ee1208b4001/5a52b211-bed9-42fd-a185-2b790639a21a.png]

POOR: A boy sitting on the floor reading a book.

GREAT: A young child with blond hair sits cross-legged on the floor in a library, engrossed in a book. The background shows shelves filled with colorful books. He is wearing a blue shirt and appears focused on reading.
[https://imgssl.constantcontact.com/letters/images/1101116784221/S.gif]
[https://files.constantcontact.com/ee1208b4001/4b2be705-5f86-4715-a72f-179d34b12e18.png]

POOR: Box of colorful vegetables.

GREAT: A wooden crate filled with freshly harvested vegetables sits on the ground amidst green grass. The crate contains carrots, red and green bell peppers, cucumbers, tomatoes, beets with leafy tops, and other colorful vegetables.

NEXT Tech-Talk: You might be thinking that creating ALT text takes a lot of time to accurately describe each image that you load into a website page or add to an email. It would, if you didn't have an app to help!

We've got a time-saving tool that uses AI … and magically creates your ALT text descriptions for you, instantly! Watch for it in next week's Tech-Talk email.

[A series of smooth, dark stones arranged in a line, half-submerged in calm, reflective water with a soft, gray background.]

Communication: Grammar

Do you want to avoid "all of"?

OK, grammar is often a matter of preference, rather than right or wrong, informal or formal. Today's idea falls into that bucket of personal taste, and in this case, a difference in language culture.

A true story: Once, having been smitten by the love bug with a Canadian gentleman, we had plenty of time to talk and discuss all things in life. It was natural to notice when he or I did something that was peculiar to our country's heritage.

Apparently, my use of the term "all of" was particularly American. He believed that adding the word "of" was grammatically incorrect. So I might say, "All of the books I wanted had been checked out."

His contention was that it should be, "All the books I wanted..."

That made me pay attention to the phrase. Adding the word "of" is really unnecessary and leaving it out, crisps up the sentence. So I thought I'd write about the choice in this article.

Of course, I looked up the correct phrase on the Internet, and found that either way (all of or all) were right. Amusingly, some said "all of" was more informal, while others said the exact opposite. (Of course, I bet the authors of all these statements were seeing these terms through American eyes. :-)

Which is right? Apparently both ... depending on where you live.

[https://files.constantcontact.com/ee1208b4001/b13a7a6a-7445-4d8e-b741-4b475385ef5b.png]<https://opiayfbab.cc.rs6.net/tn.jsp?f=001hrdZcoBGtKW0r3kIqLvndSQZTAtF8S1YkyUK_MN5cJi7zjc5c2kIi2NjMKcKcudJAU2nc-dIdDGTJMzf9pVaXsOFtAqcAr6FNTf5lk6zjXUh9EmsJhtJQ6-_rIGue3lTKP0BOlX58e6wtrFkGG5yw7jt8i2BIm60E9r1XnKF0EI=&c=VeUsN5ylpZDSRzXN1ULAoPZ99jbzGcUfUQaI2fH0UH5h3_zirnBiGw==&ch=aO-9_MsPv4BLd7ECgnbszAiN2RajnqOIlq1WyiWQjtW6rY0pC0850w==>

[Ask a question]<https://opiayfbab.cc.rs6.net/tn.jsp?f=001hrdZcoBGtKW0r3kIqLvndSQZTAtF8S1YkyUK_MN5cJi7zjc5c2kIi_E8niGg25yU7XfvLKNsCOAC5Sn8JzNZ7wBy_rFOY8AGJTe1Ywx-T39TT2m02wtc5omxArH8O-E3CnAt24K--y47IVhAYqCPAyiiS_VmKRdlN3abfJ45plE=&c=VeUsN5ylpZDSRzXN1ULAoPZ99jbzGcUfUQaI2fH0UH5h3_zirnBiGw==&ch=aO-9_MsPv4BLd7ECgnbszAiN2RajnqOIlq1WyiWQjtW6rY0pC0850w==>

Copyright 1996-2024 Shared Results International. Published weekly. Distribution is limited by license. For information on how to include additional recipients, contact support at tech-talk.com<mailto:support at tech-talk.com> 585-615-7795.

Cheers,
Darci Hanning, MLIS (she/her/hers)
Public Library Consultant / CE Coordinator
Continuing Education Resources: https://libguides.osl.state.or.us/conted
State Library of Oregon | Library Support and Development Services
971-375-3491 | darci.hanning at slo.oregon.gov<mailto:darci.hanning at slo.oregon.gov> | www.oregon.gov/library<http://www.oregon.gov/library>

[State Library of Oregon (Logo)]

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://omls.oregon.gov/pipermail/techtalk/attachments/20240917/7d985031/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image001.png
Type: image/png
Size: 15548 bytes
Desc: image001.png
URL: <https://omls.oregon.gov/pipermail/techtalk/attachments/20240917/7d985031/attachment.png>