Empowering every user: making McAfee Support accessible
Empowering every user: making McAfee Support accessible
Achieving WCAG 2.0 AA Compliance to make an inclusive website for all users.
Achieving WCAG 2.0 AA Compliance to make an inclusive website for all users.
McAfee
2022
McAfee a11y
Accessibility Audit
Screen-reader testing
ADA standards
1 year
Quarterly sprints
1 Designer
16 Dev engineers
1 PM
UX Research lead
Accessibility Engineer
Background
Background
Built on an Oracle tech stack over several years by different teams, the Support website posed a series of challenges that prevented the company from complying with accessibility legal requirements.
Built on an Oracle tech stack over several years by different teams, the Support website posed a series of challenges that prevented the company from complying with accessibility legal requirements.
Problem Statement
Problem Statement
How can make the Customer Support website's design inclusive?
How can make the Customer Support website's design inclusive?
Solution
Solution
Achieve WCAG 2.0 AA standard across the experience.
Achieve WCAG 2.0 AA standard across the experience.
Method
Method
Quarterly targets to improve ADA standards by working with the UXR team to identify, prioritize and fix issues with routine usability testing to keep us on the right track.
Quarterly targets to improve ADA standards by working with the UXR team to identify, prioritize and fix issues with routine usability testing to keep us on the right track.
Understanding the scope of the problem + timeline
Understanding the scope of the problem + timeline
Over the course of a year we assessed and addressed ADA fixes with a lot of guidance from an accessibility engineer for particularly tricky problems.
Over the course of a year we assessed and addressed ADA fixes with a lot of guidance from an accessibility engineer for particularly tricky problems.
Method
Method
I acted as the bridge between the User Research for Accessibility Lead + the Accessibility engineer and the developers on my team.
I acted as the bridge between the User Research for Accessibility Lead + the Accessibility engineer and the developers on my team.
Process
23+ JIRA Stories (ADA epic)
The legacy tech stack and years of design debt meant there were a plethora of issues to address. I would write up tickets and follow up with the engineering sprints.
4 check-ins through the year
Our method was to have a quarterly review and test fixes with visually impaired users. Some issues would go back into JIRA.
8+ Fable user testing sessions
23+ JIRA Stories (ADA epic)
The UXR team helped us set up sessions with screen-reader users to test updates to the Support website.
The legacy tech stack and years of design debt meant there were a plethora of issues to address. I would write up tickets and follow up with the engineering sprints.
Design Tradeoffs
4 check-ins through the year
For some issues I had to take a call on whether to retain them, reduce aesthetic value to a degree for functionality or remove/update whole elements.
Our method was to have a quarterly review and test fixes with visually impaired users. Some issues would go back into JIRA.
8+ Fable user testing sessions
The UXR team helped us set up sessions with screen-reader users to test updates to the Support website.
Design Tradeoffs
For some issues I had to take a call on whether to retain them, reduce aesthetic value to a degree for functionality or remove/update whole elements.
Margaret Kuo (UXR Lead) walking us through observed behavior.
Margaret Kuo (UXR Lead) walking us through.
Easy, Medium, Wildly complex fixes
Easy, Medium, Wildly complex fixes
Some issues kept cycling through JIRA because of how the original components were coded. Deeply nested FAQs, modals with interactive elements, chatbots etc.
Some fixes like changing the font size from 12px to 16px were relatively simple.
Others like DOM order and navigating the website were more difficult.
And ones, like nested accordion structures and nested cards, required multiple sprints.
The Easy fixes
The Easy fixes
Some fixes like changing the font size from 12px to 16px were relatively simple.
Some fixes like changing the font size from 12px to 16px were relatively simple.
Adding aria tags and button labels
Tradeoffs
Tradeoffs
I challenged the need of some elements inherited from the enterprise side. This eventually led to re-evaluating 47 search filter options and removing it entirely after looking at usage patterns.
I challenged the need of some elements inherited from the enterprise side. This eventually led to re-evaluating 47 search filter options and removing it entirely after looking at usage patterns.
There was no point in trying to fix an element that no one used.
There was no point in trying to fix an element that no one used.
What I learned
What I learned
It was great collaborating with JAWs users and a revelatory experience as a designer.
It was great collaborating with JAWs users and a revelatory experience as a designer.
What I'd do differently
What I'd do differently
Additional review with UXR
Additional review with UXR
We missed a crucial step where I hadn't observed that screen-reader users really more on the arrow keys than the tab keys when navigating a website. We had to go through another cycle of fixes to rectify this oversight.
Sunk cost fallacy
Sunk cost fallacy
It would have been quicker and less resource intensive to completely overhaul the contact support modal, than the time and effort we spent trying to add fixes to a complex nested element.