Images of Text
Text is used to convey information rather than images of text, except when the image is essential or can be visually customized.
What it means
The intent of this success criterion is to encourage authors, who are using technologies which are capable of achieving their desired default visual presentation, to enable people who require a particular visual presentation of text to be able to adjust the text presentation as needed. This includes people who require the text in a particular font size, foreground and background color, font family, line spacing or alignment. If authors can use text to achieve the same visual effect, they should present the information as text rather than using an image. If for any reason, the author cannot format the text to get the same effect, the effect won't be reliably presented on the commonly available user agents, or using a technology to meet this criterion would interfere with meeting other criteria such as 1.4.4, then an image of text can be used. This includes instances where a particular presentation of text is essential to the information being conveyed, such as type samples, logotypes, branding, etc. Images of text may also be used in order to use a particular font that is either not widely deployed or which the author doesn't have the right to redistribute, or to ensure that the text would be anti-aliased on all user agents. Images of text can also be used where it is possible for users to customize the image of text to match their requirements. The definition of images of text contains the note: This does not include text that is part of a picture that contains significant other visual content. Examples of such pictures include graphs, screenshots, and diagrams which visually convey important information through more than just text.
Failing example
<!-- Fails: heading is a JPG with text baked in -->
<img src="heading-welcome.jpg" alt="Welcome to our site">How to fix it
<!-- Pass: use real HTML text, style with CSS -->
<h1 class="styled-heading">Welcome to our site</h1>How A11yRisk detects this
A11yRisk detects this criterion automatically.
Scan your site for this violation →