Jump to main content

A11Y Style Guide

Basic Card

  • Make sure you have tabbing focus indicators for all elements that need to be highlighted.
  • Every <img> you add to your site needs to have an alt attribute. If the image is informational, set the alt equal to a descriptive alternative for that image.
  • If the image is decorative or redundant to adjacent text, set alt="", which conveys to assistive technology users that the image isn’t necessary for understanding the page.
  • Avoid using generic strings like photo, image, or icon as alt values, as they don’t communicate valuable content to the user. Be as descriptive as possible.
  • You can add class="visuallyhidden" with descriptive text to give more context to a button or link's purpose.

Resources

WCAG 2.0 Guidelines

1.1.1 Non-text Content - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose (some exceptions). (Level A)

Note: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it does not need text alternatives.

1.4.3 Contrast (Minimum) - The visual presentation of text and images of text has a contrast ratio of at least 4.5:1 (some exceptions). (Level AA)

1.4.5 Images of Text - If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text (some exceptions). (Level AA)

2.4.7 Focus Visible - Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)

Portrait of Astronaut Gus Grissom

Gus Grissom

Astronaut, NASA
Office Address
123 Maple St.
West Lafayette, IN
555-555-1212

Lieutenant Colonel Virgil Ivan (Gus) Grissom (April 3, 1926 – January 27, 1967) was one of the original NASA Project Mercury astronauts, a United States Air Force test pilot, and a mechanical engineer. He was the second American to fly in space, and the first member of the NASA Astronaut Corps to fly in space twice.

Back to top