Global Mental Healthcare Solution Provider Makes Accessibility a Competitive Advantage

From Exclusion to Expansion

OUTCOMES

BACKGROUND

Our client is a US-based healthcare solution company that breaks down barriers to mental well-being. They offer a blend of tech-powered tools, personalized coaching, and therapy, all seamlessly integrated and tailored to individual needs. This innovative approach empowers people to take charge of their mental health, making it accessible and convenient for everyone.

WHAT WE DID

As our client's business grew, reaching new and diverse customers became crucial. However, the application wasn't accessible to many potential users, including those with disabilities, creating ethical and legal concerns. This limited market reach and hindered inclusivity.

We embraced accessibility as a strategic business driver and after a thorough audit, we tackled over 1,000 issues across the user experience while prioritizing the needs of diverse users:

Visual Impairment: Enhanced screen reader compatibility and structured HTML elements for intuitive navigation.

Hearing Impairment: Added video transcripts, image alt text, and summarized audio content.

Physical Disabilities: Enabled keyboard navigation ensuring interactivity with various input methods.

Achieved WCAG 2.1 A & AA standards for conformance levels

A QUICK WORD ON ACCESSIBILITY

ETHICAL IMPLICATIONS

Roughly 15% of the US population is disabled, and approximately 1 in 12 men are colorblind. Stats like these frequently get ignored in the initial phase of a digital product because founders work against time and underestimate their possible success. But as soon as they have more than a few hundred users, you can confidently say that at least a few of them need a more accessible product.

LEGAL IMPLICATIONS

Most Western countries have laws either encouraging accessible products or punishing the ones that are not accessible. Some such regulations and standards are:

1. Americans with Disabilities Act (ADA)

This US federal law came to pass in 1990 and protects individuals with disabilities from discrimination. It mandates equal access to employment, public accommodations, transportation, and services. Violations of the ADA can result in significant penalties and fines, with penalties ranging from $55,000 for a first violation up to $150,000 for subsequent violations, depending on the nature and severity of the offense.

2. Web Content Accessibility Guidelines (WCAG)

WCAG, established by the World Wide Web Consortium (W3C), offers recommendations for crafting web content that is inclusive to individuals with disabilities. These standards guarantee that websites and web applications are designed to be perceivable, operable, understandable, and robust, thus broadening access to online information and services. Additionally, penalties and fines for non-compliance can vary depending on the specific laws and regulations in a given jurisdiction.

BUSINESS IMPACT

Many governments and large organizations insist on using accessible products internally, which means if your target customer is one of these companies, your product will have to be highly accessible by different groups of people.

PROJECT HIGHLIGHTS

1.

Initiating an Accessibility Audit

2.

Making the App Screen-Reader Friendly

3.

Text-to-Speech Support

4.

Right-to-Left (RTL) Languages

5.

Keyboard Navigation Enhancement

6.

Accessible PDFs

1. Initiating an Accessibility Audit

To ensure the application is accessible to everyone, we used Deque Axe.This tool helped us find areas where application accessibility can be improved.

After creating a priority list of tasks, we went through each one, focusing on ones that have the biggest impact.

2. Making the App Screen-Reader Friendly 

Screen readers rely on descriptive labels to navigate through content. We started with adding appropriate labels, also ensuring all inputs were fully interactive with different input methods.

We then addressed contrast and readability issues which enhances the usability of the application for users with conditions like color blindness.

Utilizing semantic HTML tags correctly, such as <a> for links and <button> for buttons, ensures compatibility with assistive technologies and provides clearer navigation cues for users. We also added 'role' attributes to elements to help clarify their purpose and behavior for assistive technologies. Assigning semantic headings with appropriate 'role' and 'aria-level' attributes aids in document structure comprehension for users of screen readers which was our next step.

Ensuring that all image and icon elements have alternate text or captions was also a priority. For users to comfortably access the app, we ensured all content was fully visible with upto 400% zoom levels.

We also added a 'position' attribute to dropdown elements that allows screen readers to announce the current selection's position within the dropdown list, for instance, Option 1 out of 5.

3. Text-to-Speech Support 

We integrated text-to-speech capabilities by revamping the frontend with semantically correct HTML markup, such as using <h1> for main headings, <h2> for subheadings, and so forth. This restructuring allows text-to-speech users to navigate our app more naturally, improving their overall browsing experience.

4. Right-to-Left (RTL) Languages

For RTL languages such as Arabic and Hebrew, we updated the app to ensure users across different linguistic backgrounds can access the content seamlessly, regardless of reading direction, thereby promoting inclusivity.

5. Keyboard Navigation Enhancement

To facilitate easy navigation and interaction for users who rely solely on keyboard input, particularly individuals with motor impairments, we made improvements to ensure full keyboard operability throughout the app. This involved adding appropriate focus targets and labels, ensuring a logical focus order.

These enhancements significantly improve accessibility for users who navigate using keyboard commands rather than a mouse.

6. Accessible PDFs

Lastly, we updated all generated PDFs to adhere to WCAG and User Agent Accessibility Guidelines (UAAG) standards. This involved optimizing contrast ratios, enhancing keyboard navigation within PDF documents, and ensuring compatibility with text-to-speech readers.

We utilized tools like the PDF Accessibility Checker (PAC) to verify compliance with these standards, ensuring that our PDFs are accessible to a wide range of users.

*WCAG has 3 levels: A, AA, AAA. AA ensures high accessibility for most users, while A addresses some issues and AAA covers the widest range of guidelines.