accessibility in design

The Importance of Accessibility in Design

Global Accessibility Awareness Day is marked annually on the third Thursday in May. To recognize the importance of digital access and inclusion for over one billion people alive today with disabilities or impairments, a group of eight Peppers came together to facilitate a Brown Bag focused on this very topic! Follow along as we share some of the key insights and takeaways from Ashley, Austine, Brady, Christina, Deb, Gary, Kristen and Lauren.

Prioritizing Accessibility

The Problem:
Accessibility needed to be a priority at all levels of leadership within the organization we were working with and required the UX process to be incorporated at every stage of the process.

The Solution:
To empower employees to act and make their page more inclusive, the UX team developed a bookmarklet that can be used on any website to generate a comprehensive list of what is or isn’t compliant.

For a full list of accessibility considerations they consider, click here.

Accessibility in Web-Based Training

The Problem:
When Flash was decommissioned in 2020, many courses need to be converted into a new format. During the conversion process, issues came to light regarding accessibility, including video/audio overlapping with screen readers and inaccessible screen content and course resources.

The Solution:
The team helped create a Web Based Training (WBT) template and development standards that:

  • Addressed problems with keyboard and tab navigation

  • Required tagging of all course resources and alt text for graphics

  • Utilized compliant colors

  • Guaranteed appropriate text sizes (12pt or higher)

  • Included audio transcripts, captions, and focus/tab order for each screen

  • Added a media preference slide where learners can select a button to ensure the course functions properly with a screen reader

  • Added a media preference slide where learners can select a button to ensure the course functions properly with a screen reader

  • Explained how to avoid using any interactions that are inaccessible, such as drag and drop knowledge check questions

Uncommon Accessibility for UXers

The Problem:
Something that is not often discussed is the partnership between user experience designers and software developers. This partnership is crucial to the success of the project.

The Solution:
It is important to understand that UX designers need to learn some coding language, while software engineers need to learn some usability (and accessibility) practices. Gary has identified some accessibility requirements that fall on both teams to create usable, useful and accessible web products.

UX and UI:

  • Skip Navigation: Bypassing content that is repeated on multiple pages

  • Focus Change: Moving the focus to another page or pop-up/modal when a link is triggered

  • Enough Time: Add accessible preferences or settings for users to set up time limits and adjust the timing for each situation

Developers:

  • Error Handling: Ensure that users are aware that an error has occurred and can determine what’s wrong

UX/UI + Developers:

  • Focus and Reading Order: Allow for more direct access to a page’s primary content by using navigation links, heading graphics and advertising frames

Using Insight from Visually Impaired Users to Improve Site Experience

The Problem:
The Small Business Administration found that entrepreneurs who have started small businesses are stuck and can’t scale their businesses effectively or efficiently. Business owners need access to learning tools that teach the necessary skills to start, grow, manage and scale their businesses.

The Solution:
During the creation of the free e-learning platform to support small businesses, we had the incredible opportunity to test the platform with individuals from the National Federation of the Blind. They were asked to complete a series of task-based questions to help us gain insight into the way visually impaired users navigate through the site. Throughout the testing phase of the project, lessons were learned, including:

  • Establish a compliant palette utilizing a tool like WebAim or Adobe

  • Do not rely solely on color to convey information

  • Interactions should be purposeful

  • Make sure the search bar is easy to locate and use

  • There should be a strong visual hierarchy, especially in tagged PDFs

  • All images should incorporate meaningful alt-text that describes the purpose of the graphic versus the graphic itself

Accessibility Tips and Tricks

The Problem:
UXers can feel daunted by accessibility requirements.

The Solution:
To distill many of those requirements into a few guidelines to better help UXers understand the practice of designing and developing for disabilities. Here are the seven principles of universal design:

  • Principal 1: Equitable Use: Everyone should get the same or at least equivalent experience

  • Principal 2: Flexibility in Use: Accommodate a wide range of preferences and settings options

  • Principal 3: Simplicity and Intuition: Put the important information first and be conventional

  • Principal 4: Perceptible Information: Be redundant when communicating and include good color contrast

  • Principal 5: Tolerance for Errors: Minimize consequences of unintended actions and give warnings for errors

  • Principal 6: Low Physical Effort: Minimize repetitive and sustained actions

  • Principal 7: Sufficient Size and Shape: A large design is unwieldy, and a small design is not perceivable.