Why Web Accessibility and ADA Compliance Matter: Part 3 – Alt Text

In our previous blog post in this series on ADA compliance and website accessibility we broke down the four ways you can have an impact on your association’s web presence no matter what platform you are using and in part three we are doing a deeper dive into using alt text: Ensuring that all images have descriptive alt text for screen readers. 

1. Identify Images That Need Alt Text: 

• All Images: Ensure that every image on your website has an alt attribute in the HTML. This includes photos, diagrams, icons, buttons, and decorative images. 

• Exceptions: If an image is purely decorative and does not convey any meaningful content (e.g., a background image), you can use an empty alt attribute (e.g., alt=””) to indicate that screen readers should skip it. 

2. Write Descriptive Alt Text: 

• Be Specific: The alt text should describe the content and function of the image as specifically as possible. For example, if the image shows a person using a laptop, the alt text might be “Person using a laptop at a desk.” 

• Consider Context: Tailor the alt text to the context in which the image appears. For example, if the image is linked to an article about remote work, the alt text might emphasize that connection, such as “Remote worker using a laptop at home.” 

• Functionality: If the image is a button or has a specific function, describe that function. For example, an image that serves as a “Search” button should have alt text like “Search” or “Submit search.” 

Watch an explainer video below about descriptive alt tags:

3. Avoid Redundancy: 

• No Need for “Image of…”: Avoid starting alt text with “Image of…” or “Picture of…” as screen readers already identify the content as an image. Go straight to the description. 

• Keep It Concise: Aim to keep the alt text brief and to the point, usually under 125 characters, so that it’s quickly understandable by users and screen readers. 

4. Use Tools to Check for Missing Alt Text: 

• Automated Tools: Use website auditing tools like WAVE (Web Accessibility Evaluation Tool), Axe, or Lighthouse to scan your website for images that are missing alt text. 

• Content Management Systems (CMS): If you’re using a CMS like WordPress, Drupal, or Joomla, many have built-in tools or plugins that help you manage and ensure all images have alt text. 

5. Test with Screen Readers: 

• Manual Testing: Test your website using a screen reader like NVDA (NonVisual Desktop Access) or Voice over to ensure the alt text you’ve provided makes sense in context and provides a good user experience. 

• User Testing: If possible, have users who rely on screen readers test your site to provide feedback on how useful and descriptive your alt text is. 

Watch a video below on how a screen reader works:

6. Continuous Maintenance: 

• Regular Updates: Whenever you add new images to your website, make sure to include appropriate alt text as part of your content creation or upload process. 

• Review Old Content: Periodically review older content to ensure that all images still have appropriate and accurate alt text. 

Example of Good and Bad Alt Text: 

• Image: A photo of a Golden Retriever playing in a park. 

• Good Alt Text: “Golden Retriever playing fetch in a grassy park.” 

• Bad Alt Text: “Dog” or “Image of a dog.” 

By following these steps, you can ensure that your website is accessible to users who rely on screen readers, improving their experience and making your site more inclusive an remember if you didn’t pick the platform that you are working with and are stuck with whatever limitations that app or content management system may have, you can still make your content as accessible as possible.