Alternative text for images
Alternative text, often referred to as "alt text," is a written description of an image that can be read by screen readers or displayed in place of the image if it fails to load. It's a crucial component of web accessibility, providing context and meaning to visual content for users who can't see it.
Benefits and Use Cases
Provides access to visual information for blind or visually impaired users.
Example
Example: In Cluster, use descriptive alt text for content preview images, like "<img src="article-preview.jpg" alt="Preview of the article 'The Future of AI in Healthcare'">".
Improves SEO by helping search engines understand image content.
Example
Example: Use keyword-rich alt text for important images in Cluster, such as "<img src="ai-analysis.png" alt="AI-powered content analysis dashboard showing engagement metrics">".
Displays text when images fail to load due to slow connections or errors.
Example
Example: Ensure all Cluster interface icons have meaningful alt text, like "<img src="add-icon.png" alt="Add new item to cluster">".
Provides context for users who choose to disable images.
Example
Example: For Cluster's logo, use alt text that includes the company name: "<img src="clusters-logo.png" alt="Clusters logo">".
Psychological Principles Supported
Equivalent Experience. Alt text supports the principle of providing an equivalent experience for all users, regardless of their abilities.
Example
In Cluster's data visualization features, provide detailed alt text that conveys the key insights of charts and graphs.
Cognitive Load Reduction. Well-written alt text can reduce the cognitive load for users by clearly and concisely describing complex images.
Example
For complex infographics in Cluster, use concise alt text to summarize the main point, with a link to a full text description for more details.
Context Preservation. Alt text helps maintain context and continuity for users who can't see images, supporting better overall comprehension.
Example
In Cluster's user profiles, provide alt text for user avatars that includes the user's name, maintaining context in user interactions.
Implementation Guidelines
DON'T
Use "image of" or "picture of" in your alt text as it's redundant
Stuff alt text with keywords just for SEO purposes
Repeat the same text that's already in nearby captions or headings
Forget to update alt text when you change images
Use overly long descriptions in alt text; provide a separate long description if needed
DO
Provide alt text for all meaningful images
Keep alt text concise and descriptive
Use empty alt attributes (alt="") for decorative images
Include keywords naturally if the image is important for SEO
Test your alt text by browsing with images disabled