Accessibility Testing Baselines

Provide text alternatives for non-text content, such as images. Understanding 1.1.1

Who is responsible? Designer, Copywriter, Content Producers, Developer

Understanding Image Types

Generally, images fall into one of several categories. It is very important to understand the difference between these image types in order to make a more informed decision on whether to include an alternative text value or not and what kind of value you may need to add.

• Decorative: Images that add accent or embellish. If content on the page can be experienced and understood without these images, then an alternative text value is not required.
• Functional: Images that indicate action to be taken, rather than a description of the image. Functional images are found within interactive elements, such as hyperlinks or buttons.
• Informative: Images that provide value to the surrounding content. If content on the page can't be experienced or understood without these images, or content is locked within image, then an alternative text value is required.
• Images of Text: Images that contain text. The alternative text used within this image type should often be verbatim.
• Complex Images: Images such as graphs or diagrams. These image often contain detailed information, so alternative text is not adequate here. This content should be conveyed through alternative text equivalents.
• Groups of Images: Multiple images that convey a single piece of information. In this case, the text alternative for one image should convey the information for the entire group.
• Image Maps: While used rarely, the text alternative for an image that contains multiple clickable areas should provide an overall context for the set of links. Also, each individually clickable area should have alternative text that describes the purpose or destination of the link.

The Rules

1. All inline image elements require an alt attribute. For example: <img alt="" src="...">. An image with an alt attribute that has no value, is known as a "null alt". Images with a null alt are ignored by assistive technology.
2. If image is informative or contextually important to surrounding content, then it must include an alternative text value. Some things to ask yourself about images:
   • Are they meant as labels?
   • Do they supplement or enhance surrounding content?
   • Are they meant to convey an impression or emotion?
3. If image contains complex information, then alternative methods of conveying this information will be required as alternative text may not suffice. For example, a graph or chart may require the information be marked-up in HTML and linked to, etc.
4. If image contains text, then it must include an alternative text value if same information not conveyed nearby. Typically verbatim, to match what is embedded in the image.
5. If race or gender provide important context, then include them in your description.
6. If image is purely decorative, then it requires no alternative text value. While an img element that is decorative must contain a null alt, a decorative SVG element will require aria-hidden="true". For example: <svg aria-hidden="true" ... ></svg>
7. If image is functional and contained within an interactive element (e.g., a hyperlink or button), then it must contain alternative text if no other functional text present within. For example: <a href="..."><img alt="My Awesome Vacation (Video)" src="..."></a>
8. Avoid superfluous phrases like "Image of ..." or "Picture of ..." as these are redundant to assistive technology (AT) users. If your image is a screenshot, then you may say this in your description.
9. Unless relevant to the image, avoid cute or clever jokes in your alternative text.
10. Background images are important if picture within is informative. The first rule of ARIA is to always use HTML, so an <img> element should be used, but in a pinch, the following may be acceptable: <div aria-label="..." role="img"></div>

Accessibility Tip

Alternative text should be as descriptive as possible. Think of how you might describe an image to a friend who is blind. For example:

Reminder: Unless it is relevant to the image, intentionally including keywords in alternative text descriptions, for the sole benefit of SEO (Search Engine Optimization), is strongly discouraged. Websites are for people; not machines.

Provide text alternatives for non-text content, such as multimedia (audio, images, video) and interactive components (buttons, controls, inputs). Understanding 1.1.1

Who is responsible? Designer, Developer, QA

The Rules

1. Ensure that interactive components (e.g., buttons, controls, inputs), have an accessible name. Interactive elements that are not visually labeled, must still include an accessible name.
2. If text is not explicit in the design of a component, then use various methods to provide this information. Accessible names can be applied in various ways, such as with, labels, inclusively hidden techniques, and with ARIA.
3. Ensure that multimedia is identified via accessible text. For example: <video src="..." controls aria-label="My Summer Vacation">...</video>
4. Ensure that inline frames (iframe) are appropriately titled and describe contents of the frame accurately. For example: <iframe src="..." title="Job Application Form">...</iframe>.

Provide captions for videos with audio Understanding 1.2.2

Who is responsible? Everybody

Semantic markup is used appropriately. Logical structure, etc. Understanding 1.3.1

Who is responsible? Developer

Don't use presentation that relies solely on color. Understanding 1.4.1

Who is responsible? Designer, Developer, QA

Contrast ratio between text and background is at least 4.5:1. Understanding 1.4.3

Who is responsible? Designer, Developer, QA

Text can be resized to 200% without loss of content or functionality. Understanding 1.4.4

Who is responsible? Developer, QA

Content can be resized without loss of functionality and no horizontal scrollbar. Understanding 1.4.10

Who is responsible? Developer, QA

Let users adjust text spacing to make it easier to read. Understanding 1.4.12

Who is responsible? Developer, QA

Ensure important visual components, such as images, icons, and buttons, have a contrast ratio of at least 3:1. Understanding 1.4.11

Who is responsible? Designer, Developer, QA

Accessible by keyboard only. Understanding 2.1.1

Who is responsible? Developer, QA

Provide user controls for moving content. Understanding 2.2.2

Who is responsible? Designer, Developer, QA

No content flashes more than three times per second. Understanding 2.3.1

Who is responsible? Everybody

Provide a "Skip to Content" link. Understanding 2.4.1

Who is responsible? Developer, QA

Use helpful and clear page titles. Understanding 2.4.2

Who is responsible? SEO, Copywriter, Content Creators

The navigation order of links, form elements, etc. is logical and intuitive. Understanding 2.4.3

Who is responsible? Designer, Developer, QA

Ensure keyboard focus is visible and clear. Default focus outlines are a browser feature meant to aid those with low vision, and should never be removed without an adequate replacement. If default focus outlines are undesirable, they may be redesigned or an alternative focus state can be used. However, any redesigned outline or alternative focus state must then meet a 3:1 contrast ratio. Understanding 2.4.7

Who is responsible? Designer, Developer, QA

Build all elements for accessibility. Understanding 4.1.2

Ensure that each element has an accessible name, role, value, state and property which can be properly conveyed to AT users. How an interface is conveyed to AT users is as equally important to how they are conveyed to users who do not rely on assistive technology to access the web. For example, if a screen reader user accesses a disclosure component, how might the fact that it is opened be conveyed to them? Is the correct state of the component, or any state at all, being presented in this scenario? Using semantic HTML along with properly implemented ARIA can assist us in creating an equal and accessible experience for everybody.

Who is responsible? Developer