Images are one of the most important parts of a website. They tell your story, illustrate your mission, and grab people’s attention to draw visitors into the site. Images are used on every aspect of a website; often the first thing a visitor will see on the homepage is a large welcoming hero image.
But what about your visitors that rely on screen readers to access your site? What is their experience?
That’s where alt tags come in. They are often overlooked or ignored on many sites, but this important feature of web design deserves more attention to make sure your site is as accessible as possible.
While there is no substitute for quality, hand-crafted alt tags, AI tools can write quality alt tags in minutes that would normally take you dozens of hours to complete manually, allowing you to focus on your mission. This is especially true if you have hundreds of thousands of images on your site.
Alt tags, short for “alternative text,” are attributes added to image tags in HTML to provide a text alternative for search engines and assistive technologies like screen readers. When an image cannot be displayed—whether due to loading issues, broken links, or because a user is utilizing a screen reader—the alt tag offers a descriptive text of the image’s content.
The primary purpose of alt tags is to ensure that all users, regardless of their abilities, have access to the information conveyed by images. For individuals who are visually impaired and rely on screen readers, alt tags provide a narrative description of images, making web content more inclusive and navigable.
While often overlooked, search engines use alt tags when returning results to people searching for your offerings, making them a critical component of search engine optimization (SEO). Well-crafted alt tags can help your website rank in search engine results, driving more traffic to your site. This is especially beneficial for nonprofit sites where images are used to convey emotion and activate your supporters on issues.
Alt tags can enhance the overall user experience by providing context when images fail to load due to slow internet connections or technical glitches. Instead of leaving users guessing what might have been there, alt tags ensure that the information isn’t lost.
Writing good alt tags is an art that balances brevity with descriptiveness. Here are some best practices to follow:
Aim to provide a clear and concise description of the image. Focus on conveying the image’s context and its relevance to the surrounding content without being overly verbose.
For example, if an animal rescue organization has an image of a man working with puppies, many organizations will default to “Man with Puppies,” which doesn’t really describe the image. A better alt tag would be: “A smiling man in a volunteer t-shirt cuddling a group of playful puppies at a sunlit outdoor enclosure of a nonprofit organization dedicated to providing support for homeless animals and facilitating adoptions.”
You should incorporate relevant keywords to improve your website’s SEO but do so judiciously. Keyword stuffing can negatively impact the user experience and may be penalized by search engines.
Steer clear of phrases like “image of” or “picture of.” Screen readers often add such phrases to alt tags, making them redundant.
The context in which the image appears is crucial. Tailor the alt text to reflect how the image contributes to the surrounding content, ensuring it adds value for users who cannot see it.
Not all images are created equal. If an image is purely decorative and doesn’t add informational value, use an empty alt attribute (i.e. alt=””). This approach signals to screen readers to skip the image, preventing the cluttering of a user’s experience with unnecessary descriptions when it doesn’t add to the context of the page.
There is no substitute for quality, hand-crafted alt tags. Using your nonprofits internal team or a trusted agency partner, like Cornershop Creative, to craft text using the language above is always the best way to go. After all, you know your content, your audience, and what you’re looking to convey. However, doing so is time consuming or expensive, and many nonprofits don’t have the resources to do this for the hundreds, if not thousands of images on their sites.
AI technology works best when it’s supplementing your efforts. AI tools can write quality alt tags in minutes that would normally take you dozens of hours to complete manually, allowing you to focus on your mission.
Cornershop AI-Powered Alt Tag Generator will take the images from your site and update existing alt tags and create new alt tags for all images in your site. It will return a spreadsheet that you can review and edit, before it is uploaded. Cornershop will take care of all the heavy lifting of generating the alt tags and uploading them back into your site.
The best part of this process is that you’ll get a sense of how to create alt tags, so when it’s time to upload new images, you’ll be armed with the knowledge to create high quality alt tags for any new images.
In addition to helping keep your media library clean, Media Deduper Pro also can identify media library items without ALT tags. It sounds esoteric, but not including ALT tag content with your images makes your site content harder for search engines — and screen reader users — to understand. Media Deduper makes it easy track down where you need to add image descriptions.
There are a variety of free and paid WordPress plugins that will automatically generate all alt tags as you upload images. This includes:
However you decide to create alt tags, making them is important. It shouldn’t be a matter of creating them for SEO or checking a box for accessibility compliance—it’s about fostering an inclusive experience where content is accessible to everyone, regardless of their physical capabilities. By diligently crafting alt tags for the images on your website, you not only enhance the user experience for a broader audience but also contribute to a more equitable and open internet.
