top of page

Accessibility Widget, UX audit and proposal

About the Equalweb Accessibility Widget

The Equalweb accessibility widget helps visitors adjust text size, colors and contrast, navigation, and screen reader behavior. It is used across public and private sites to support WCAG compliance and a more inclusive experience.

feature-image-equalweb.png

TL;DR

Goal: Improve usability and clarity of the Equalweb accessibility widget, especially for vision-impaired and elderly users.

Role: UX/UI consultant and design lead - leading a full usability audit and competitive review.

Issues: Inconsistent visual aids, dense layouts, unclear feedback, hidden controls, no onboarding.

Recommendations: Standardize visuals, simplify layout, add clear feedback, clarify controls, guide first-time users.

Modeled Results: Higher feature success, faster interaction, fewer support issues, higher NPS.

Engagement and status: Consultant proposal, Scope, multi-site review and WCAG checks. Status: proposal stage at the time of documentation.

Project Goal

This case study focuses on improving clarity and first-time success for the Equalweb widget, especially for low-vision and older users. A clearer widget reduces confusion, speeds setup, and supports client satisfaction.
These improvements support broader business objectives. These include increasing client satisfaction, reducing user confusion, and strengthening Equalweb’s positioning in a growing and competitive market.

As new accessibility providers continue to emerge, refining the user experience helps Equalweb stay aligned with industry standards while standing out through clarity, reliability, and attention to detail.  A better-designed widget not only improves compliance but also becomes a marketing asset for the company and its clients.

Research Approach

This evaluation included:

Hands-on testing of the widget across live websites, including Bosch Home Canada and Nagich’s official site.

Comparative analysis of similar widgets (UserWay, AccessiBe, AudioEye) to assess layout, usability patterns, and pain points.

Accessibility audit using WCAG 2.1/2.2, covering contrast, keyboard use, screen reader support, and touch target safety.

End-to-end UX/UI evaluation, focused on first-time use, interaction clarity, and layout consistency across states.

Identified UX/UI Pain Points

To provide clearer insights, findings are divided into two categories: Layout and Visual Structure, and Functionality and Interaction Feedback.

Layout and Visual Structure Issues

1. Inconsistent Iconography

The widget currently uses a mixture of outline and filled icons without a consistent visual logic. Some are bold, others are thin-lined, and their styles shift between categories.

Impact: Inconsistent icons create cognitive friction, especially for low-vision users who rely on fast shape recognition rather than reading text.

Recommendation: Establish a consistent visual system. 
If outline and fill styles are used, they should serve a clear purpose such as inactive vs active states. 
All icons should follow the same sizing, stroke weight, and alignment rules.
Design decision: use one icon style with explicit active/inactive states, trade-off, a small redesign for faster scanning.

1-Solution.png

Before: mixed outline/filled icons. After: one style with active/inactive states.

2. Dense Layouts in Color and Font Settings

The Custom Color Adjustment and Font Sizing areas are dense and contain tightly packed buttons and small visual targets.

Impact: Users with vision or motor impairments may have difficulty selecting the correct option. Touch targets may not meet accessibility best practices, especially on mobile devices or for users with limited dexterity.

Recommendation: Use segmented controls or radio groups with 44×44 px targets, 8–12 px spacing, and visible focus. Keep labels short.

2-Solution.png

Before: small targets and tight spacing. After: 44×44 targets with clear spacing. Updated copy.

3. Weak Visual Separation Between Groups

 
Although the widget uses expandable groups for settings (Navigation, Color, Content), these groups look similar when expanded and do not provide strong visual markers to separate them clearly.

Impact: For users with limited contrast perception or tunnel vision, the screen may appear as a uniform list of controls, making it difficult to orient themselves or find specific settings.

Recommendation: Add group headers at least one size larger than body text, 24 px top and 16 px bottom spacing, and a 1 px divider at 3:1 contrast between groups.

3-Solution.png

Before: groups look similar when expanded. After: larger headers and dividers.

Functionality and Interaction Feedback Issues

1. Partial and Inconsistent Action Feedback

Only some controls currently provide feedback when used. While contrast mode may show a checkmark and screen reader mode triggers a notification, other actions are silent.

