Writing Alt Text for Images in Blog Posts

I’m back with a quick accessibility tip - alt text for linked images is different from alt text for regular images! Regular images - the alt text should describe the picture Linked images - the alt text should explain where the link goes This is a bit of a follow up to my post from last week about how alt text can be hard. So much of it is based on context! Alt text for linked images can be easier than regular alt text because it's often more objective though. Screen readers announce alt text as the link text for linked images, which means it’s important to let people know where the link goes. Here are some examples: - A linked site logo at the top of the page can say something like “My Amazing Site homepage” instead of “My Amazing Site logo”. - A linked arrow to go to the next page can say something like “next page” instead of “right arrow” (but it’s better to have linked text that’s visible for everyone that says “Next page” next to the image). - A search icon button can have alt text that says something like “search” instead of “magnifying glass”. A few other things to note: - Linked images shouldn’t be considered decorative unless they’re grouped with text that’s linked. If a linked image doesn’t have alt text then it’ll be challenging for people to understand what the link is for. - Alt text for linked images doesn’t need to say things like “click for…” or “link to…” because screen readers announce when something is a link. - Shorter alt text is often better with linked images (as long as it’s clear). “Our products” is more straightforward than “This linked picture goes to our product page full of great products” and clearer than “products”. This is one of those small changes that can make a big difference! Here are a few resources for linked images: - Alt text and linked images from WebAIM (article) - https://lnkd.in/e8QyuRxz - Linked Images from the University of South Carolina (article) - https://lnkd.in/eXiz497b - Writing Alt Text for Hyperlinked Images from Bureau of Internet Accessibility (article) - https://lnkd.in/eXESeYX9 Feel free to share more tips in the comments!

Alt Text vs. Description: When to Use Each (or Both!) 🎨 As Instructional Designers, we often hear about alt text and descriptions, but knowing when to use them can be tricky. Let’s break it down. First what is alt text? A concise explanation of an image for screen readers. When do I use it? Use it when the image adds essential information to the content (e.g., a chart, infographic, or key visual). How do I use it? Provide a clear, short summary of what’s important about the image (125 characters or less). Example: “Line graph showing a 20% increase in sales from Q1 to Q3.” Okay, so when do I use descriptions? When a more detailed explanation of an image or visual is presented is needed to understand the content. What is the purpose? It paints a richer picture for all users, not just those using assistive technology. Example: “The graph illustrates a steady sales increase, with Q1 starting at $10M and Q3 reaching $12M. Key factors include improved marketing strategies.” Okay, when do I use both? When the image is essential to understanding the content and contains intricate details requiring additional explanation. Use alt text for a brief summary and include a full description within the surrounding content. Example: Alt text for a graph could summarize trends, while the description explains the nuances. Alt text is for screen reader users. Descriptions benefit everyone, enhancing understanding for all users. 💡

Alt text isn't optional - it's a requirement for accessible content! When we add text alternatives to images, audio, and video we're not just following WCAG 1.1.1. We're also building a web that includes everyone. In this carousel, I break down the essentials of WCAG 1.1.1 - what it covers, how to write better alt text, and when to skip it entirely. Swipe through 👉 #Accessibility #AltText #InclusiveDesign #WCAG #A11y If you prefer your content as text, read on: 1. Alt text isn't optional. Understanding WCAG 1.1.1. Slide includes an image of two people sitting at a table using laptops. One is using a refreshable braille display, the other is using a screen reader. 2. What is WCAG 1.1.1? Any content that isn't text needs a text alternative. That's what 1.1.1 is all about. 3. Why it matters. Text alternatives make digital content usable by screen reader users, people with slow internet, users with cognitive disabilities, and even search engines. 4. How to write better alt text. Be clear and accurate, but concise. Describe the meaning of the image, not just its appearance. Skip "Image of...". Use empty alt attributes for decorative images. 5. Alt text example. Slide includes an image of a line chart with a good and bad example of alt text. The bad example simply reads "graph". The good example reads "Line graph showing sales increasing from 19 in January to 38 in May" 6. Alt text example. Slide includes a photo of a dog with good and bad example alt text. The bad example is "dog". The good example is "Golden retriever puppy lying in the grass with a ball" 7. What about decorative images? Some images don't add meaning, they're just there for flair. In that case, use an empty alt attribute so screen readers skip them. Slide includes a decorative blue spiral image with empty alt text next to it indicating that's how it should appear in the HTML. 8. Don't forget audio and video! Audio? Provide a transcript. Video? Provide captions or a transcript. 9. Complex visuals need more than alt text. For infographics, diagrams, complex charts and other complex visuals, use brief alt text and a detailed description nearby. 10. An infographic showing the water cycle is shown with the alt text "Infographic describing the water cycle. Full description below". Below, that we can see a heading that reads "The water cycle" and a paragraph of text starts that reads "The water cycle describes how water moves through the environment. Water evaporates from oceans, lakes, and rivers..." 11. Make forms accessible too. Every input needs a label. Make sure it's programmatically connected. 12. Accessible email field. Shows a screenshot of a form field labeled "Email address" followed by the correct HTML for marking up the form field. 13. Alt text = inclusion. Alt text helps real people. Small effort, big impact. 14. Learn more. Want more clear and actionable WCAG breakdowns? WCAG in Plain English is coming soon! Follow me for news and updates.