Disclaimer: This project summary is de-branded to align with NDA compliance.
[Telecom] App Accessibility
Enabled customers with different abilities to successfully access and navigate the [Telecom Company] app experience.
ROLE
User Experience (UX) Designer
TIMELINE
February 2023 to August 2023
TEAM
4 Designers, 1 Content Strategist, 1 Accessibility Specialist
SKILLS
Cross-team Collaboration, Figma, Accessibility Annotations
Customers who primarily use screen readers to navigate digital spaces need an equal experience.
UNDERSTANDING THE PROBLEM SPACE
The client, [Telecom Company], recognized that a percentage of their customers experience visual or other impairments that negatively impact their ability to use [Telecom Company] digital products. To ensure customers with a varying range of abilities are able to equally access products offered by [Telecom Company], my Publicis Sapient team was asked to remove barriers that restrict customers who rely on non-visual cues for navigation from fully accessing the [Telecom Company] app.
💭 How might we support customers who rely on non-visual cues in navigating the client’s app?
Create descriptive labels for components throughout the app.
DEFINING COMPONENTS
Because screen readers read aloud information that details the name and type of components on a screen, I defined accurate and descriptive labels for all components on the for the features my Publicis Sapient team worked on for the [Telecom Company] App. Properly identifying components and their contents supports the customer in understanding the interface they’re interacting with, without needing to visually see interface.
Identify the HTML hierarchy for each screen.
DEFINING PAGE HEIRARCHY
Screen readers reference the HTML structure of apps and websites alike to help customers navigate digital experiences in alignment with their intended hierarchal structure. Screen readers interpret HTML headings, such as H1, H2, and H3 headings, as indicators for the order in which to read titles on screens. I ensured every screen contained at least one H1 level heading to help customers understand the page’s topic and purpose.
I identified the HTML headings for each screen so that customers who use screen readers will be able to process information on the page in order of significance.
Specify the reading order of components.
DEFINING READING ORDER
In addition to referencing HTML structure for guidance on interpreting screens, screen readers also rely on a pre-defined reading order of components so that customers are able to experience contents on a page in a logical sequence.
To prevent screen readers from defaulting to reading components in an incorrect order and creating confusing for screen reader users, I efficiently arranged the reader order of page elements. Doing so also supports customers in associating information with appropriate, corresponding actions.
Deliver accessibility annotations to developers.
DELIVERING ACCESSIBILITY ANNOTATIONS
After completing accessibility annotations for each screen in the app, I handed-off the file to the [Telecom Company] development team. Using the component labels, heading label, and reading order, the developers were able to encode accessibility into the app.
I successfully empowered customers who rely on non-visual cues to access the [Telecom Company] app with ease. Along with this accomplishment, I:
Reduced barriers to task completion for assistive-technology users.
Lowered the client’s legal and reputational risk.