Christian Heilmann

Fixing the accessibility of Inspection overlays

Tuesday, May 17th, 2022 at 3:56 pm

The Inspect tool is a great way to get information about different page elements before selecting then. Once it is enabled, it shows an information overlay as you move from element to element.

Recording of the inspect tool in action

The main problem with the tool is that sometimes it is tough to get the information about the right element, as they are too close together and the information overlay shows the next element once the mouse moved a bit.

Whilst this can be annoying for any user, it becomes unusable for those who need to zoom the interface. In zoom mode, you magnify part of the screen and the magnification window moves with the mouse cursor. As the mouse cursor moves, the information overlay disappears, so you end up in a frustrating endless loop.

We got a report of this as an accessibility issue in Microsoft Edge and fixed it. From Edge 102 onwards, you can now press Ctrl+Alt when you have an information overlay active to stop it from disappearing. This makes this tool also usable to screen magnification users as shown in this screencast. It starts with the current interaction and then shows what happens when you press Ctrl+Alt and move the mouse around.

Information overlay in magnification mode

This also makes it easier for all users to get the information of Elements close to another. As an extra, you can also press Ctrl when you move the mouse around to only highlight the different elements and suppress the information overlay. This cuts down on a lot of noise.

Pressing Ctrl while moving the inspect tool around doesn't show any information overlays

This change shows that by fixing an issue for users of assistive technology, you can make it a better experience for everybody.

The problem has also been filed as a bug on the Chromium project .

Share on Mastodon (needs instance)

Share on BlueSky

Newsletter

Check out the Dev Digest Newsletter I write every week for WeAreDevelopers. Latest issues:

Word is Doomed, Flawed LLM benchmarks, hard sorting and CSS mistakes Spot LLM benchmark flaws, learn why sorting is hard, how to run Doom in Word and how to say "no" like a manager.
30 years of JS, Browser AI, how attackers use GenAI, whistling code Learn how to use AI in your browser and not on the cloud, why AI makes different mistakes than humans and go and whistle up some code!
197: Dunning-Kruger steroids, state of cloud security, puppies>beer
196: AI killed devops, what now? LLM Political bias & AI security Learn how AI killed DevOps, create long tasks in JS, why 1 in 5 security breaches are AI generated code & play "The Scope Creep"
195: End of likes, JS Zoo and Tim Berners-Lee doesn't see AI vs Web Meta kills like buttons, Tim-Berners-Lee thinks AI won't kill the web, GitHub is ending toasts and the worst selling Microsoft product.

My other work: