The importance of Accessibility in UX design: Creating inclusive digital experiences

Introduction

According to Forrester, nearly one in three design teams employs accessibility specialists, and another one-third plans to hire experts in this field within 12 months. Furthermore, 65% software decision-makers are leveraging accessibility testing software, with 17% expressing plans to adopt such solutions.

While compliance is the primary accessibility driver for businesses, it’s not the only one. Companies are increasingly committing to diversity, equity, and inclusion (DEI) for cultural reasons, as well as to improve UX and reach new customers. This article will dive deeper into the principles, practical guidelines, and strategies that companies can leverage to boost product accessibility with speed, efficiency, and at scale.

What is accessible design and why does it matter?

Accessible UX design focuses on the creation of digital products and services that anyone can use and enjoy, no matter their abilities or circumstances.

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”

Tim Berners-Lee, W3C Director and inventor of the World Wide Web.

Poorly designed software can inadvertently create obstacles, limiting access for certain individuals. Recognizing the importance of application and website accessibility is crucial for developers and organizations committed to delivering high-quality digital experiences.

What should accessible UX design address?

Accessibility encompasses more than just users with specific physical limitations, such as visual, motor, auditory, or speech impairments. It goes beyond these categories to include anyone facing permanent, temporary, or situational challenges.

Standard guidelines for accessible UX design in the US

ADA Guidelines

In 2010, the U.S. Department of Justice introduced the ADA Standards for Accessible Design, demanding to make all electronic and information technology accessible for everyone.

Consequences of Non-Compliance:

• Expensive lawsuits, with penalties ranging from $55,000 to $75,000 for initial violations and higher penalties for second-time violations.
• Legal fees associated with defending against ADA lawsuits.
• Public relations challenges and reputation damage.
• Expenses associated with website or application redesign. 
• Risk of alienating customers who rely on accessibility features.

Web Content Accessibility Guidelines (WCAG)

Ensuring ADA compliance for your website involves following the Web Content Accessibility Guidelines (WCAG). The WCAG 2.1 requires digital content and solutions to possess four fundamental qualities

The WCAG 2.1 categorizes website accessibility compliance into three levels of conformance:

Guidelines for accessible UX design 

The following guidelines can serve as an accessibility checklist that your company can follow to comply with some of the key requirements for the WCAG 2.1 conformance level AA.

Content and Structure

• Links need to include meaningful anchor texts:
  • Correct: “Go vote”, “View resources”, “Book a call”
  • Incorrect: “Click here”
• Combine multiple visual elements and characteristics (e.g., text, graphical objects, shape, color) to convey information and prompt actions:
  • Correct:  “This is an sentence” (❗Incorrect article: “an”)
  • Incorrect: “This is an sentence”
• Page titles and headings need to be descriptive, informative, and with a clear hierarchy
• Multiple navigation methods can be required for navigating to the same destination
• Navigation elements need to maintain consistent placement and order across all pages or screens.

Media

• Descriptive alternate text for images is necessary for users who rely on screen readers
• Color contrast ratio against background:
  • For text: at least 4.5:1 
  • For graphical objects and large-scale text: at least 3:1 
  • Logos or brand names: no minimum required
• Dynamic or auto-updating content (like news tickers, slider text, and some messages) needs pause, stop, or hide functionality for users to have enough time to read it
• Enable users to pause, stop, or hide content such as news tickers or chat messages.
• Audio and video elements require transcripts, captions, or audio descriptions
• Animations: to avoid triggering seizures, no content on the page can flash more than three times per second.

Device-independent design

• Device motion. Features controlled via tilting, shaking, or gesturing need alternative controls available for users who are unable to hold or move the device.
• Content orientation. Ensure your UI and content support both the portrait and the landscape orientation.
• Complex gestures. Complex gestures (e.g. pinch to zoom in maps) always need single-pointer alternatives (e.g. the “+” and “-” button).
• Device-specific interactions. Don’t rely on device-specific actions (e.g. hover on desktop, shake gesture on mobile) as the only way to convey information or complete tasks.

Responsive design with linear and consistent layout

Implement responsive design principles to ensure optimal functionality and accessibility across various devices and screen sizes. Develop content that maintains its structure and integrity when presented in different formats, such as simplified layouts. Use clear and concise language, avoiding technical jargon and idioms, to enhance comprehension for all users.

Touch target size and spacing

Touch targets, like buttons, navigation, or other tappable UI elements, need a minimum length and width of 48 CSS pixels (9 mm) and a 10 CSS pixels distance from other touch targets

For Keyboard-only users

• The focus state needs to be clear and visible. No changes of content should occur on focus.
• Tab order has to be logical and predictable when navigating via the Tab key.
• Ability to skip to main content is necessary for users and screen readers to reach content faster.

Keyboard shortcuts should be one-hand accessible and compatible with standard browser and screen reader options. Avoid single-key shortcuts and/or provide a way to disable or remap single-key inputs.

Conducting accessibility audits

Early integration of an accessibility audit, especially during website deployment, redesign, or migrations, minimizes labor-intensive efforts and prevents post-launch issues. 

Techniques for accessibility audit

• Usability Testing: If possible, include individuals with disabilities in usability testing to gain insights into their experiences and challenges. 
• Assistive Technology Testing: Testing with assistive technologies such as screen readers, magnifiers, and voice input devices is essential for evaluating accessibility from the perspective of users with disabilities. 
• Automated Accessibility Testing: Automated tools scan a software product’s code and content for WCAG compliance, saving time for developers and content creators.
• Manual Accessibility Testing: This includes checking for the proper use of alternative text for images, keyboard accessibility, color contrast ratios, and text content readability. Manual testing covers nuanced accessibility issues that are typically overlooked by automated tools.
• User Surveys and Feedback: Ask users about their experiences, challenges, and suggestions for improvement related to accessibility.

Free accessibility testing tools

The following web accessibility checker tools can assist you in conducting an ADA compliance test:

For comprehensive testing:

• Siteimprove Accessibility Checker extension scans single pages and password-protected sites. 
• WAVE Accessibility Evaluation Tool, available for Microsoft Edge, Firefox, and Chrome.
• Accessibility Insights for Web offers automated checking tools, a guide for manual testing, and testing reports. 

For color and contrast:

• Contrast Checker evaluates color contrast ratios and provides tools for making adjustments.
• Photosensitive Epilepsy Analysis Tool (PEAT) identifies the rate of flickering and flashing content in videos.
• Contrast Ratio calculates color contrast ratios according to WCAG standards.

For code and content testing

• Nu HTML Checker ensures HTML markup is valid and follows accessibility standards.
• HeadingsMap provides a visual representation of a web page’s heading structure.
• PDF Accessibility Checker.

The Business case for accessibility

 “Many organizations are waking up to the fact that embracing accessibility leads to multiple benefits – reducing legal risks, strengthening brand presence, improving customer experience and colleague productivity.”

Paul Smyth, Head of Digital Accessibility, Barclays

In 2023 alone, the ADA reported 4,605 lawsuits related to digital accessibility. For businesses striving to minimize legal risks, accessibility compliance is a top priority. Accessibility-focused design also empowers companies to drive innovation, enhance brand image, and potentially reach an audience representing 15% of the global population.

Closing thoughts

Understanding the value of accessibility in business operations is essential. Whether it’s a company, educational institution, nonprofit, or government agency, resources must be allocated adequately. If your operations require highly efficient resources to drive accessibility initiatives, AgileEngine has the right experience. Contact us and explore the level of skills and initiative that our top-1% engineers and UX specialists in LATAM, Asia, and Europe can offer you.