Accessibility in Digital Media Design

Integrating accessibility considerations into your content development workflow is important because it is an opportunity to improve the digital experience for all users and it can foster a culture of accessibility within your team. The accessibility efforts you put into your design and development work upfront will save you time later in the process.

How does considering accessibility during the planning and development phase benefit your overall workflow?

Early Planning and Design: Considering accessibility from the outset requires thoughtful planning during the design phase. This includes considering font choices, color contrast, layout, and navigation. By addressing accessibility early, designers can create a solid foundation for the resulting media.

Efficient Iterations: When accessibility is part of the initial design discussions, it reduces the need for extensive revisions later. Designers can identify potential issues early and make informed decisions, saving time and effort during iterations.

Better User Experience/Future proof: Accessibility benefits all users, not just those with disabilities. Well-designed accessible media and interfaces improve engagement, satisfaction, and overall user experience. 

Accessibility in the context of media design and development derives from the practice of Universal Design (UD).

Universal design is a design philosophy, an idea that helps inform how we approach creating products, environments, and services that are accessible and usable by as many people as possible, regardless of age, ability, or other factors. The goal is to design spaces and items that everyone can use without the need for adaptation or specialized design.

Universal Design for Digital Media

The principles of universal design as they relate to creating digital media content benefit users in various ways.

Equitable Use: Ensure all users, regardless of ability, can access and use web content and digital documents. This includes providing strong color contrast for users with color blindness and ensuring all interactive elements are accessible via keyboard.

Flexibility in Use: Allow customization and flexibility, such as adjustable text sizes and alternative input methods. This helps accommodate users with different preferences and needs.

Simple and Intuitive Use: Make web content and digital documents easy to navigate and understand. This involves clear labeling, logical structure, and intuitive interfaces that reduce the cognitive load on users.

Perceptible Information: Present information in multiple ways to ensure it is accessible to all users. For example, provide text alternatives for images, captions for videos, and ensure content is readable by screen readers.

Size and Spacing of Elements: Ensure interactive elements are appropriately sized and spaced to be easily accessible on different devices, including mobile phones and tablets.

This is not an exhaustive list, but it does provide a foundation for integrating accessibility into your design and development workflows.

And it goes a long way in providing digital content where learning or other goals are achievable by individuals with wide differences in their abilities to see, hear, speak, move, read, write, attend, organize, engage, and remember.

Design/Development Framework

• Purchase and/or build tools to support the work, and develop and maintain a strong design system that incorporates effective quality-control processes.
• Set clear accessibility goals aligned with recognized WCAG standards.
• Create inclusive design templates considering color contrasts, font sizes, and interactive elements accessible to users with disabilities.

There are general best practices to consider when designing and developing media content. The following best practices can guide you through creating accessible media and assist alleviating many of the most common accessibility issues.

Strategize About Your Copy

Your copy is a key component of your content. When it comes to accessibility, less is more. will help your copy be readable, engaging, and easy to understand.

• Split longer sentences into two (or more) sentences.

• Use a minimum font size of 14px and avoid thin font weights.

• Set line spacing at 1.5 to 2

• Use italics or bold for emphasis sparingly. Which ever you choose, be consistent throughout the piece of content.

• Ensure that text color is in high-contrast to any background colors. Black text on a white background is ideal.

• Avoid placing text over certain images that might decrease readability due to the colors in the underlying image.

• Avoid using colors and underlines for emphasis for non-linked text.

Build a Mindful Layout

Once you've nailed down your copy, make sure you maximize its effectiveness in an accessible layout.

• Allow for white space between sections of text.

• Pay attention to contrast of text and any images/graphics to increase readability and visual scanning.

• Left-justify all text.

• Avoid using even (justified) text alignment. This causes visual troughs throughout blocks of text making it difficult for some to read.

• Use centered text alignment sparingly and only when centering 10 words or less.

• Use heading styles (H1, H2, H3, etc.) for headlines. This creates a logical reading order for screen readers.

• Use bold, high-contrast headings above smaller portions of copy.

• Use single-column layouts when possible.

Focus on Links

Creating accessible links can truly make or break your communication. Screen readers dictate every letter and number of a multi-line URL which can make it difficult to navigate and comprehend the text.

• Underline all links in the copy. This is usually done automatically by most software when detecting a URL or email in your copy.

• Ensure that the link color has high contrast compared to the background color.

• Avoid using link text such as: "Read More", "Click Here", or "Learn More". Be descriptive and concise in the linked text, allowing readers to know what they will find by clicking on the link.
  

• Bad Practice: There are many strategies for creating accessible content. Learn more here. 

• Good Practice: Learn 4 Strategies for Creating Accessible Content.

• Avoid displaying the actual URL as a link. A screen reader will read every single character in the URL. The exception to this rule is typing/linking email addresses. It is correct to type out the email address and then link the email address as typed.

• Do not link to an email address in other text. An email address should always be typed out fully and linked, even in an email signature line.
  
  
  • Bad Practice: Questions? Email us.
    
    
  • Good Practice: Questions? Email us at email@address.com 
• Keep buttons surrounded by adequate white space so they are easily tappable on mobile devices.
  
  
• Ensure that button backgrounds and button text colors have high contrast so they are easy to read. For example, don't use white font on a gold background or gold font on a white background.

Prioritize Your Images

Images are a key component of how we communicate, so make sure your intentions are obvious for those who can't see them (or those who choose not to).

• Use alt text to describe information in the image.
  
  
  • Repeat text in the image (if applicable).

• Avoid repeating text in alt tags if the surrounding copy contains the same information.

• Alt text for linked images should describe the result of the intended action. Think of them like buttons or text links.
  
  
  • For example: alt text="Register Now"

• Use an empty alt tag (alt=””) for decorative images.

• Avoid alt language such as: alt=”This is a picture of…”

• Use graphics and images to support content, not replace it.

References

Mortensen, J. (2019, October 10). 4 strategies for creating accessible content. University of Colorado eComm Wiki. https://www.cu.edu/blog/ecomm-wiki/4-strategies-creating-accessible-content

Our ongoing accessibility effort works towards being in line with the Web Content Accessibility Guidelines (WCAG) version 2.1, level AA criteria. These guidelines not only help make technology accessible to users with sensory, cognitive and mobility disabilities, but ultimately to all users, regardless of ability.

We welcome comments on how to improve our technology’s accessibility for users with disabilities. Please let us know if you need to report a barrier or request an accommodation.

Report a barrier or request an accommodation

File Accessibility Remediation Tool

SensusAccess: Self-service tool that converts documents into a range of digitally accessible alternative formats.

Document Accessibility and eCommunications

Digital Accessibility Standards and Resources: A repository of recommended resources to support you navigating and adhering to our Digital Accessibility Policy and Standards and Guidelines. 

Digital Accessibility Office CU Boulder: A collection of resources related to Content Accessibility Fundamentals, Document Accessibility, and more.

Accessibility Best Practices: Best practices you can apply to all digital communications.

4 Strategies for Creating Accessible Content: Four simple guidelines you can follow to ensure that your communications meet accessibility standards.