Buttons

  • It is important to know when to use a link and when to use a button. A button does an action while a link takes you to another URL.
  • A <button> element does not need anything special to work. ARIA's role="button" is already assigned implicitly. So if you need a button, use a true <button> element.
  • 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.
  • Remember that <button> defaults to type="submit", so adding type="button" helps you avoid accidentally submitting forms.
  • Your button needs a descriptive name. Add class="visuallyhidden" with descriptive text to give more context to the button's purpose.
  • If the button only contains an <img> element, make sure to set its alt attribute. If it only contains an icon use aria-label.

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.

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
#eeeeee
$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 visually hidden text

Mass Hysteria

Fire and brimstone, coming down from the skies. Rivers and seas boiling... Human sacrifice, dogs and cats, living together... Read More about mass hysteria

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