Impact: Users may be unsure whether their chosen setting has been applied. This is especially true if changes are subtle or the effect is delayed.

Recommendation: Standardize feedback for all actions. Show a brief message ‘Setting applied’ with a checkmark. Use a polite live region for screen readers.

2. Unclear Behavior of Logo and Accessibility Mode Toggle

Currently, clicking the widget's logo toggles a screen reader-related setting called "Accessibility Mode," but this is not visually clear. Logos are not typically used as functional elements.

Impact: Users might click the logo thinking it is decorative or branding-related, not realizing they are enabling or disabling a critical function.

Recommendation: Remove functionality from the logo entirely. Introduce a clearly labeled "Accessibility Mode" toggle switch at the top of the widget, making this behavior direct and understandable. Keep the branding on the footer and simplify the hero section.
Toggle label: ‘Accessibility mode’. Help text: ‘Optimizes navigation and screen reader behavior.’ SR description: ‘Accessibility mode, on, off.’

4-Solution.png

Before: logo acts as a hidden toggle. After: labeled ‘Accessibility mode’ switch.

3. Misleading Representation of Hide Function

The crossed-eye icon used to hide the accessibility button resembles the close icon and can be misunderstood. The metaphor is too abstract for such an important control.

Impact: Users may confuse the icon with either closing the widget or turning off accessibility features entirely.

Recommendation: Replace the icon with a clearly labeled button that explains its purpose - Snooze function.
Position with buttons that have related functions: Stop Accessibility widget, Snooze Function and Close Widget

4. No First-Time Onboarding Message

The widget launches without any introduction or indication of what it is or how to use it.

Impact: New users, especially those less familiar with digital tools or with cognitive challenges, may be unsure of what the widget does or how it helps.

Recommendation: Introduce a brief onboarding banner at the top of the widget that reads: “Make this page easier to read. Adjust text size, colors, and navigation in one place.” Oor alternative more marketing oriented message)

Auto-dismiss after 6 seconds or on interaction.

5-Solution.png

First-time banner example.

Measures:

  • Logo toggle fix → mis-activation rate down, time to find toggle down

  • Icon system unified → time to target down, wrong-tap rate down

  • Layout density reduced → task completion up, backtracks down

  • Standardized feedback → repeat actions within 5 seconds down

  • First-time banner → time to first action down, first-minute success up

Projected Results

Proposal stage, outcomes are modeled from the audit above and describe expected direction of change, not measured results.
If the UX and UI improvements recommended in this case study are implemented, the expected results would benefit both end users and business clients.

For End Users (Accessibility Tool Users):
 

  • Higher interaction success rate
    Users find the right controls faster and complete actions with fewer missteps.
     

  • Faster time to first action
    First-time visitors understand what to do sooner because labels and groups are clearer.
     

  • Improved satisfaction scores
    Interactions feel predictable and supportive, which lifts overall sentiment after use.
     

  • More positive public reviews and testimonials
    Clearer setup and feedback encourage more positive comments teams can reference.

For Business Clients (Website Owners Using Equalweb):

​

  • Improved brand perception through better accessibility
    The widget feels integrated and considerate, reinforcing a brand that values access.
     

  • Higher RFP win rate and competitive ranking
    Cleaner UX and visible accessibility patterns strengthen side-by-side evaluations.
     

  • Reduced support inquiries related to accessibility settings
    Clear labels and consistent feedback reduce confusion-driven questions to support.
     

  • More reusable marketing content
    Teams gain clearer quotes and screenshots they can use in sales and case materials.

Conclusion

The Equalweb accessibility widget is a thoughtfully designed and technically sound tool. It supports a wide range of user needs and offers critical functionality for browsing with confidence.

What it lacks are refinements that would make it feel friendlier, clearer, easier to use, and better for product marketing.

These include:

  • Unifying its icon system

  • Improving layout density in key areas

  • Providing consistent, accessible feedback

  • Clarifying the purpose of top-level controls

  • Supporting new users with a short, helpful onboarding message
     

Accessibility tools must do more than comply with standards. They must create a space where users feel in control of their experience. Small interaction and layout improvements can significantly increase the widget’s usability and help it fulfill its mission more fully.

bottom of page