As a junior front-end developer working in an e-commerce creative agency, I am mainly tasked with transforming designs into code. Ideally, the code should not only be responsive, which is a standard nowadays, but also semantic and accessible. Working for an agency, however, often means dealing with clients and their demands. The Client is always right (except when they're not, which is quite often) so The Client thinks they can demand things done their way. And all would be well unless The Client wouldn't demand breaking some ground rules in modern web standards.

I've been tasked recently with coding a landing page, which included a quiz as a slider, one question per slide. There was a background image (same for each slide, purely decorative). Each slide was generated with JavaScript, so that I could use an array of objects containing information such as question, answer, and which button is correct (it was a yes/no type thing). Then came The Client with their list of alt texts. The Client wanted to include an alt text to the background image of each slide. The alt texts were meaningless and purely sales-oriented, not to mention way too long and not descriptive at all. As I'm merely a junior developer at the very end of the chain of command, and The Client is of the "I'm always right, do as I say" type, I had to figure out a way to satisfy those ridiculous wishes in the best possible way.

I never paid too much attention to alt texts or best practices, I usually wrote some short description of an image if it's inserted with HTML and never paid any attention to those inserted with CSS (as they are usually only decoration with no meaning). So I thought it's good to learn more about alt texts, their importance and best practices. In this article, we will explore the proper use of alt texts according to W3C standards, their relevance for SEO and best accessibility practices.

What are alt texts?

Alt texts are short, descriptive texts added to image elements in HTML that serve as substitutes for images when they cannot be displayed. These texts are essential for users with visual impairments who rely on screen readers to access web content. When an image lacks an alt text, screen readers may read out the filename or provide no information at all, creating a confusing and frustrating experience for users.

According to the Web Content Accessibility Guidelines (WCAG) by the World Wide Web Consortium (W3C), alt texts should be concise, meaningful, and provide an accurate description of the image's content and function. Avoid using redundant phrases like "image" or "picture" and instead describe the purpose and information conveyed by the image.

Image types based on content and meaning

Not all images are equal so not all of them need an alt text. Based on their meaning, we can distinguish several image types.

Decorative Images: For purely decorative images that do not convey any meaningful information, it's essential to provide an empty alt attribute or use aria-hidden="true" to indicate to screen readers that these images are not significant for content comprehension. From WCAG: "If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology".
Informative Images: Images that contain valuable information must have descriptive alt texts that convey the same information to users who cannot see the image. From WCAG, again: "All non-text content that is presented to the user has a text alternative that serves the equivalent purpose".
Complex Images and Graphics: Complex images or graphics, such as charts or diagrams, may need alternative ways of conveying their content, such as using descriptive text near the image or providing a link to a separate page with an in-depth explanation. It is a great use case for a longdesc attribute (or was, as it's now deprecated. Current recommendation is to encapsulate an image in a link using the a element or to use aria-details attribute).

brief aside: `longdesc` and `aria-details`

Initially, longdesc attribute was meant to provide a link to a longer description of information-dense images, like flowcharts, schematics and so on (think highly technical type of graphics, like this one). The description was meant to be used both by visually-impaired users, as well as those needing more explanation and could have either been on the same page, on another page, or included in data. W3Schools provides some examples of that. This attribute has been deprecated and the current recommendation is to wrap the image in the a element instead. Alternatively, aria-details attribute can be used to provide additional information related to the object. It has a broader use, it's not exclusive to images. Its main use is to provide additional information, complex descriptions or navigable content related to the object. More information regarding the best practices can be found here.

Why are alt texts important for SEO?

Beyond their primary role in web accessibility, alt texts also play a crucial role in Search Engine Optimization (SEO). Search engines, such as Google, use alt texts to understand and index images on web pages. properly optimized alt texts can have a direct impact on boosting the SEO performance of websites.

Here's why alt texts are vital for SEO:

Image Search Ranking: When users perform image searches, search engines rely on alt texts to understand what the images are about. By providing relevant and descriptive alt texts, we increase the likelihood of our images appearing in search results, potentially driving more organic traffic to our website.
Keyword Relevance: Alt texts provide an opportunity to include relevant keywords that are related to the content of the image and the webpage. However, it's crucial to use these keywords naturally and avoid stuffing alt texts with excessive keywords, as search engines frown upon such practices and may penalize websites.
Improved Page Relevance: Search engines consider alt texts as part of the broader context of a webpage. By crafting descriptive alt texts that closely relate to the page's content, we can boost the overall relevance of the page for specific search queries, ultimately contributing to better SEO performance.
Accessibility and User Experience: SEO and web accessibility go hand in hand. By providing meaningful alt texts, we not only make our websites accessible to users with disabilities but also enhance the user experience for all visitors. A positive user experience can indirectly impact our SEO rankings, creating a win-win situation.
Screen Reader SEO: Alt texts are crucial for users who navigate the web using screen readers. These assistive technologies rely on alt texts to provide relevant search results to visually impaired users. Crafting well-thought-out alt texts can significantly improve our website's visibility to users using assistive technologies.

Best practices for optimizing alt texts for SEO

Some essential best practices regarding alt texts optimized for SEO are as follows:

Be Descriptive: Crafting concise and descriptive alt texts is crucial. These texts should precisely convey the image's content and context, leaving no room for ambiguity. Avoid using generic or vague descriptions that might not provide meaningful information to users while staying concise.
Use Relevant Keywords: Including relevant keywords in alt texts can contribute to better SEO performance. Align these keywords with the image's content and the overall page, but ensure they are naturally integrated into the alt text. Avoid keyword stuffing, as it can harm SEO efforts.
Avoid Keyword Stuffing: Maintain a balance with keyword usage. Overloading alt texts with excessive keywords is not only penalized by search engines but also can negatively impact user experience. Focus on providing useful information to users.
Decorative Images: For purely decorative images that do not add valuable information, use empty alt attributes (alt="") or aria-hidden="true" to prevent them from being indexed and unnecessarily cluttering search results.
Context Matters: Al texts should align seamlessly with the surrounding content and the image's purpose on the page. Relevant and contextually appropriate alt texts enhance the overall user experience and improve page relevance for search engines.
Screen Reader Testing: One way I ensure that alt texts are serving their purpose is by testing them with screen readers. Verifying that screen readers read the alt texts accurately and provide meaningful information to visually impaired users is essential for creating an inclusive web experience.

Alt texts on background images

(why tho)

In general, background images rarely convey meaning and are typically added with CSS for the whole container. This prevents using the traditional way of adding an alt attribute to an img element (and according to WCAG alt texts on decorative images should not be used anyway, and what are background images if not decoration?). However, some workarounds adhere to W3C standards (workaround, as the name implies, is not the most straightforward or the best way to achieve your goal. So thread with caution).

Adding alt texts to CSS background images using ARIA

To provide alt text for background images, we can use ARIA roles and aria-label attribute. By applying the role="img" and aria-label to a container element, we inform screen readers that the container represents an image with the specified label. Here's an example of how to do it:

<div id="leftdiv" class="bkg_img" role="img" aria-label="A view of the woods with its magnificent autumn colors"></div>

The caveat of this solution though is in case the div contains any content, it will be hidden from screen readers, as the whole element will be conveyed as an image. ARIA role="img" changes the semantics of the code and is meant to use for a container that identifies a collection of elements that together form a meaningful image. For example, consider this code snippet:

<div role="img" aria-label="scared face">(ㆆ _ ㆆ)</div>

So in cases when the CSS background image is used on a container that provides some meaningful information, a better solution is to either add an empty span element with role="img" and aria-label, or an empty img element with an alt tag at the end of the container. But again, it's a misuse of alt tags and such practices should be discouraged.

Adding alt texts to images inserted with JavaScript

While images added via CSS cannot have direct alt texts, JavaScript can be used to dynamically set the alt text attribute using the setAttribute method. For example:

const image = document.getElementById("leftdiv");

image.setAttribute("alt", "A view of the woods with its magnificent autumn colors");

This method dynamically sets the alt attribute on the element with the specified alt text, making it accessible to screen readers.

Conclusion

In conclusion, understanding the significance of alt texts has given me a new perspective on web development. Web accessibility is an essential aspect of modern web development, and providing accurate and descriptive alt texts for images is a fundamental practice. As I continue to learn and grow in my role, I'm committed to creating websites that not only meet clients' demands but also adhere to best practices in web accessibility and SEO. Good SEO practices should always complement and not compromise web accessibility, ensuring that all users can benefit from a fully inclusive online experience.