Images of text are only used for pure decoration or where a particular presentation of text is essential to the information being conveyed.

Logotypes (text that is part of a logo or brand name) are considered essential.

Testing & Remediation

How to test: Look over your site to ensure that there are no images of text. The only acceptable use for images of text are when it's used purely for decoration or if the text is essential to the info being presented (eg. a company logo with their name in it) How to remediate: There are a number of techniques to satisfy this success criteria, including:
  • Using CSS to control the visual presentation of text
  • Using Silverlight font properties to control the text’s presentation
  • Using CSS to replace text with images of text and providing UI controls to switch/customize the text
  • Separating information and structure from the presentation to enable different presentation of the text
  • Performing OCR on a scanned PDF to provide real text

Questions and Answers

How is CSS pseudo content treated by screen readers?

Generally speaking, web content should be included in HTML files, in a database or coming from an API. It should not be in CSS. However, sometimes CSS is used to add non-text content such as font icons or special characters. This content WILL be read by screen readers and can cause confusion with AT (assistive technology) users. If the content that the CSS is generating is purely presentational, you must make sure to hide it from assistive technology. This can be completed by using the aria-hidden property.

Minimum font size?

While there is no official minimum font size for the web, it is generally agreed upon that 16px for body text is a good starting point. Of course, some text will be smaller, and headers will be larger, but for the main body text (like what you're reading right now) is usually 16px. That said, it is officially stated that visitors must be able to resize all text on the page up to 200% of its original size.

Browser zoom vs text zoom. Which is better?

The criteria stated in 1.4.4 says that the text must be resized without the use of assistive technology. This means that there needs to be a button on the screen somewhere that allows users to click on it or tab to it.

How can I test text color contrast?

If you are using chrome to test your site, you can use an extension called the Wave Scanner. The Wave scanner will scan a page for all sorts of accessibility requirements, including color contrast. This is a great tool for pass/fail evaluation. If you are looking for more in-depth knowledge and information about the color contrast on your pages, you can compare the color contrast of 2 colors at this website.  That contrast checker tool will even give you insight into what level it passes and fails at.

Do images and art need to follow accessibility rules?

Artwork and images themselves do not need to meet accessibility requirements.

Company colors don’t pass contrast guidelines.

There is one exception to this rule, but I am assuming that it won't be the one you are looking form. Company logos do not need to meet accessibility criterion. That said, it is recommended they do, and the rest of the page does. If you are planning on using the same 'failing' colors from the compony logo on the rest of you site that that will not pass. All text must meet the minimum contrast ratios put in place. For AA it is required that normal text has a ratio of at least 4.5:1, and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text. You can check if the colors pass at this website or if you'd like the exact contrast ratio you can check out this test here.

Do logos need to follow the accessibility guidelines?

No, logos do not need to follow website accessibility guidelines. It is always good practice to do your best to make sure they do though.

Are animated gifs okay to have?

Most of the time animated gifs will be accessible. There should be a few things to keep in mind though to ensure this remains true. For example, ask yourself if there is another way that the message can be communicated. Would a still image do? If not, think about providing an alternative or some way that users can forgo the animation. A useful tool when checking your gifs for accessibility may be this Photosensitive Epilepsy Analysis Tool. The thought behind this is that you can make sure the animation won't trigger seizures in people who are sensitive to them.

How long does the accessibliity process take?

This question depends on a number of factors including size of site, desired level of conformance, your developer's understanding of accessibility techniques, etc. Accessible Web is here to help. Reach out and we can discuss your site specifically.