Reviewing Web Accessibility Widget
About the Equalweb Accessibility Widget
The Equalweb accessibility widget is a web-based interface designed to help users adjust how content is presented on a website. It offers features such as text resizing, color and contrast adjustments, keyboard navigation support, and screen reader optimization. The widget is used by organizations to improve digital accessibility and ensure that their websites are usable for a wider range of visitors, particularly those with visual, motor, or cognitive challenges.
Equalweb is widely implemented across public and private sector sites and is part of many companies’ efforts to meet accessibility guidelines and offer a more inclusive user experience.
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.
Projected Impact: +30% feature success rate, faster interaction, fewer support issues, increased NPS,.
Project Goal
This case study was initiated to improve the usability and clarity of the Equalweb accessibility widget for its primary users, particularly those with vision impairments and elderly visitors. A more intuitive interface helps users interact confidently with websites that have the widget enabled. Those improvements supports 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.
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: Redesign these controls to use larger radio buttons or segmented buttons with generous spacing. Ensure all touch areas are large enough for comfortable selection and navigation.
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: Introduce stronger group titles using high-contrast text and larger font sizes. Add clear vertical spacing between groups and use visible divider lines instead of relying on color tint alone.
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: Recommendation: Standardize feedback for all actions. Include a short, accessible message ("Setting applied") and visual reinforcement such as a checkmark or color shift. Feedback should be consistent and non-intrusive.
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.
3. Misleading Representation of Hide Function
he crossed-eye icon used to hide the accessibility button resembles the widget's close ("X") 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: Move the "Hide Accessibility Button" function to the bottom of the widget, where users already expect lower-priority actions like the Accessibility Statement or Feedback. Replace the icon with a clearly labeled button that explains its purpose.
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: "Adjust visual, navigation, or content settings for easier browsing. "This message should dismiss itself after a few seconds or disappear when a user interacts with the widget.
Projected 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
+20 to 30% increase in successful use of key features (like contrast change, text resizing, or navigation adjustment) within the first minute of opening the widget (Usage can be measured via behavioral analytics and session replays)
-
Faster time to first action
30% reduction in the time it takes for a user to apply their first setting (Can be measured through user testing or on-site tracking tools)
-
Improved satisfaction scores
4.5 out of 5 average satisfaction in optional post-interaction surveys or feedback pop-ups (Qualitative and quantitative data can be collected directly from widget users)
-
More positive public reviews and testimonials
Increased frequency of organically shared positive comments about the widget experience on websites, social media, or accessibility-related forums (Can be collected and curated for marketing purposes)
For Business Clients (Website Owners Using Equalweb):
-
Improved brand perception through better accessibility
Increased customer feedback highlighting inclusivity or improved ease of use (Can be collected via NPS, CSAT, or client-side surveys)
-
Higher RFP win rate and competitive ranking
Stronger performance in vendor comparisons for usability, visual integration, and end-user clarity (Can be collected from Equalweb sales and partnership teams reports)
-
Reduced support inquiries related to accessibility settings
Up to 20% fewer client-reported issues tied to confusion, missed features, or setup complaints (Measured through client support and onboarding ticket systems)
-
More reusable marketing content
New positive feedback from real users (end users of client websites) that can be turned into public-facing testimonials or case studies (Used by the Equalweb marketing team to demonstrate real-world impact)
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 provide better tools for effective 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.