A11Y Implementation (2021-2022)

OneApp Accessibility Implementation

Overview

At Teladoc, a global leader in virtual healthcare services, I worked on one of the world’s largest telemedicine platforms, encompassing both the Legacy and OneApp versions. OneApp unified three healthcare applications into a single cohesive solution. My primary objective was to ensure that both applications were WCAG (AA) compliant and fully functional with assistive technologies. This included collaborating with the WCAG development team to align legacy systems with legal accessibility requirements and establishing a comprehensive set of rules and principles for the new OneApp to provide an inclusive and seamless user experience for all users.

Company

Teladoc

Project duration

1.5 years

My role

UX Designer, Accessibility

Fig. 01 — Overview

Teladoc

Problem statement

Discovery

The telemedicine applications at Teladoc, including both Legacy systems and the new OneApp, were not fully WCAG compliant, making them inaccessible to users relying on assistive technologies. This lack of accessibility posed significant risks, including potential penalties for non-compliance with legal standards. With OneApp merging three healthcare applications into a single platform, it became critical to address these accessibility gaps to ensure inclusivity, legal compliance, and a seamless experience for all users.

Process

Four steps

How I got there

Step 1

A11Y Figma Components Library

To create the a11y annotations, our team developed an Annotation Components Library that helps specify key elements such as links, buttons, input fields, dropdowns, modals, tables, regions, and tab order.

Step 2

Teladoc web page annotated for accessibility: Skip to main content link, menubar with Get Care, Programs and Health Info, the expanded Health Info menu (Past telehealth visits, Telehealth visit documents, Medical history, Primary Care team, Primary Care plan, Expert Medical Opinion requests, Pharmacies and external providers), Messages and Account links, with focus-order numbers

Accessible Navigation

My work involved developing a global navigation, requiring precise annotations. To ensure proper markup, I conducted research and collaborated with WCAG product owners and Accessibility Auditors.

Step 3

Three annotated Teladoc mobile screens: collapsed hamburger menu, Programs list (Condition Management, Mental Health) and the Condition Management list, with tab bar items Get care, Programs, Health info, Messages and Account labelled with screen reader text

Mobile Navigation

I worked on the navigation for mobile apps iOS and Android, ensuring seamless usability across platforms and that the created solutions work well with the Accessibility features across all the platforms correctly.

Step 4

Teladoc home page ‘Welcome, Lucile’ fully annotated for accessibility: Skip to main content link, menubar, H1 and H2 headings, Get started card links, Blood pressure card, Scale Welcome Kit Order status, COVID-19 assessment, Primary Care card with Request a visit, and 24/7 Care

Annotation of the Pages

Creating an optimal structure and element order for keyboard and screen reader accessibility was critical for the main page of OneApp. With numerous services and similar calls to action presented in tile format, it was essential to ensure that users could easily navigate the page and understand each action.

Solution

Delivered

What I designed

Standartization & creation of a11y maps

To help developers understand where a user would appear after clicking, where focus would fall after a certain action, and whether notifications needed to be read, I created an annotations map. This visual tool provided all the necessary details and information to ensure developers had a clear understanding.

Figma flow of annotated Teladoc pages: Basic page view, About you edit screens and Add secondary phone screens with accessibility annotations and connectors

Annotated Primary Care card: H2 heading, alt text markers on icons, ‘As soon as: Day’, Video, Phone, description text, and the Request a visit link announced as ‘Primary care, Request a visit, link’

Accessible Design System

To standardize accessibility practices and streamline the annotation process, I embedded accessibility guidelines directly into the design system components. Each component was accompanied by detailed documentation for both designers and developers, ensuring that the implemented components were designed and developed with accessibility in mind from the start.”

A11Y guidelines

To ensure standardized annotations across other designs and areas of the app, and a consistent approach to accessibility development throughout the application, I collaborated with WCAG product owners to develop guidelines. These guidelines outline general formulas for annotating each element, providing designers and development teams with clear direction.

04 — Outcomes and next steps

What I learned

Learnings

Collaborated with the WCAG team and gained in-depth knowledge of AA WCAG requirements.
Explored assistive technologies in action to better understand user needs.
Mapped out comprehensive accessibility (a11y) workflows for developers to ensure a consistent experience for people with disabilities.
Developed standardized methods for creating a11y annotations to support other teams.

Set of accessibility documentation pages for Buttons, Input fields, Dropdowns, Controls and Modals, each with annotated examples and screen reader text

Next case study

Digital Analytics Dashboards

Acoustic | Redefine Legacy Application & New Functionality (2020 - 2021)

READ CASE STUDY

→