This follows on from my recent article: Using the browser console for accessibility testing - Part 2.
I converted another of those console scripts into a standalone bookmarklet.
Usage
Drag the following bookmarklet into your address bar:
Highlight visible label vs accessible name mismatch
Click the bookmarklet on any page to highlight <a>, <button>, and elements with role="button" or role="link" to determine if their visible names match their accessible names.
You can test it on this sample page: Testing accessibility console scripts
What's it about?
People using speech input software often activate buttons and links by speaking the visible text shown on screen.
If the accessible name does not contain that visible text, speech commands may fail or produce unexpected results.
This script helps identify cases where the visible label and accessible name do not match, making potential issues easy to spot without inspecting each element individually.
Green (MATCH)
The visible text and accessible name are identical. No issue.
Blue (MODIFIED)
The accessible name starts with the visible text and adds extra context. This is valid and common. For example, a visible label of "Read more" may have an accessible name of "Read more about accessibility testing".
Review these cases to confirm that any additional context is useful and relevant.
Red (MISMATCH)
The accessible name has no relationship to the visible text. This may indicate a failure of WCAG 2.5.3 Label in Name and should be investigated.