Alt text, or alternative text, is a crucial component of both accessibility and search engine optimization (SEO) strategies. When implemented correctly, alt text helps ensure that visual content is accessible to users who rely on screen readers and also provides valuable context to search engines about the content of an image. This article explores the role of alt text in SEO, the best practices for writing effective alt text, and the tools that can help verify and improve the quality of alt text on a website.
The Role of Alt Text in SEO
Alt text is a type of HTML metadata that is added as part of an <img> tag on a webpage. The primary function of alt text is to convey the essential information of an image when the image itself cannot be seen. This could be due to a visual impairment, a broken image link, or the use of a screen reader. For example, instead of seeing a photo of a golden retriever, a screen reader might announce: “A golden retriever puppy playing with a tennis ball.”
Beyond its role in accessibility, alt text also plays a behind-the-scenes role in SEO by giving search engines more context about the content of a webpage. Search engines use alt text to index images, which can help improve the visibility of a website in image search results. For instance, an image of a takeaway pizza in its box would be accompanied by the alt text tag “a pizza in a takeaway box,” rather than “pizza 1” or similar. This descriptive alt text helps search engines understand the content of the image and how it relates to the overall content of the webpage.
Best Practices for Writing Alt Text
When writing alt text, it is important to keep descriptions specific, concise, and focused on the image’s purpose. Avoid redundant phrases like “image of…” and refrain from keyword stuffing. Aim for under ~125 characters for clarity and usability. For charts, infographics, or multi-layered images, use concise alt text (e.g., “Bar chart: 2024 monthly sales by region”), and provide a longer text description or data table elsewhere for full context.
If an image is decorative and does not add new or pertinent information, it is appropriate to leave the alt text field blank. This is equivalent to rendering the alt attribute as alt="". In such cases, the image serves an aesthetic purpose rather than conveying specific information, and therefore does not require a detailed description.
For images that contain pictures of text or other informative content, the alt text becomes a substitute for what is seen in the image. When writing alt text for these types of images, imagine describing the image to someone who cannot see it. Provide an objective description of what is visible in the image, much like writing a Haiku—descriptive yet succinct.
Tools for Checking and Improving Alt Text
Several tools can help verify the presence and quality of alt text on a website. Browser developer tools, such as those found in Google Chrome, Microsoft Edge, and Firefox, allow users to inspect image elements directly on a webpage. To use these tools, right-click on an image and select Inspect. In the HTML pane, find the <img> tag and look for the alt attribute. If it is missing or irrelevant, the issue can be identified immediately.
SEO audit tools like Screaming Frog SEO Spider, SEMrush, Ahrefs, and Moz Pro can scan an entire website and flag images that are missing alt text or have unoptimized descriptions. These tools provide detailed reports that can help identify areas for improvement. For example, Screaming Frog SEO Spider can be used to crawl a website and filter the results by “Missing Alt Text” or “Alt Text Over 100 Characters.” This allows users to quickly identify and address issues with alt text.
Accessibility checker tools and browser extensions can also be used to ensure that a website meets accessibility standards like WCAG. These tools highlight alt text issues and other web accessibility problems. For example, AccessibilityChecker.org offers both free and paid scans that can help identify whether alt text is missing on a site and where other accessibility issues may exist.
Adding Alt Text in Website Builders
Many website builders, such as Squarespace, Wix, and others, provide options for adding alt text to images. In Squarespace, for instance, users can select the image block on a page, click Design > Image Editor, and then scroll to the Filename or Alt Text section. They can then type their alt description and save it. Similarly, in Wix, users can click on the image, select Settings or Edit, and find the Alt Text field under Image Settings to add their description.
Social media platforms are also increasingly accessibility-conscious and provide options for adding alt text to images. For example, on Instagram, users can go to Advanced Settings when creating a new post and select Write Alt Text under Accessibility to add their description. On Twitter (now X), users can upload an image when composing a tweet, click +ALT on the image, and enter their description (up to 1000 characters). LinkedIn and Facebook also offer similar features to add alt text to images.
Conclusion
Alt text plays a vital role in both accessibility and SEO. By providing a textual description of images, alt text ensures that all users can understand the purpose and message of visual content. Additionally, alt text helps search engines index images and understand the context of a webpage, which can improve visibility in image search results. When writing alt text, it is important to be descriptive, concise, and focused on the image’s purpose. Avoid redundant phrases and keyword stuffing, and consider leaving the alt text field blank for decorative images. Several tools are available to check the presence and quality of alt text on a website, including browser developer tools, SEO audit tools, and accessibility checker tools. By following best practices and using these tools, businesses can ensure that their images are both accessible and optimized for search engines.