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.


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

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