Everyone knows what alt text is and that it’s necessary. However, many forget that it’s primarily for people with disabilities and often fail to write it in a way that truly serves this purpose.
In this guide, we’ll show you how to write alt text for images that is both accessible and SEO-friendly. By the end, you’ll have the knowledge to master it.
Alt text is important for two key reasons: accessibility and SEO.
The primary purpose of alt text is to make images accessible. It helps visually impaired and low-vision users understand the content of images on a webpage. It also benefits users with low-bandwidth connections by describing images when they fail to load.
In addition, alt text plays a big role in SEO. It helps search engines like Google understand and rank your images in image search results. While accessibility should always come first, well-written alt text can boost your website’s SEO.
Also, missing alt text is considered an accessibility violation and could put you at risk of legal consequences under laws like the ADA (Americans with Disabilities Act), EAA (European Accessibility Act), and Section 508 compliance requirements.
Not all images need alt text.
If it doesn’t add value for the user, it’s better to leave it out. Unnecessary alt text frustrates screen reader users instead of helping. Thankfully, W3C (World Wide Web Consortium) provides clear guidelines on which images require alt text.
The W3C provides an alt Decision Tree for a quick overview of how to determine which category an image fits into. This tool is especially helpful if you’re unsure whether an image needs alt text or how to write it effectively.
Short answer: As concise as possible, while still adequately describing the image and conveying its purpose.
Long answer:
The W3C (World Wide Web Consortium) states that alt text should be the most concise description possible of the image’s purpose, ideally a short phrase or sentence.
For complex images that need longer descriptions, such as charts or infographics, they suggest linking to a more detailed explanation rather than overloading the alt text itself.
Search engines like Google don’t impose any guidelines on alt text length. As Google’s Search Analyst John Mueller explains:
“We don’t have any guidelines with regards to how long your alt text can be. So from a Google Search point of view, you can put a lot of things in the alt text for an image, if that is relevant for that particular image.”
So from an SEO perspective, alt text can be as long as you want, as long as it remains relevant and avoids keyword stuffing.
Writing good alt text is simpler than you think.
If we had to put it simply, here’s the secret to writing alt text that’s both accessible and SEO-friendly: identify the details relevant to the topic or context, convey them as concisely as possible, and naturally include relevant keywords.
For many users, this one-sentence tip might not be enough – they need more guidance on best practices and how to implement them effectively. If that’s you, here are 5 tips to help you write alt text that’s both accessible and SEO-friendly.
When writing alt text, focus on the details that matter most to the topic or context of your content. Including unnecessary details can overwhelm users and dilute the effectiveness of the description.
Consider this example: the details provided depend on the website’s genre or the context of the content.
The key is to tailor your alt text to the image’s role in your content. Avoid describing every element of the image unless it’s essential to understanding the context. This approach keeps your alt text concise, meaningful, and user-focused.
Use just a few words or a single sentence, depending on what the image requires. Avoid long descriptions with flowery language or filler words, as they can distract screen reader users and confuse search engine crawlers.
But how short? We’ve already covered this in detail in the previous section, but for those skimming: a short phrase or sentence is usually ideal. For more complex images, consider using the technique explained below.
Some images, like charts, graphs, or infographics, require longer descriptions to effectively convey their details and context. In such cases, you can use the longdesc
attribute to provide a link to a more detailed explanation.
For example, a pie chart showing sales distribution across regions might have alt text like “Pie chart showing sales distribution by region”, while the longdesc
link leads to a page with the exact percentages and deeper analysis.
You can learn more about implementing longdesc
on the W3C website.
To help search engines understand and rank your images, include relevant keywords in your alt text – but do so naturally. Focus on writing for users first and incorporate keywords only when they fit seamlessly within the description.
Consider the following example:
This description is clear and includes the keyword “waterproof hiking boots” without feeling forced.
This example overloads the alt text with keywords, making it unnatural and confusing for both users and search engines.
There’s usually no need to include words like “image,” “icon,” or “picture” in the alt text, as screen readers already announce the presence of an image. Only use such terms when it’s necessary to distinguish between types of visuals, like paintings, photographs, or illustrations.
Another key tip for writing alt text is to start with the most important information. This ensures that users relying on screen readers can quickly grasp the key details without having to listen to unnecessary descriptions first.
By now, you understand the importance of alt text. However, your website might have many images without alt text, and finding them manually can be challenging. Fortunately, there are automated tools to help.
WebYes is one of the best tools for checking missing alt text. Audit your website with WebYes, and it will identify images that need alt text while also highlighting other accessibility issues on your website.
If you have a WordPress website, you can use the Alt Text Generator AI plugin. With a simple click, this plugin scans your media library, identifies images without alt text, and uses advanced AI computer vision technology to create descriptive, SEO-friendly alt texts.
Alternatively, you can use tools like Sitechecker, Screaming Frog, and SEOptimer.
As mentioned earlier, you can use the Alt Text Generator AI to automate the process of writing alt text. The plugin generates alt text automatically and allows you to review it before finalising it. However, it is currently compatible only with WordPress websites.
Another excellent tool is ChatGPT. This AI chatbot can generate effective alt text when provided with a well-crafted prompt that follows best practices. To make it easier for you, we’ve created a prompt – simply upload the image, copy-paste the prompt, and you’re good to go.
ChatGPT prompt:
“I need you to generate alt text for this image. The alt text should focus on relevant details, use concise language, and naturally incorporate the specified keyword without keyword stuffing. Avoid redundant phrases like “image of” or “picture of.”
To generate the alt text, here is the input: [Explain the purpose or context of the image] and [Specify any keyword to be included naturally].
If the description becomes too long, provide two versions: a short alt text for quick understanding and a longer description for more detailed information. Generate the alt text based on this input while following accessibility and SEO best practices.”
Providing alt text is a small but impactful step toward making your website more accessible. It allows disabled users to engage with your content in meaningful ways, creating a more inclusive web experience for everyone.
However, accessibility doesn’t stop at alt text. To truly make your website fully accessible, you need to address other aspects, from navigation to design and compliance with accessibility standards. If you’re unsure where to begin, WebYes is here to guide you.
Run a free accessibility audit today with WebYes to detect barriers and start your journey toward a fully accessible website.