WCAG SC 1.4.5 requires that text is used to convey information rather than images of text. This ensures that users can adjust text to meet their needs, enhancing readability and accessibility.
Exceptions:
1. When text is created using a specific font family that cannot be reproduced in any other way, and the author does not have the rights to distribute the font. For example, a website displaying text using a licensed font that cannot be embedded for web use.
2. When the image of text is customizable to the user’s requirements or when a specific presentation of text is essential. For example, a company logo with custom typography.
To ensure that text is used instead of images of text, allowing users to customize the presentation for better readability and accessibility.
Use CSS styled headings: Use CSS styled headings instead of bitmap images.
Specify text styling with CSS: Use CSS to specify spacing, alignment, color, and font family for text elements.
Example: A 404 error page uses an image of text to display the error message.
<img src="404-error.png" alt="404 Error: Page Not Found" />
Explanation:Using an image for the 404 error message prevents users from customizing the text size, font, and color, which can be problematic for users with low vision or cognitive disabilities.
<h1 style="font-family: 'Arial', sans-serif; font-size: 2em; color: #FF0000;">404 Error: Page Not Found</h1>
<p style="font-size: 1em; color: #333;">Sorry, the page you are looking for does not exist.</p>
Explanation:Using HTML and CSS to style the 404 error message ensures that users can adjust the text presentation according to their needs, enhancing readability and accessibility.