I've previously discussed how accessibility widgets fail to deliver full web accessibility and usability. When I mention accessibility widgets, I refer to small programs embedded in a website's code. These claim to make a page accessible by allowing users to adjust visual settings or enable a proprietary screen reader.
While these widgets are often a nuisance, they can actively hinder accessibility, especially on mobile websites, which are becoming increasingly common. In this post, I'll outline the specific challenges accessibility widgets present when navigating mobile websites with a screen reader.
One of the most frustrating issues with mobile accessibility widgets is their activation button's oversized touch target. A touch target is the area on the touchscreen that triggers a screen reader selection.
On many mobile websites, the widget menu's button has an unnecessarily large touch target. For instance, if the widget button is half an inch wide, its touch target might extend to an inch or more, creating a problem for direct touch navigation.
If the widget button is placed in the bottom right corner, touching anywhere near that area will trigger the widget, making content underneath it inaccessible unless you scroll. This experience significantly aggravates me on smartphones, where limited screen space makes accidental touches more frequent. The constant need to refocus the screen reader makes browsing inefficient and frustrating.
Another issue with accessibility widgets on mobile devices is the difficulty in dismissing them using a screen reader. This problem grows as more websites automatically launch the widget when a screen reader is detected.
Once the widget is open, finding a "Dismiss" or "Close" button is often impossible. In some cases, reloading the page shuts down the widget, but for sites that relaunch it automatically, this doesn't work. The only option is to enable one of the widget's settings, hoping it doesn't negatively affect the site's overall accessibility.
This issue is a bit stranger. On some mobile sites with accessibility widgets, the screen reader stutters when focusing on certain items. For example, instead of saying "Cart, Button," the screen reader might announce "CaCaCaCaCart, Button."
The focus rapidly jumps between the button and another element, causing multiple refocuses in seconds. At first, I didn't know what caused this, but the stuttering stopped after accidentally enabling the widget's screen reader mode.
I tested this on other sites and saw the same results. Unfortunately, while enabling the widget stops the stuttering, it introduces other accessibility problems. Simply opening and closing the widget doesn't fix the issue; I had to select one of the widget's settings for the stuttering to stop.
Accessibility widgets are just as problematic on mobile as they are on desktop. Avoid widgets because they aren't a substitute for proper web accessibility built into the website's code.
As mobile devices dominate, bake accessibility into your design to ensure a smooth and accessible user experience for everyone. While widgets may seem like an easy fix, they often create more barriers than they remove. True accessibility comes from thoughtful coding and adherence to web accessibility standards, not quick widget solutions.
Are you interested in learning about solutions to help you deliver a more inclusive experience to your customers? Start on the path to accessibility by watching a demo and learning about UsableNet's accessibility solutions now!
Editor's Note: This is a guest post from our marketing contributor, Michael Taylor. It reflects his opinions and experiences. Read more about Michael and some other posts on his experience online here.