ABOUT
Delaware Life’s ONYX was launched for policyholders and agents this year. This portal allowed them to access their policy information, performance, renewals, applications, and other services. ONYX was a startup project in the company, and the project’s priority was launching the product. To the best of my knowledge and research, I worked on getting accessible color contrast on text, buttons, and links, but not more than that. As our product was launched and users grew, I knew that was insufficient. In this project, I dived into accessibility and worked on making ONYX WCAG 2.2 AA compliant.
TEAM
Designer: Shuchi Sharma
Front End: Neal Hamilton | Mirana MA | Harrison Schultz
Scrum Master: Brian McQueen
| ROLE | TIME |
| Research, Design, Accessibility Implementation Strategy | 2 Months |
RESEARCH
I internally audited my website through Wave, a Chrome extension. As I looked into all the issues reported on the pages, I knew work was to be done. The first part was understanding what these issues are, what tools I need, and how to resolve them.
My research notes:
I researched about Web Content Accessibility Guidelines (WCAG) and understood that the main requirements for accessibility come from three main groups of users:
- Low vision
- cognitive limitations or learning disabilities
- Disabilities that make using mobile devices challenging
WCAG (Web Content Accessibility Guidelines) versions 2.0, 2.1, and 2.2 are guidelines designed to make web content accessible to people with disabilities. While WCAG 2.0 established foundational standards in 2008, WCAG 2.1 (2018) and WCAG 2.2 (2021) extended these guidelines to address evolving technologies and diverse user needs, ensuring that digital content is accessible to people with disabilities. While WCAG 2.1 contains 78 success criteria, WCAG 2.2 contains 86 – 77 from 2.1, removing one and adding nine new ones.
There are WCAG levels ranked on a scale from A to AAA. “A” conformance is the minimum conformance level, while “AA” standards are midrange and widely considered legally acceptable. “AAA” is the conformance level and the optimal accessibility level.
Currently, WCAG 2.1 AA is the most desirable accessibility level, offering higher conformity than level A. It is commonly referred to in court legal proceedings and is a good standard for online accessibility. Making a website legally accessible typically means achieving these WCAG AA standards.
External Audit: Group 1001 hired an external agency to conduct an accessibility audit on the ONYX website. Their audit revealed that 44% of the issues were related to color contrast and focus indicators. The rest were related to structure and semantics, Interactive controls, sensory, and keyboard.
We divided the work, and I took charge of color contrast and focus indicator solutions.
PROBLEM 1: INACCESSIBLE TEAL
Our brand accent color is #34CCAA
This is the color breakdown of ONYX. A nonaccessible teal.
I knew teal was a non-accessible color. So, when we worked on the website, I decided to use color in an accessible way. When I initially designed the website I approached with the idea of using the color with contrasting colors.
I used it on the buttons with dark text – #262626 which is 7.46:1 color contrast ratio.
I used it in contrast with navy blue color #0A0D42 which is 9.01:1 color contrast ratio.
However, I did not realize that the contrast on graphical objects like icons, graph lines, checks, and highlights all need to have accessible color contrast.
PROBLEM 2: FOCUS INDICATORS: The other contrast issues came in focus indicators. This a new guideline which suggests that
The best approach is to define custom focus indicators, so you can ensure they have sufficient contrast relative to their background. Custom focus indicators must have a minimum of 3:1 contrast (as required by SC 1.4.11 Non-text Contrast).
Using outline styles is the best approach, because they don’t affect the layout, they’re generally not used for anything else so there’s little chance of conflict with other styles, and they continue to be visible in high contrast / forced-color modes.
You could apply a global style to all focusable elements:
:focus { outline: 2px solid #06f; outline-offset: 1px; }
However in practice you may want to target elements more specifically, for example, to modify the appearance of the focus indicator for different kinds of interactive content. As long as all focusable elements have a clearly visible focus indicator, it’s fine for them to have design variation:
/* focus styles for links */
a:focus { … } /* focus styles for form controls */ input:focus, textarea:focus, select:focus { … } /* focus styles for custom widgets */ \[tabindex]:focus { … }
Note: The use of outline-offset creates a small amount of white-space between the element and its outline. This avoids the possibility of the outline being hard to see when the element border or background is a similar color.
Avoid designing focus indicators that look the same as hover styles. This practice is sometimes referred to as “doubling-up”, and it’s an easy remediation for content that has no focus styles, making use of existing :hover styles simply by adding :focus selectors.
However we do not recommend that approach, because it may be confusing for users who combine mouse and keyboard interaction – if an element is already focused, then it won’t have any visible hover indication. The same applies to doubling-up focus styles with other highlighting styles (e.g., highlighting the current page in a drop-down menu), since this makes it impossible to visually identify an element which is both highlighted and focused.
Resources: