WCAG (Level AAA) SC 1.4.9 Images of Text (No Exception) (W3.org)
Issue description
WCAG 1.4.9, “Images of Text (No Exception)” is a stricter version of the Level AA criterion 1.4.5. While 1.4.5 allows for exceptions like logos and incidental text, this Level AAA criterion removes those exceptions. It states that all text presented in images should also be available as real text. Even when images of text seem essential, like in logos or complex diagrams, they can still pose accessibility challenges:
- Scalability: Images might not scale well on different devices or zoom levels, making the text difficult to read, especially for users with low vision.
- Flexibility: Users cannot easily customize the presentation of text within images (e.g., font size, color, spacing) to suit their needs.
- Assistive technologies: Screen readers rely on alternative text to convey the information in images, which might not capture the full meaning or context of the text.
Why this matters
- Inclusivity: By presenting all text as real text, you ensure that everyone, regardless of their visual abilities or assistive technology use, can access and engage with the content equally.
- Flexibility: Real text allows for greater customization and adaptability, allowing users to adjust the presentation to suit their individual needs.
- Maintainability: Real text is easier to update and maintain than images of text.
Essentially, this guideline promotes a higher level of accessibility by emphasizing the importance of using real text whenever possible. It encourages developers to find alternative ways to achieve visual effects without sacrificing accessibility.
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.
Who this issue impacts
Follow the links for additional information on user impairments:
Suggestions for remediation
Remediating WCAG 1.4.9, “Images of Text (No Exception)” requires replacing all instances of images of text with actual text, even in cases where images might seem essential, like logos or complex diagrams. Here’s how:
Use real text with CSS
- Styling with CSS: Utilize CSS to style the text and replicate the visual appearance of the original image. You can control font family, size, color, weight, spacing, effects (shadows, outlines), and more with CSS.
- Web fonts: Leverage web fonts to access a wider variety of fonts for styling and closely match the original design.
SVG for scalable graphics
- Use SVG for images: If an image format is necessary (e.g., for complex diagrams or illustrations), use SVG (Scalable Vector Graphics). SVGs are scalable and can be styled with CSS, making them more accessible and responsive than raster images (JPG, PNG).
- Embed text in SVG: Embed the text within the SVG as text elements, allowing it to be styled and accessed by assistive technologies.
Rethink logos
- Text-based logos: If possible, redesign logos to be text-based, using CSS for styling.
- Alternative text for essential logos: If the logo must remain an image, provide detailed and accurate alternative text that conveys the meaning and any text within the logo.
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, logo’s 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.
Handle complex diagrams
- Provide a detailed description: provide a simple ALT text and in addition to the ALT text, If the diagram is complex, provide a separate, detailed text description that explains the information conveyed in the diagram underneath the image.
Example of a graph or diagram ALT text and text alternative descriptions
graph or diagram ALT text
The appropriate ALT text would be:
ALT = A bar graph showing the increase of web ADA cases.
text alternative descriptions
The appropriate text that should accompany this should be along the lines of:
This bar graph illustrates a steady rise in the number of web ADA cases between 2019 and 2023. Beginning at 2890 in 2019, the number climbed to 3503 in 2020, and then to 4011 in 2021. The increase continued, though less dramatically, to 4061 in 2022. However, 2023 saw a significant jump, with the number of cases reaching 4605. This upward trend highlights the growing importance of web accessibility and the increasing number of legal actions taken to ensure equal access to online information and services.
Testing
- Screen readers: Test your website with screen readers to ensure that all text content is accessible and read in a logical order.
- Visual inspection: Carefully inspect your website to identify any remaining instances of images of text.
- Keyboard navigation: Ensure that interactive elements within SVGs are keyboard accessible.
Example
If you have a complex diagram with text labels currently embedded in a PNG image, you can:
- Recreate the diagram in SVG: Use SVG to draw the shapes and lines of the di agram.
- Add text elements: Include text elements within the SVG for the labels and descriptions.
- Style with CSS: Use CSS to style the SVG elements and text to match the original design.
By taking these steps, you can ensure that all text content is presented in a flexible, accessible format, even in situations where images might seem unavoidable. WCAG (Level AAA) SC 1.4.9 Images of Text (No Exception) promotes inclusivity and provides a better experience for all users.
