If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following:
Customizable: The image of text can be visually customized to the user’s requirements;
Essential: A particular presentation of text is essential to the information being conveyed.
Testing & Remediation How to test:
The first thing to check is whether or not the text being presented to the user is considered real text (HTML text or SVG text). Real text can be highlighted and copy/pasted. You can also use Developer Tools to inspect the markup of the page to confirm that the text is present in the document's markup.
If your site is using text elements that can't be selected (due to being coded as images, CSS backgrounds, dynamically rendered on canvas elements, etc.), you'll need to determine if the text could be presented using regular HTML text. If not, is there an alternative way that a user can customize the appearance of the text?
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
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.
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.
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.
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.
Artwork and images themselves do not need to meet accessibility requirements.
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
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.
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.
Carousels and sliders pose accessibility issues for keyboard and screen reader users that can be challenging to adequately address by adjusting your markup. Keep in mind that all content and controls abled users can access must be made robust enough to be accessed by all users, this means (among other things) that slider controls need to have tab-navigation consideration, timing needs to be adequate enough so that all users can read slides, and UI controls need to have enough color contrast such that they can be perceived by everyone.
Any carousel or slider can contain non-accessible content, so keep these things in mind when building content:
- Do the headers flow from h1 down without skipping a level?
- Do embedded images have adequate alt tags?
- Do the links open have descriptive titles or link text?
Below are sliders that are accessible:
- Snazzy Slider by Josh Cummings - https://www.joshcummingsdesign.com/snazzy-slider
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.