Accessibility Best Practices

Accessibility means a person with a disability is afforded the opportunity to acquire the same information, engage in the same interactions, and enjoy the same services as a person without a disability in an equally effective and equally inclusive manner, with substantially equivalent ease of use. Are you doing everything you can to make your digital communications and events accessible to all?

Presentation Slides

Digital Accessibility

These best practices apply to all digital communications including emails (i.e., Marketing Cloud emails, Cvent emails, etc) and websites (i.e., Cvent event websites, etc.). Understand the fundamental principles of accessible content design applicable to any content.

Images

Images play a crucial role in communication, so ensure that your message is clear and accessible to all readers, including those who may rely on alternative methods to perceive content.

Best Practice

  • Including alt text for images (see the Alt Text section for more details).
  • Using graphics and images to support email content, not replace it.

Bad (Inaccessible) Practice

  • Using an image to convey the entire message.
  • Not including alt text for images.
  • Not considering color contrast in images with font (see the Contrast & Color section for more details).

Alternative Text (Alt Text)

Alternative text, also known as 'alt text,' is a brief textual description of the visual elements within an image. Its purpose is to effectively convey essential visual details in one or two sentences.

Best Practice

  • Keeping alt text limited to 1-2 sentences. If the image requires a longer description, that content should be provided in the main body or in supplementary documentation.
  • Understanding that images are inaccessible to individuals with visual impairment. It is essential to provide alt text to give context to the reader.
  • Using punctuation in alt text.
  • Using an empty alt text tag (alt="") for decorative images.

Bad (Inaccessible) Practice

  • Starting your alt text description with "image of". Screen readers will announce that there is an image before reading the alt text.
  • Including irrelevant details or providing a subjective interpretation in the alt text.
  • Using a PDF or image to contain all of the information in your communication. This would require many alt text sentences and is not the most accessible option. 

Alt Text Resources

Contrast & Color

Sufficient color contrast is crucial for readability, aiding those with visual impairments. High contrast ensures easy distinction, while low contrast may lead to missed information or eyestrain, especially in bright settings. It's vital for inclusivity to make content perceivable by all. Use a color contrast tool to ensure that your content has sufficient levels of contrast.

Best Practice

  • Ensuring a strong contrast between text and background colors for readability. Follow the WCAG (Web Content Accessibility Guidelines) recommendations for minimum contrast ratios. See the Contrast & Color Tools for various tools that can check your color contrast to see if it meets WCAG recommendations.
  • Maintaining consistent color coding for elements like links or buttons throughout the content.

Bad (Inaccessible) Practice

  • Conveying information solely through color. Use additional visual cues or text to provide context.
  • Using low-contrast combinations that make text hard to read (yes, this includes CU Gold font on a white background and white font on a CU Gold background).
  • Not testing your color combinations to ensure accessibility. There are many free tools available to test color contrast.

Contrast & Color Tools

Fonts

By following these font accessibility best practices, you can make your content more inclusive and user-friendly for a broader audience, including those with visual and cognitive processing impairments.

Best Practice

  • Ensuring font size is at least 14 points.
  • Choosing legible and easy-to-read fonts, such as sans-serif fonts, Arial, or Helvetica Neue.
  • Maintaining sufficient line spacing to enhance readability, typically 1.5 times the font size. It's important to ensure that headers also have 1.5 spacing.
  • Ensuring a WCAG recommended minimum contrast between text and background colors to aid users with low vision or color blindness.
  • Left justifying text that is longer than 2 lines of text.

Bad (Inaccessible) Practice

  • Using a small font size.
  • Using excessively decorative or complex fonts that may hinder readability.
  • Using single line spacing.
  • Center or right justifying a paragraph of text.

Headings

Headings provide structure to documents and web pages, aiding sighted users in quickly navigating and understanding content. For screen reader users, headings are crucial for efficient navigation, allowing them to skim and locate key sections just as sighted readers use visual cues. Headings aid screen reader users in swiftly locating specific document sections, similar to sighted users scrolling through a text. This also assists individuals with disabilities who struggle with content organization and task tracking, improving their document navigation and focus.

Best Practice

  • Organizing headings hierarchically, with <h1> as the main heading and descending levels for subsections.
  • Ensuring the heading text provides a meaningful summary of the content that follows.
  • Using headings to structure content logically.
  • Regularly testing content with screen readers to ensure headings are announced correctly and convey the intended structure.
  • Maintaining sufficient line spacing to enhance readability, typically 1.5 times the font size.

Bad (Inaccessible) Practice

  • Skipping heading levels (e.g., using <h4> after <h2).
  • Using font size, bold, or other styles to mimic headings; use proper heading tags or formatting instead.
  • Using heading levels inconsistently or arbitrarily.

Relevant Tools and Resources

  • VoiceOver is the built-in screen reader for Mac.
  • NVDA is the built-in screen reader for Windows.
  • There are many other screen reader tools available. It's important to note that while people without a disability can use screen readers to do some testing, the actual experience may differ for people with a disability who are experienced with using screen readers.

Hyperlinks

Accessible hyperlinks in text are essential for creating an inclusive online environment, improving usability, and ensuring compliance with accessibility standards, ultimately benefiting both users and communicators. People with visual impairments use screen readers to navigate the web. Descriptive link text provides clear and meaningful information about the destination of the link, aiding users in understanding where a click will take them.

Best Practice

  • Links must reflect the context of the communication and should be unique.
  • Embed the link within text that accurately describes where the link will lead
  • Typing out a full email address and linking. Important to note that this is a best practice for email and event registration forms. This is not necessarily a best practice for website content.
  • Indicate the file type if the link is a document rather than a web page. Hyperlinks typically lead to web pages, but when they link to web-hosted documents, automatic downloads can be confusing if the user doesn't expect it.

Bad (Inaccessible) Practice

  • Saying "click this link" or "click here" is considered ambiguous and unhelpful. Screen reader users often scan page content by listening to links; if link text lacks information, they hear repetitive "click here" entries. 
    • EXAMPLE: Interested parties can learn more about the submission criteria through resources available on our site.
    • EXAMPLE: Interested parties can learn more about the submission criteria here.
  • Pasting the full URL instead of hyperlinking text is annoying and cumbersome to the screen reader user. Screen readers will try to read aloud all the characters of a hyperlink.
  • Linking to an email address in other text.

Recorded Session

Test your knowledge with the quiz below.