Mastering Alt Text: Boost Accessibility & SEO
Discover the dual power of alt text for an inclusive, visible web presence.
Welcome
Today, we're going to chat about something called "alt text". If you're new to web development or looking to improve your skills, understanding alt text is a great step forward. It's a simple concept, but it's super important for making your website friendly to everyone and getting noticed by search engines.
So, what is alt text? It's a short description that you add to the images on your website. This helps people who can't see the image understand what's in it. They might be using a screen reader because they have difficulty seeing, or maybe the image didn't load properly.
But here's the cool part - alt text isn't just good for people, it's good for search engines too. Search engines like Google can't see images, but they can read alt text. This helps them understand what's in the image and can make your website show up in more search results.
In this post, we're going to learn how to write good alt text that helps both people and search engines. So whether you're a beginner or have some experience, stick around and let's dive in!
Alt Text
Alt text, short for "alternative text", is a feature in HTML that you can add to images on your website. It provides a text description of the image, which can be read by screen readers. Screen readers are software that read out the content of a webpage for people who have difficulty seeing or reading text, making websites more accessible for them.
<img src="kitten.jpg" alt="a kitten with a ball of yarn">In this basic code example, the alt text "a kitten with a ball of yarn" gives a clear description of what's happening in the image. If a person can't see the image for any reason, the alt text helps them understand what they're missing.
Please note that the text appearing below the image of the cat is a caption, not alt text. These are two different things. A caption is a visible text description that accompanies an image, typically providing context or additional information about the image for all users to see. On the other hand, alt text is a hidden description that is primarily used by screen readers to help those with visual impairments understand the content of the image.
When using Blocs Website Builder, selecting an image bric on the design canvas will show you the following options in the right side panel. Here you can enter your alt text.
Writing Effective Alt Text
Writing good alt text is a balance between being descriptive and being concise. Here are some tips to help you write effective alt text:
Describe the Image: Try to convey the content and the purpose of the image. If the image is a chart or infographic, summarise the key information or data it presents.
Be Concise: Keep your descriptions to the point. A good rule of thumb is to aim for about 125 characters or less.
Avoid Redundancy: Don't use phrases like "image of" or "picture of" in your alt text. Screen readers already announce an image, so this information is redundant.
Don't Forget SEO: If it's relevant and makes sense, include your SEO keywords in the alt text. This can help search engines better understand your content and improve your website's visibility in search results. But remember, your primary goal is to describe the image, not to stuff keywords.
The purpose of alt text is to make images accessible to all users and to help search engines understand the content of your images. By keeping these tips in mind, you can write effective alt text that achieves these goals.
What about images that are links?
The alt text for an image used as a link should describe both the image and the link’s destination. This is important for accessibility, as screen readers will use the alt text to provide context for the visual impaired users.
For example, If you have an image of a shopping cart that links to a checkout page, a good alt text could be “Shopping cart leading to checkout page”.
A basic code example of this would look like…
<a href="checkout.html">
<img src="cart.png" alt="Shopping cart leading to checkout page">
</a>What about decorative images?
Sometimes, images on a website are purely decorative. This means they don't add any specific information but are there to make the website look better or to support the overall design. For example, a decorative image could be a divider line used to separate different sections on a page.
For these images, you might be wondering what to do about alt text.
Well, the best practice for decorative images is to use an empty alt attribute (alt=""). This tells screen readers to skip over the image as it doesn't contribute any meaningful content or information.
Here is a basic example of how that looks in code:
<img src="divider-line.png" alt="">By doing this, you ensure that users of screen readers aren't bombarded with unnecessary information.
Remember, the goal of alt text is to improve accessibility and provide context. If an image is purely decorative and doesn't add context or information, it doesn't need descriptive alt text.
So, whether an image is content or decoration, always consider how you're using the alt attribute to make your website more accessible.
Alt Text Generators
While writing alt text manually is the best approach to ensure accuracy and relevance, there are also tools called alt text generators that can help automate the process. A quick google will provide you with many to try out. These tools use artificial intelligence to analyse the image and generate a description. For example, I uploaded a test image of a cube and the resulting alt text recommendation was “a close-up of a cube”. As you can see, the generator was able to identify the main subject of the image, but it didn't provide any additional context or details.
So these tools might miss subtle details or context that a human writer would catch. If you use an alt text generator, it's a good idea to review and edit the generated alt text to ensure it accurately represents the image and its context on your page.
Conclusion
As we wrap up, it's clear to see that alt text plays a vital role in both web accessibility and SEO. By providing a concise and accurate description of your images, you can make your website more accessible to a wider audience, including those who rely on screen readers. At the same time, well-crafted alt text helps search engines understand your content better, potentially boosting your visibility in search results.
Whether you're writing alt text yourself or using an alt text generator, remember the key principles we've discussed: be descriptive, be concise, avoid redundancy, and consider SEO where relevant. By doing so, you'll be taking a significant step towards creating a more inclusive and discoverable web.
Interested in learning more about web development, accessibility, and SEO? Make sure to subscribe to our posts! We have a lot more insights and tips to share in our upcoming posts. By subscribing, you'll get all the latest updates directly in your inbox.
Keep exploring, keep learning, and keep making the web a better place for everyone. Stay tuned for more insights and tips in our upcoming posts!
— Pete