Loading...
Loading content...
Loading content...
Use real text instead of images of text whenever possible.
Why it matters: Real text scales better and can be customized by users (font, color, spacing).
If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text, except for the following: (Level AA) Customizable: The image of text can be visually customized to the user's requirements; Essential: A particular presentation of text is essential to the information being conveyed.
What This Means: This success criterion requires using actual text (styled with CSS) instead of images containing text, except when the text appearance is essential (like logos) or when the image can be customized by users. Real text can be resized, recolored, and customized, while images of text are static and cannot be modified by users.
Why It's Important: Users with low vision often need to customize text appearance (size, color, spacing, font) to read comfortably. Images of text cannot be customized, making them inaccessible to users who need different text presentations. Real text also scales better, works better with screen readers, and can be translated more easily.
Use CSS to style text instead of creating images of text. If you need a specific font or visual effect, use web fonts and CSS properties. Logos are an exception because the visual presentation is essential to the brand. If you must use images of text, ensure they can be customized or provide text alternatives that can be customized.
This criterion ensures that users with low vision can access and understand the content, improving their overall experience and ability to use the website effectively.
This criterion ensures that screen reader users can access and understand the content, improving their overall experience and ability to use the website effectively.
Impact: When this criterion is properly implemented, it removes barriers for these user groups and creates a more inclusive web experience for everyone.
A heading is created as an image, preventing users from customizing it.
<img src="heading.png" alt="Welcome to Our Site" />A heading uses real text with CSS styling, allowing full customization.
<h1 style="font-family: 'Custom Font'; color: #333;">Welcome to Our Site</h1>A company logo is an image of text, which is acceptable as the visual presentation is essential.
<img src="logo.png" alt="Company Name" />This success criterion benefits the following user groups:
Tip: Use this checklist during development and testing to ensure all requirements for 1.4.5 Images of Text are met. Check off items as you complete them.
Note: These are official W3C resources for 1.4.5. For the most up-to-date information and detailed technical guidance, always refer to the official W3C documentation.
Implementing 1.4.5 Images of Text correctly requires understanding your specific context. Code solutions vary significantly based on multiple factors:
HTML, React, Vue, Angular, PHP, Python, and other frameworks each have different patterns and best practices.
Server-side rendering, client-side rendering, static generation, and hybrid approaches require different solutions.
Your existing components, styling approach, and UI library influence how accessibility must be implemented.
Your specific user base, content type, and interaction patterns determine the most appropriate implementation.
We provide tailored implementation guidance by analyzing your specific technology stack, coding patterns, design system, and project requirements. Our team reviews your codebase and provides custom solutions that integrate seamlessly with your existing architecture.
Get Custom Implementation HelpPart of
Perceivable PrincipleGuideline
1.4 Distinguishable