PictureEditor

Writing Effective Alt Text

The Purpose of Alt Text

Alt text (alternative text) serves as a textual replacement for images when images cannot be displayed or perceived. Screen readers announce alt text to blind and visually impaired users, search engines use alt text to understand image content for indexing, and browsers display alt text when images fail to load. Good alt text conveys the same information and function that a sighted user would get from viewing the image. It answers the question: "If I removed this image and replaced it with only this text, would the reader lose any important information?" If the answer is no, your alt text is working correctly.

Alt Text Best Practices

• Be concise: Keep alt text under 125 characters. Screen readers may truncate or awkwardly break longer descriptions. If more detail is needed, use a visible caption or longdesc attribute.
• Be specific: "Dog" is less useful than "Golden retriever puppy sitting on a red cushion." Describe what makes the image meaningful in its context.
• Avoid redundancy: Do not start with "Image of" or "Photo of" — screen readers already announce that the element is an image. Starting with "Image of" forces the user to hear "Image: Image of..." which is redundant.
• Describe function for interactive images: If an image is a link or button, describe the action, not the image. A magnifying glass icon that triggers search should have alt="Search", not alt="magnifying glass icon."
• Use empty alt for decorative images: Purely decorative images (backgrounds, borders, spacers) should have alt="" (empty, not missing) so screen readers skip them entirely. Missing the alt attribute entirely is an accessibility error.

Context Determines Alt Text

The same image requires different alt text depending on its context and purpose. A photo of a dog on a veterinary website's homepage might need alt="Healthy golden retriever during wellness checkup" because the health context is relevant. The same photo on a pet adoption page might need alt="Max, 2-year-old golden retriever available for adoption" because the specific identity matters. On a photography portfolio, it might need alt="Studio portrait with dramatic side lighting and shallow depth of field" because the photographic technique is the point. Always write alt text for the specific context, not as a generic image description.

WCAG Contrast Standards Explained

Understanding Contrast Ratios

WCAG (Web Content Accessibility Guidelines) defines contrast as the ratio of relative luminance between two colors, expressed as a ratio from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, black against white). The formula accounts for the human eye's sensitivity to different wavelengths: green contributes more to perceived brightness than red, which contributes more than blue. A contrast ratio of 4.5:1 means the lighter color is 4.5 times more luminous than the darker color. This threshold was chosen because it compensates for the contrast sensitivity loss that comes with moderately low visual acuity (approximately 20/40 vision), which affects a large percentage of the population including many people who do not consider themselves visually impaired.

WCAG Level AA Requirements

Level AA is the standard most websites target and is legally required in many jurisdictions. For normal text (under 18px or under 14px bold), the minimum contrast ratio is 4.5:1. For large text (18px and above, or 14px and above when bold), the minimum is 3:1. Large text has a lower requirement because its larger character strokes are easier to perceive at lower contrast. These requirements apply to text on all backgrounds, including text overlaid on images. When text is placed on a photographic background, the contrast must be sufficient against every part of the image the text overlaps, which often requires a semi-transparent overlay or text shadow to guarantee contrast regardless of the underlying image content.

WCAG Level AAA Requirements

Level AAA is the highest level of accessibility conformance and requires 7:1 contrast for normal text and 4.5:1 for large text. While AAA is not legally required in most contexts, it provides a significantly better experience for users with low vision, color vision deficiencies, and anyone viewing content in challenging lighting conditions (bright sunlight, dim rooms). Many organizations target AAA for their primary text content while accepting AA for secondary and UI elements. Achieving AAA often means using near-black text on near-white backgrounds, which fortunately aligns with the most readable typography patterns anyway.

Contrast for Non-Text Elements

WCAG 2.1 introduced Success Criterion 1.4.11 (Non-text Contrast), which requires graphical elements and UI components to have at least 3:1 contrast against adjacent colors. This applies to icons, chart elements, form field borders, focus indicators, and any visual element that conveys information. For images with text overlays, this means not just the text itself but also any icons, buttons, or UI elements placed on the image must meet contrast requirements against the image background.

Image Categories and Accessibility Requirements

