Making sure our Hippo products are accessible by checking for WCAG complience.
.png)
I have reviewed Hippo homepage and insurance purchasing process for compliance with WCAG and ADA (Americans with Disabilities Act).
Most of the issues were minor, such as contrast problems in a few areas.
I identified a critical issue: keyboard navigation was impossible because the focus states, even the default ones, were disabled.
All identified issues were fixed.
What does accessibility mean?
Digital accessibility refers to the practice of designing and developing digital content, tools, and technologies so that they can be easily accessed and used by everyone, including people with disabilities.
Below you can see example how person with visual impariment can experience web page.
A11YProject
I used the A11Y Project checklist as my primary reference. It complies with WCAG at the AA level, which is also the standard required by the Americans with Disabilities Act.
All requirements from the checklist were evaluated by me and reported in visual form in figma (later on also on conflunce).
Lack of focus states (accessibility killer for people with visual impariments)
An essential part of the redesign was incorporating visual selectors for elements such as roof materials. This eliminates the need for users to click to expand a dropdown list, making the selection process more visual and easier.
Fortunately, fixing that was easy - we restored the default focus states. These will be customized to match Hippo's branding at a later stage."
Problem with alternative text (especially in Sales Flow)
"In the image below, you can see a list of insurance carriers from which you can purchase insurance. A person using a screen reader won't be able to tell the difference between the carrier names, as all images have the same alt text: 'carrier logo'."
To address this, I've suggested adding a text field below or next to the logo that displays the name of the carrier. In that case screen reader will tell the name correctly, what's more it will be helpful also in case when logo's are problematic to read, so also people with correct sight will benefit from that fix.
Here's how it looks like right now. Longer - in term's that we have 3 page's instead of one, but now everything is grouped and more visual, faster to access, easier to choose from.
.png)
Insights about accessibility from perspective of temporarirly disabled person.