What Is Alt Text?
Alt text (alternative text) is a string attribute added to the HTML img element via the alt attribute, providing a textual description of an image for contexts where the image cannot be rendered or perceived. It serves as the primary mechanism by which screen readers convey image content to visually impaired users, and it also signals image meaning to search engine crawlers that cannot interpret pixel data. The HTML5 specification treats the alt attribute as mandatory for all img elements, with an intentionally empty value (alt='') reserved specifically for decorative images that carry no informational content.
What Is Alt Text?
Alt text (alternative text) is a string attribute added to the HTML img element via the alt attribute, providing a textual description of an image for contexts where the image cannot be rendered or perceived. It serves as the primary mechanism by which screen readers convey image content to visually impaired users, and it also signals image meaning to search engine crawlers that cannot interpret pixel data. The HTML5 specification treats the alt attribute as mandatory for all img elements, with an intentionally empty value (alt='') reserved specifically for decorative images that carry no informational content.
How Alt Text Works
When a browser encounters an img element, it loads the referenced image file and displays it visually. Simultaneously, the alt attribute value is embedded in the accessibility tree, which is a parallel representation of the DOM that assistive technologies like JAWS, NVDA, and VoiceOver consume. When a screen reader reaches an img node in the accessibility tree, it reads the alt text aloud in place of the image, giving non-sighted users context equivalent to what sighted users receive visually. Search engine crawlers, including Googlebot, operate similarly to screen readers in that they cannot interpret the visual content of raster images like JPGs or PNGs. Instead, they read the alt attribute value to understand what the image depicts, using that information to index the image in Google Image Search and to weight the surrounding page content for relevance. Google's Search Central documentation explicitly confirms that descriptive alt text helps images rank for relevant queries, making it a direct on-page SEO signal. When an image fails to load due to a broken URL, a slow connection, or a server error, the browser renders the alt text as visible fallback text inside the image container. This fallback behavior is governed by the HTML rendering spec and ensures that content meaning is preserved even in degraded network conditions. The rendered fallback text inherits some CSS styles from the surrounding context, so well-structured pages degrade more gracefully than those with bare or unstyled image containers. The alt attribute is also evaluated during automated accessibility audits run by tools like Lighthouse, axe-core, and WAVE. These tools flag missing alt attributes as WCAG 2.1 Level A violations (success criterion 1.1.1, Non-text Content), meaning a page with unattributed images will fail the most basic tier of web accessibility compliance. Passing this criterion is a legal requirement in many jurisdictions under laws like the ADA in the US and the European Accessibility Act.
Best Practices for Alt Text
Write alt text that describes the function or informational content of the image, not just its appearance. For a product photo, 'Red leather Oxford shoe with brogue detailing, side view' is far more useful than 'shoe image.' For images that function as buttons or links, describe the destination or action rather than the visual, for example, 'Go to homepage' instead of 'Logo.' Keep descriptions concise but complete, typically under 125 characters, because many screen readers pause or truncate at that threshold. Use empty alt attributes (alt='') for purely decorative images like background textures, divider lines, or stock photos that duplicate adjacent text, so screen readers skip them entirely rather than reading redundant or meaningless descriptions. Avoid prefixing alt text with phrases like 'image of' or 'picture of,' because screen readers already announce the element type before reading the attribute value, making such prefixes redundant and slightly annoying for users who rely on them daily. When an image contains critical text, such as a sale banner or an infographic, include that exact text verbatim in the alt attribute so the information is not lost to non-visual users or crawlers.
Alt Text & Canvas Builder
Canvas Builder outputs clean, semantic HTML5 that includes properly formed img elements with alt attribute hooks, meaning every image rendered through the builder is structurally ready for accessibility compliance without requiring developers to audit or correct the underlying markup. The Bootstrap 5 foundation used by Canvas Builder is built around WCAG-aligned component patterns, so images placed within its grid, card, and hero components follow the correct structural context that makes alt text most effective for both screen readers and crawlers. Developers using Canvas Builder can focus on writing high-quality, descriptive alt content rather than troubleshooting attribute omissions or malformed HTML that often appear in visually-built or template-dragged interfaces.
Try Canvas Builder →