Informative Images

Informative images convey information that supplements the surrounding text. Examples include photographs illustrating an article, icons indicating status or action, and diagrams explaining a concept. These images need descriptive alt text that conveys their informational content. The alt text should not repeat information already provided in adjacent text but should add the visual information that would otherwise be lost for non-sighted users. A product photo needs alt text describing the product's appearance. A status icon needs alt text stating the status. An illustrative photo needs alt text describing what the illustration shows.

Functional Images

Functional images serve as links, buttons, or interactive controls. Their alt text must describe the function (what happens when activated), not the image appearance. A shopping cart icon that links to the cart page needs alt="Shopping cart (3 items)", not alt="cart icon." A logo that links to the homepage needs alt="Company Name - Home", not alt="company logo." If a functional image contains both an icon and visible text, the alt text should match the visible text to avoid confusion between what sighted and non-sighted users perceive.

Complex Images (Charts, Graphs, Diagrams)

Complex images like charts, infographics, and technical diagrams cannot be adequately described in the 125-character alt text limit. These require a two-part approach: a brief alt text summary (e.g., alt="Bar chart showing quarterly revenue growth") plus a detailed description in the surrounding text or linked via a longdesc attribute. The detailed description should convey all the data and relationships shown in the image. For charts, this means listing the data points. For diagrams, this means describing the structure and relationships. An alternative approach is providing the same data in an accessible format like an HTML table alongside the chart.

Decorative Images

Decorative images add visual appeal without conveying information. Background textures, ornamental borders, stock photos used as visual filler, and icons that duplicate adjacent text are all decorative. These must have empty alt text (alt="") so screen readers skip them. Misidentifying a decorative image as informative and writing alt text for it clutters the screen reader experience with irrelevant descriptions. Conversely, misidentifying an informative image as decorative and using empty alt text creates an information gap for non-sighted users. The decision point is simple: if removing the image would cause any loss of information or function, it is informative and needs alt text.

Accessibility Testing Workflow

Automated Testing Limitations

Automated tools can detect missing alt attributes, measure contrast ratios, and flag images without accessible names. However, automated tools cannot evaluate whether alt text is appropriate, meaningful, or accurate. They can tell you that alt text exists but not whether it describes the right information for the context. Human review is essential for alt text quality. The recommended workflow is to use automated tools to catch structural issues (missing alts, insufficient contrast) and then manually review a representative sample of images to verify alt text quality, decorative vs. informative classification, and context-appropriate descriptions.

Screen Reader Testing

The most effective way to evaluate image accessibility is to navigate your site using a screen reader and listen to how images are announced. On Windows, use NVDA (free) or JAWS. On macOS, use the built-in VoiceOver (activated with Cmd+F5). On mobile, use TalkBack (Android) or VoiceOver (iOS). Navigate to each image and listen to the announcement. Does the alt text make sense without seeing the image? Does it convey the necessary information? Does it avoid unnecessary verbosity? Screen reader testing reveals problems that automated tools miss, like alt text that is technically present but meaningless (alt="image1.jpg") or decorative images with distracting alt text.

Contrast Verification in Context

Contrast ratios calculated against a single background color may not reflect real-world readability when text is placed on photographic backgrounds. An image might have an average color that passes contrast checks while having localized areas (bright highlights, dark shadows) where specific text characters become unreadable. Always verify contrast visually with text overlaid on the actual image at the actual display size. Use semi-transparent overlays, text shadows, or background bars behind text to guarantee consistent contrast regardless of the image content beneath. A 50% opacity black overlay behind white text guarantees at least 4.5:1 contrast on any image.

Documentation and Maintenance

Image accessibility requires ongoing maintenance. When images are updated, their alt text must be reviewed and potentially updated. When page context changes, previously appropriate alt text may become misleading. Establish a process for reviewing image accessibility when content is published or updated. Include alt text review in your content publishing checklist alongside spell-checking and link verification. For sites with large image libraries, maintain a spreadsheet or CMS field tracking each image's accessibility classification (decorative, informative, functional, complex) and its current alt text.

Frequently Asked Questions