The internet is a treasure trove of visuals, overflowing with inspiration and information. Images are what draw us in, keep us engaged, and help us learn, and create. But imagine the internet without those visual cues—navigating it would be a real challenge.
Luckily, for people with visual impairments, those dealing with slower internet connections, and even the robots powering search engines, there's a simple yet powerful solution: alt text (short for alternative text). This unsung hero of the digital world ensures that everyone can access and benefit from the images we often take for granted.
What is alt text?
Alt text is exactly what it sounds like—a description of an image that appears on the page. Simple, right? But there's more to it than that. To write truly effective alt text, it's important to understand why it matters, when an image needs an alt attribute (spoiler alert: not every image does!), and the best tools to help you make sure your images are covered. Let's dive in and make your alt text work smarter, not harder!
Why alt text is important
Alt text isn't just a box to check—it's a powerful attribute that serves two important purposes: making your content inclusive and helping search engines understand your images.
Accessibility
Alt text provides a written description of an image for those who rely on screen readers or encounter issues loading images. It's there to ensure that no matter the barrier—be it visual impairments or low-bandwidth connections—your content remains accessible and meaningful to all users.
Without proper alt text, you risk not only making your site inaccessible to visitors but also potentially violating accessibility laws like the Americans with Disabilities Act (ADA), which could result in fines or other legal consequences. Similar laws are found throughout the European Union, Canada, the Republic of Korea, and Australia—just to name a few. If you're trying to make the case for an equitable online experience for your team, this is a great place to start.
Want to learn more about building an inclusive online community? Here are a few resources to get you started:
Search engine optimization (SEO)
Search engine crawlers pull several key details from an image, including its file name, captions, title, and alt text. Among these, alt text is the most important for helping search engines understand the image's subject within the page's overall content. This information works alongside the other content on the page to enhance search engine algorithms, boost your rankings, and drive more traffic to your site.
When writing alt text, aim for clear, meaningful descriptions that fit naturally with the page's content. Incorporate keywords thoughtfully, and most definitely resist the urge to overdo it—keyword stuffing not only disrupts the user experience but can also result in search engines penalizing your site as spam.
Not familiar with keyword stuffing? Keyword stuffing is all about cramming in as many keywords as possible in an attempt to boost rankings on search engine results pages. This doesn't work and often backfires. Here's an example:
Keyword stuffed alt text:
alt="Cute kitten playing with a ball of yarn, adorable kitten, fluffy kitten, playful kitten, cute kitten image, kitten for sale, kitten pictures."
Well-written alt text can both enhances accessibility and support your SEO strategy. Use your commonsense and keep your (human) site visitors top of mind.
How to know which images need alt text and how to write it
After all that, you may be surprised to learn that not all images require alt text. In fact, it becomes an exhausting experience for some users with screenreaders to endure fluffy alt text applied to images that don't provide any value. Luckily for us, the W3 has categorized web images and offered some tips about how to treat images within each category.
Here's how to write the right kind of alt text depending on what your image is for:
Informative images: These are the most common images found on sites and include pictures, photos, or illustrations that represent concepts or information. Your alt text should give a short description that conveys the essential meaning of the image.
For example, this image illustrates all of the integrations available with Automattic's P2, but those integrations are not named in the accompanying content. It's important here that the alt text provides that information for visitors that may not be able to see or load the image. It should look something like this:
alt="Logos for available P2 integrations: Crowdsignal, Figma, Twitter, GitHub, YouTube, Vimeo, Google Calendar, and Loom"
Decorative images: If an image is just there to look nice and doesn't add any important info, use a null alt attribute (alt=""). This tells assistive technologies to skip it.
Functional images: If an image works as a button or link, the alt text should explain what it does—not what it looks like.
For example, the alt text for a video icon might say "Watch this video about hibernating bees on Vimeo."
Images of text: If the image contains readable text (like a graphic with a quote or a logo), the alt text should include the same words.
Complex images: Charts, graphs, or diagrams need more detailed alt text to describe the data or information they present. You might even link to a longer description.
Groups of images: If multiple images work together to convey one idea, the alt text for one of the images should cover the whole message. A good example of this would be process shots for a recipe or other how-to tutorial that includes steps.
Image maps: For images with clickable areas, provide alt text that explains the overall purpose of the image, and include alt text for each clickable section describing where it leads.
Not sure how to categorize an image? Check out the W3 Images Tutorial for help.
While there are no official length guidelines, it's generally recommended to keep alt text under 140 characters. Longer descriptions can become tedious when read by screen readers. Be descriptive, but stay concise—this is not the place for creative flourishes.
Tools to ensure your images include alt text
The Chrome accessibility report is an easy-to-use resource built right into your browser, when you want to quickly test a single page on your site.
The Alt Text Tools from the NerdPress team is a free, light-weight plugin that generates a CSV file of the images used in your content, along with their alt attributes.
Once the scan is complete (it's very fast!), you can open the CSV file in the spreadsheet application of your choice. There you can quickly identify images that have missing alt attributes and scan for any that may need some improvement. The file also includes links to edit the posts where the images appear, making it quick and easy to update their alt attributes.
This freemium WordPress plugin from Equalize Digital goes beyond alt text to ensure your site is accessible to a wide range of visitors. If you and your team are committed to making your content accessible, this is a great resource.
Equalize Digital also runs a Facebook Group and hosts a monthly virtual meet up for WordPress developers, designers, and users interested in learning more about creating accessible websites that can be used by people of all abilities.
Alt text may seem like a small detail, but it plays a big role in making the internet more inclusive and user-friendly. By writing thoughtful, descriptive alt text, you're not just improving accessibility—you're also optimizing your content for search engines and enhancing the overall user experience. With the right approach and tools, adding alt text can be an easy step toward a more accessible and SEO-friendly site.
Start a blog on WordPress.com
Start optimizing your content with a blog hosted on WordPress.com.
Choose the plan that works best for your business, and let us manage the rest. With any WordPress.com plan, you get all the benefits of fast, secure managed WordPress hosting.
![[New post] Level Up Your Author HQ With GoCreate.Me](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sPUD7Dl6yRG3tbRv0urgXGvBmrZNTk0efmZ7D_lhLp9DJKcRNs7d5hLXUHvjJ1s8U9IpRul_cMtn3PYKtqBKM96v6v5uVi_zRFGY8dtdW6Nv4W51392Haf7w3Om7V4MDuCqk6WUyyhabNStmcctT3QoexrC5cHIV_Ccp0Txy78CaC4IfteONN3o2w2PhXmUA=w72-h72-p-k-no-nu)
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.