Accessible Design: What’s Good for Consumers Is Good for Business

In the quest to evolve customers into loyalists, brands are challenged to create engaging digital experiences at every touchpoint. Digital form must meet real-world function, with the goal of making every consumer interaction clear, concise, and contextually relevant.

But some consumers — those with disabilities — require special considerations, as outlined in regulations such as the Americans With Disabilities Act (ADA), Section 508, and 21st Century Communications and Video Accessibility Act (CVAA). To comply, brands must acknowledge the digital constraints faced by their disabled audiences — such as fonts that are too small to read or buttons that are too cumbersome to navigate — and solve them through accessible design.

Although compliance is an investment in both time and resources, brands should see accessibility as an opportunity: By optimizing digital experiences such as websites, mobile apps, chatbots, and email, brands can capture more consumers — and their corresponding market share. But the benefits of accessible design are even greater than that: When brands meet the needs of the disabled, they improve the experience for everyone.

Why Accessibility Matters
One in five Americans live with a disability such as a visual, hearing, motor, or cognitive impairment. Many brands incorrectly assume their challenges prohibit them from engaging with technology. In reality, more than 60% of people with disabilities own a computer; 58% own a smartphone. The disabled population also represents $645 billion of disposable income, making it even more imperative for businesses to connect with them.

Although assistive technology — screen readers, screen magnifiers, keyboard-only navigation, and dictation software for voice navigation — helps with digital accessibility, it’s not enough, which is why the regulations exist. Although it would be impossible to account for every type of user every single time, perfection isn’t the goal. Integrating inclusion into the design process is.

The Proactive Accessibility Approach
Reactively isolating, prioritizing, and addressing individual accessibility issues in existing digital experiences is one way to tackle it. But a proactive approach to accessibility is more beneficial — for your customers and your business — in the long run. A proactive approach typically includes these four steps:

1. Train developers, testers, and content creators in accessibility concepts and techniques.
2. Get any new design wireframes reviewed for accessibility optimization and potential issue identification.
3. Equip your development teams with tools to integrate accessibility testing into all stages of the development process.
4. Establish internal policies and processes to ensure the accessibility of digital products, content, and third-party tools.

Accessibility Team Checklists
Accessibility is a team sport. Digital designers, content creators, project managers, developers, user experience (UX) architects, and quality assurance (QA) specialists work together to ensure every digital asset — as well as the entire digital experience — meets the needs of all consumers.

Below are some checklists for teams charged with creating accessible digital experiences. Much of this information comes from the Web Content Accessibility Guidelines (WCAG) 2.1 developed by the World Wide Web Consortium (W3C):

Designers
Designers need to think about the limitations some users have with color and text size. They also have to consider the role of animation and interactive elements, because people with cognitive disabilities may have difficulty with pages that are too busy or complex.

Designer checklist:

• Ensure the contrast ratio between text and background is at least 4.5 to 1. If your font is at least 24 pixels or 19 pixels bold, the minimum drops to 3 to 1.
• Do not rely on color alone to relay important information.
• Do not rely on sensory characteristics — shape, image, size, location, sound — to relay important information.
• Use and design focus states; never hide them.
• Do not hide labels on forms or other web components when focus is placed inside them.
• Label fields clearly so users know what to input.
• Be consistent and clear across functions, placement, and labeling.

Writers
Readability has to be the top priority. Content creators should use clear language, simple sentences, and subheads and bullets.

Writer checklist:

• Label fields clearly so users know what to input.
• Write good alt text for images.
• Be consistent and clear across functions, placement, and labeling.
• Use section headings to organize content.
• Avoid jargon or idioms.
• Write descriptive calls-to-action (CTAs). For example, “create an account” is better than “click here.
• Transcribe video content and upload transcripts to streaming service.

Project Managers
Project managers are the glue that holds a project together, keeping team members on task and on time. They can also be advocates for accessibility.

Project manager checklist:

• Familiarize yourself with what it takes to make content accessible.
• Build in time for accessibility — training, implementation, and testing — during project planning.
• Praise efforts to increase accessibility.

Developers
This group has to do the heavy lifting, because they’re ultimately responsible for bringing the digital experience to life.

Developer checklist:

• Use semantic headings and structure.
• Support keyboard navigation.
• Understand and use HTML landmarks.
• Use ARIA attributes, when applicable.
• Write descriptive alt text for images.
• Use focus states to help users navigate and understand where they are.
• Make SVGs accessible to assistive technology.
• Provider users a way to skip top-level navigation to access main content.
• Avoid images and iconography in pseudo-elements.
• Hide decorative elements from screen readers.
• Ensure HTML document has a language attribute.
• Ensure links are visually identifiable and have clear focus and active states.
• Allow zooming up to 200% without loss of content.
• Use unobtrusive JavaScript.
• Provide alternatives for users who don’t have JavaScript enabled or available.
• Ensure tab order of the form follows a logical and sequential pattern.
• Provide associated label for all form controls.
• Make sure placeholder attributes aren’t being used in place of label tags.
• Group related form elements with field set and describe the group with a legend.
• Provide text transcripts for video content.
• Provide synchronized subtitles for videos.
• Check your work with browser tools to identify issues.
• Check your work with screen readers.

UX Architects
The UX team is required to have a holistic view of accessible design and oversees its execution across all disciplines. This group provides support and guidance to all other departments and heads up usability testing, ensuring that people with disabilities are included.

UX checklist:

• Ensure consistency across functions, placement, and labeling.
• Ensure labels on forms or other fields don’t disappear when a user starts to fill them in.
• Ensure that labels clearly communicate what the user is supposed to input.
• Provide unique accessibility for PDFs and other text artifacts.
• Provide pause controls for automatic animations that play longer than five seconds.
• Avoid screen flashing more than three times per second.
• Provide accessible, non-animated methods for disabling or pausing animated content within a page.
• Provide ample space for touch targets.

QA Specialists
Quality assurance specialists are the final check in the accessible design process, ensuring that other team members have met their requirements.

QA checklist:

• Review each page with browser tools to identify issues.
• Review pages with a contrast tool to ensure design meets the contrast ratio standard.
• Test for keyboard-only navigation.
• Test pages with screen readers.
• Ensure content hierarchy makes sense to the eye, keyboard, and screen reader.
• Check that charts and images have alt text.
• Check decorative images to ensure they aren’t visible to screen readers.
• Test each page at 200% zoom to ensure there’s no loss of content.

Accessible Will Be the Standard
Accessible design is becoming the standard for many brands and technology leaders, including Google, Microsoft, and Apple. As the laws and guidelines requiring accessibility become more defined — and enforced — those who take a proactive approach will be best positioned to create great customer experiences.