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 balancing text and images).
• Not including alt text for images.
• Using flashing content that could trigger seizures.
• Not considering color contrast in images with font (see the Contrast & Color section for more details).

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

• W3C has a helpful decision tree resource for determining if an image needs alt text.
• A guide to writing alt text and accessible image captions.
• Alt text vs. image descriptions.

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. Based on WCAG (Web Content Accessibility Guidelines) standards, it's essential to make content POUR: perceivable, operable, understandable, and robust. 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 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

• Contrast Checker
• Are My Colors Accessible?
• Colour Contrast Analyser (CCA) (downloadable tool for Windows and Mac)

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 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.

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.
  • EXAMPLE: Interested parties can learn more about the submission criteria through resources available on our site.
• Embed the link within text that accurately describes where the link will lead
  • EXAMPLE: Developing Accessible Technology Best Practice
• 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.
  • EXAMPLE: Questions? Contact us at email@address.com. 
• 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.
  • EXAMPLE: Commercial vs. Transactional Emails (pdf)

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.
  • EXAMPLE: https://www.colorado.edu/accessibility/aul-testing/developing-accessible-technology/developing-accessible-technology-articles
  • The only exception to this rule is if users are intended to memorize the exact URL of a web page. EXAMPLE: https://www.cu.edu
• Linking to an email address in other text.
  • EXAMPLE: Questions? Email us.

Buttons play a key role in the user experience, so accessibility is essential. Buttons should have clear and unique labels, sufficient color contrast, and be an adequate size for easy reading and clicking. 

Best Practice

• Giving your button meaningful context using simple yet descriptive text. Readers should be able to decipher the purpose of the button from the text alone.
  • EXAMPLE: "Read Bob's Story" or "Register for the Lunch"
• Ensuring a strong contrast between text and background colors for readability (see the Contrast & Color section for more details).
• Making the button an adequate size to make it more clickable. WCAG recommends at least 24 x 24 pixels (which can include the button and padding around it). 

Bad (Inaccessible) Practice

• Using generic text such as "Click Here" or "Read More". 
• Not considering color contrast (see the Contrast & Color section for more details).
• Making the button small and difficult to click for users.