Guide to Creating Content for Websites & Broadcast Emails

Colors and Fonts

• Choose colors and fonts that are easily discernable from the background.

  Most of us know that light text on a white background is not accessible.
  
  However, red text on a white background is also difficult for some to read. Choose a dark red or a dark purple instead of a bright red.
  
  You may also use the WebAim Contrast Checker to determine whether your text meets the minimum contrast requirements for accessibility.
  
  
• Use the bold tag, italics or both to emphasize text.
  
  
• Be careful when highlighting text.
  
  Those using screen reading technology may not understand that the text is emphasized.
  
  Those with low vision or who lack the ability to differentiate colors may have difficulty if the color contrast ratio is low.
  
  Consider using other options or combine highlighting with other options.
  
  
• Avoid cursive or fancy fonts to increase legibility.
  
  
• Avoid capitalizing entire words.
  
  When you capitalize an entire word, screen reading software will announce each letter individually rather than announce the word. Similar to the raw url link issue, this makes it very difficult for an individual dependent on screen reading technology to understand the word.
  
  
• Avoid using strike-through styling.
  
  Screen reading software typically ignores it and the text is announced without indicating that there’s a strike-through.
  
  
• Reserve the use of underlines for links.

Links

• Create descriptive text for your links.
  
  Generic text for links, such as click here, more details, and learn more creates confusion. It gets even more confusing when the same text is used for multiple links with different link destinations.
  
  
• Avoid raw urls, such as https://www., etcetera.
  
  Screen reading software will announce each letter of the url. This makes it very difficult for an individual dependent on screen reading technology to understand the link destination.
  
  
• Underline links. It is the digital standard.

Images

• Avoid text in images.
  
  Text in images is not accessible to those using screen reading technology and those with low vision.
  
  Instead, place text in a field that accepts copied or typed text and not in an alt tag.
  
  
• Use an alt tag text to describe an image. Alt text is limited to 140 characters.
  
  
• If your design will be compromised by removing text from an image, duplicate the text in a field that accepts copied or typed text.
  
  
• View the Guide to  Creating Accessible Graphics.