Avoid Images of Text
Why It Matters
This is the strictest version of the image-of-text rule (compare to 1.4.5 at AA). Real text can be resized without pixelation, customized (colors, fonts, spacing) by user stylesheets or browser settings, and easily read by screen readers. Images of text lack this flexibility, making them inaccessible for users who need text customization or rely on text-to-speech. Level AAA essentially prohibits using images of text unless absolutely unavoidable (logos).
Fixing the Issue
Use actual HTML text styled with CSS for all content whenever possible. Avoid creating banners, buttons, or informational graphics where the primary content is text embedded within an image file. If text must be part of an image (like a logo), ensure it meets the limited exceptions and has appropriate alt text. Use CSS for visual effects like gradients, shadows, and specific font rendering instead of resorting to images of text.
Good Code Example
Using HTML text and CSS for a stylized heading:
-
<h1 class="stylized-heading">Welcome to Our Site</h1> <style> .stylized-heading { font-family: 'Georgia', serif; font-size: 3rem; color: #2a5db0; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); border-bottom: 3px solid #2a5db0; padding-bottom: 5px; display:inline-block; } /* This text is customizable and accessible */ </style>
-
Welcome to Our Site
