Jump to main content

A11Y Style Guide

Buttons

  • A <button> tag does not need anything special to work. Use <button> when you can, but it is possible to use other elements as long as you add role="button" and add JavaScript to replicate the button functionality.
  • Just like links, you can add class="visuallyhidden" with descriptive text to give more context to the button's purpose.
  • If a button contains an <img> element, make sure to set its alt attribute. If it contains an icon, use aria-label to describe the icon instead.
  • You can use <input type="image"> to make a graphical button. It takes a src and alt attribute just like traditional images.
  • Button states are important, not just button styling! If you are only toggling classes to visually manage state of your components, you are likely not appropriately conveying that state to users of assistive technologies.

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.

Example button markup Like example button markup

Colors

  • Avoid using color only to communicate information. In the case of links, use another identifier such as bold or underline to indicate a link verses using color alone.
  • Some users have difficulty reading text if there is too little contrast between foreground and background. To meet Level AA, text must have a contrast ratio of at least 4.5:1 (or 3:1 for large text). In order to meet the guidelines at the stricter Level AAA, the contrast ratio must be at least 7:1 (or 4.5:1 for large text).

Resources

WCAG 2.0 Guidelines

1.4.1. Use of Color - Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)

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

Primary

$color-cherry
#e00000
$color-ruby
#a51323
$color-sea-glass
#7fffd4
$color-grass
#42dc42
$color-cornflower
#4083ae
$color-navy
#0a3055
$color-ballet-slipper
#ffa0e5
$color-eggplant
#550055

Black, White, Grays

$color-black
#000000
$color-midnight
#464646
$color-manatee
#888b8d
$color-silver
#bbbbbb
$color-alto
#dddddd
$color-gallery
#f4f4f4
$color-alabaster
#f7f7f7
$color-white
#ffffff

Read More Links

  • Add id selectors to titles and use aria-labelledby="" to link to the title text (Example #1).
  • Add decriptive text with aria-label="" directly in the link (Example #2).
  • Use the class visuallyhidden to visually hide more information about the link (Example #3).
  • Turn read more links into buttons, when you can, since they allow for more labeling options.

WCAG 2.0 Guidelines

2.4.4 Link Purpose (In Context): The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general. (Level A)

2.4.9 Link Purpose (Link Only): A mechanism is available to allow the purpose of each link to be identified from link text alone, except where the purpose of the link would be ambiguous to users in general. (Level AAA)

Example #1: Using aria-labelledby

Storms Hit East Coast

Torrential rain and gale force winds have struck the east coast, causing flooding in many coastal towns. Read More

Example #2: Using aria-label

Black Bears Trapped in Cars

Over the past three weeks there have been 15 reports or black bears getting themselves trapped in vehicles. There are several ways to prevent this from happening to you. Read More

Example #3: Using aria-describedby

Can I have a badge?

Badges? We ain't got no badges! We don't need no badges! I don't have to show you any stinking badges!

This is a quote from the 1948 movie The Treasure of the Sierra Madre.

Read More

Example #4: Using visually hidden text

Mass Hysteria

Fire and brimstone, coming down from the skies. Rivers and seas boiling... Human sacrifice, dogs and cats, living together...

This is a quote from the 1984 movie Ghostbusters.

Read More about mass hysteria in relation to movie quotes

Typography

  • Use real text rather than text within graphics.
  • Select basic, simple, easily-readable fonts and use a limited number of fonts.
  • Avoid small font sizes and use relative units for font size (ems or rems).
  • Limit the use of font variations such as bold, italics, and ALL CAPITAL LETTERS (caps are similar to screaming to screenreaders).
  • Don't rely only on the appearance of the font (color, shape, font variation, placement, etc.) to convey meaning.
  • Avoid blinking or moving text.

WCAG 2.0 Guidelines

1.4.1. Use of Color - Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)

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

1.4.4 Resize Text - Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (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)

1.4.8 Visual Presentation - For the visual presentation of blocks of text, a mechanism is available to achieve the following (see WCAG guidelines for more info). (Level AAA)

Base

Verdana Medium
Verdana Italic
Verdana Bold
Verdana Bold Italic

Secondary

Tahoma Light
Tahoma Light Italic
Tahoma Roman
Tahoma Italic
Tahoma Medium

Tertiary

Georgia Bold
Georgia Bold Italic
Georgia Italic
Georgia Regular
Back to top