Use Text Instead of Images of Text
Whenever possible, use actual text rather than images of text. This allows users to adjust how the text is presented according to their needs.
Acceptance Criteria
Text vs. Images: Use text to convey information instead of using images of text, unless:
• Customizable: The image of text can be customized to meet user requirements.
• Essential: The specific presentation of the text is crucial to conveying the intended information (e.g., logotypes or brand names).
Examples
• Good: A webpage uses HTML text that can be resized, changed in color, or adjusted in font style through browser settings or user preferences.
• Good: A logo or brand name that is displayed as an image of text is acceptable if its visual design is crucial for brand identity and cannot be replicated using standard text formatting.
• Bad: A website uses an image to display standard text content, such as a header or instructions, making it impossible for users to adjust text size or color.
Exceptions
• Customizable: If the text image allows for user customization in terms of color, size, or font, it may be used.
• Essential: Images of text are acceptable if the specific style or appearance of the text is essential for understanding or brand recognition, such as logotypes.
Tips
• Use CSS to style text whenever possible, as it allows users to adjust text properties to suit their needs.
• Avoid using images for standard text content to ensure accessibility features like text resizing and screen readers work effectively.
• For logos or branding, consider alternative methods to provide accessible text if feasible, while preserving visual integrity.
How to test?
1. Content Review: Check your website to ensure that text is used instead of images for standard text content. Verify that styling and formatting are achieved using HTML and CSS.
2. Customizability Check: Confirm that any images of text are either customizable by the user or essential to the information being presented.
3. User Feedback: Obtain feedback from users to ensure that text content is accessible and that images of text do not hinder usability or accessibility.