Welcome to our AI agent services platform. Our intelligent agents can help you with various daily tasks.
Task Management Agent
Let our AI agent organize your schedule and manage your to-do lists efficiently.
Email Assistant Agent
Our AI agent can sort, prioritize, and respond to your emails automatically.
"The AI agent changed my life!" - Sarah M.
Alternative Text for Images - Compliant Examples
The following examples demonstrate proper use of alternative text for images:
Meaningful Images with Descriptive Alt Text
Meaningful images have descriptive alt text that conveys the same information as the image. The alt text should be concise but descriptive.
Decorative Images with Empty Alt
Decorative images that don't convey meaningful information should have empty alt text (alt="") and role="presentation" to indicate they should be ignored by screen readers.
Functional Images (Icons, Buttons) with Descriptive Alt
Functional images (icons used as buttons or links) should have alt text that describes their function, not their appearance.
Images of Text
Images of text (like logos) should have alt text that includes the text content. If the logo is also a link, the alt text should describe the destination.
Complex Images with Long Descriptions
View detailed chart description
Detailed Chart Description:
The chart compares three service plans in a bar graph format. The Basic Plan ($9.99/month) includes task management and email sorting. The Premium Plan ($19.99/month) adds smart home control and calendar integration. The Enterprise Plan ($49.99/month) includes all features plus API access and priority support. The chart shows that Premium Plan offers the best value with 2x the features of Basic at less than 2x the price.
Complex images (charts, graphs, diagrams) should have a brief alt text and a link to a detailed description, or use aria-describedby to link to a description.
Complex Images with aria-describedby
Workflow Description:
The diagram shows a workflow starting with user input, which goes through natural language processing, then decision making by the AI agent, followed by task execution, and finally result delivery back to the user. Each step is connected by arrows showing the flow direction.
Using aria-describedby links the image to a detailed description that screen readers can access.
Images in Figures with Captions
Images can be wrapped in <figure> elements with <figcaption> to provide additional context. The alt text should still be descriptive, and the caption provides supplementary information.
Images as Background (CSS) with Text Alternative
This content has a decorative background image. Since the image is decorative, it doesn't need alt text, but the content itself is accessible.
When images are used as CSS backgrounds for decorative purposes, they don't need alt text. However, if the background image conveys important information, it should be included as an actual <img> element with proper alt text.
Image Maps with Alt Text for Each Area
Image maps should have alt text on the main image and descriptive alt text on each clickable area that describes the link destination and any relevant information.
Gallery Images with Consistent Alt Text
Task Management
Email Assistant
Smart Home
Gallery images should have descriptive alt text. If images are part of a series, maintain consistency in alt text format while being specific about each image.
Images with Context-Dependent Alt Text
When an image is a link, the alt text should describe the link destination, not just the image content.
"The AI agent changed my life!" - Sarah M.
When images are part of content (like testimonials), the alt text should provide context about the person or subject.
Images with aria-label for Additional Context
For images that need more context, aria-label can provide additional information that supplements the alt text.
Decorative Images in Lists
- Task Management Service
- Email Assistant Service
Decorative images used as list bullets should be marked with empty alt and role="presentation", or better yet, use CSS for decorative bullets.
Images with aria-hidden for Decorative Purposes
This content has a decorative border image that is hidden from screen readers using aria-hidden="true".
Decorative images can use aria-hidden="true" in addition to empty alt text to ensure they are completely ignored by assistive technologies.
Responsive Images with Alt Text
Responsive images should have the same descriptive alt text regardless of which image source is loaded. The alt text describes the content, not the image file.
Images with Missing Alt (Error Handling)
Even when images fail to load, the alt text should still be present and descriptive. Consider using onerror handlers to update alt text if needed.
Best Practices Summary
- Be specific and concise: Alt text should be descriptive but not overly verbose (typically 125 characters or less)
- Don't start with "Image of" or "Picture of": Screen readers already announce it's an image
- Include important text: If the image contains text that's important, include it in the alt text
- Consider context: Alt text should make sense in the context where the image appears
- Empty alt for decorative: Use alt="" for purely decorative images
- Functional images: Describe the function, not the appearance
- Complex images: Provide brief alt text and link to detailed description
- Test with screen readers: Always test alt text with actual screen reader software