WCAG (Level AA) SC 1.4.5 Images of Text (W3.org)
Issue description
WCAG 1.4.5, “Images of Text” discourages the use of images to display text that could be presented as real text. This is important because images of text can create accessibility issues for many users:
- Low vision: People with low vision may have difficulty reading text embedded in images, especially if the image has poor resolution or contrast.
- Cognitive disabilities: People with cognitive disabilities may find it harder to process text within images, as it lacks the flexibility and adaptability of real text.
- Assistive technologies: Screen readers cannot read text within images unless alternative text is provided, and even then, the experience is not as seamless as with real text.
- Responsiveness: Images of text may not scale well on different devices or zoom levels, making them difficult to read.
Related requirements
The following WCAG source criteria are often related to this as well. They can provide additional insights into specific challenges you may be encountering.
Websites often use images of text for
- Headings and titles: Using images for stylized headings or logos that contain text.
- Navigation menus: Using images for menu items.
- Important information: Presenting key information within images. While images of text might seem visually appealing, they create accessibility barriers for many users.
Exceptions
There are some exceptions to this guideline, such as:
- Logos: Logos are considered essential and are exempt as long as they have appropriate alternative text.
- Incidental text: Text that is part of an image that is not intended to be read (e.g., text on a product in a photograph) is also exempt.
Logo ALT text examples
Using the AccessiCart logo, let’s see how the ALT text should look under different circumstances.
A logo that is a link
This means, for instance, logos that are a home button on a menu.
ALT = AccessiCart home.
A logo that contributes to the context of the page
This is relevant on pages like an “Our History” or “About” page that discusses what the logo might mean to the company, organization, or event.
ALT = A purple “Accessibility person” icon in a green circle featured on the front of a shopping bag. Underneath is the company name “AccessiCart”.
A stand-alone logo that is not a link
In most cases, all that is necessary for a logo is “[Company/Organization/Event] logo”.
ALT = AccessiCart Logo.
IMPORTANT! Always end your alt with a period. This is essential for screen readers to know when to pause and allow the user to process the information.
Essentially, WCAG (Level AA) SC 1.4.5 Images of Text encourages the use of real text whenever possible, as it provides greater flexibility, accessibility, and responsiveness. It promotes a more inclusive online experience for everyone.
Who this issue impacts
Follow the links for additional information on user impairments:
Suggestions for remediation
Remediating WCAG 1.4.5, “Images of Text” involves replacing images of text with actual text whenever possible. Here’s how:
Use real text with CSS
- Styling: Use CSS to style the text to achieve the same visual appearance as the image. You can control font family, size, color, weight, spacing, and other visual properties with CSS.
- Web fonts: Utilize web fonts to access a wider variety of fonts for styling.
SVG for scalable images
- Scalable vector graphics (SVG): If you need to use an image format, consider using SVG. SVG images are scalable and can be styled with CSS, making them more accessible and responsive than raster images (like JPG or PNG).
Provide alternative text
- Accurate description: If you must use an image of text, provide alternative text that accurately describes the text content within the image. This allows screen readers to convey the information to users who cannot see it.
Testing
- Screen readers: Test your website with screen readers to ensure that all text content is accessible, whether it’s real text or alternative text for images.
- Visual inspection: Visually inspect your website to identify any instances where images of text can be replaced with real text.
Example
If you have a heading that is currently an image of text, you can:
- Recreate the heading with real text: Use an
<h1>or other heading tag for the text. - Apply CSS: Use CSS to style the heading with the same font, size, color, and other visual properties as the original image.
By following WCAG (Level AA) SC 1.4.5 Images of Text, you can improve the accessibility of your website for users with disabilities and ensure that all text content is presented in a flexible, adaptable, and accessible format.
