Ensuring the Owala website adheres to accessibility standards
Project Description
As a part of CapTech Ventures' accessibility training program, I audited the Owala Website to showcase my accessibility expertise.
Deliverables
Accessiblity As
Remediation suggestions
User interface revisions
Role
Accessibility Subject Matter Expert
Project Background
Why accessibility? And why Owala?
Oftentimes, consumer-facing sites lack designs that take accessibility into mind.
Ensuring that anyone and everyone can access your website not only benefits the customer, it also drives sales for the business and enforces trust amongst their clients.
Issues overview
13 fixable best-practice issues were identified that would enhance inclusivity once resolved.
Overall, the experience met WCAG 2.2 AA standards with critical issues primarily related to color contrast, focus visibility and touch target consistency.
Issue Analysis #1
Images of Text and contrast issues
The site heavily relies on images over HTML links and headings for CTAs, resulting in text embedding in images that often suffer poor color contrast issues and are illegible.
Issue Analysis #2
Unclear Navigation Control
Through keyboard testing, the tab key was picking up hidden menu items. Using Axe dev tools confirmed all pages were following an incorrect navigation hierarchy, starting from the hidden menu items first.
Color contrast remediations
Targeted elements in the ‘product features’ section has a low contrast ratio. The refined components adhere to the ratio of 4.5:1
Auto- Scroll
I implemented a pause and play button on the product gallery (which has an auto-scroll display, with no option for users to pause/ skip the section)
Type style and hierarchy enhancements
I modified the text hierarchy to ensure consistency in type size and corrected the body text's font style to default to Owala’s ‘Gilroy’ instead of ‘Helvetica’.
Reducing touch points and displaying key product details
The ‘Frequently Bought Together’ section hid product names and prices behind the ‘Add to Cart’ button.
I refined the experience by separating the product details from the CTA, making it easier for users to view, adjust, and add items to their cart.
Other enhancements
Ensuring all touch targets are the same as or larger than 24 x 24 px
Body text has a minimum line height of 1.5 times the font size
Decreased the length of comments in the ‘customer reviews’ section to maintain maximum length to 80 characters.
