Aria-label is used to provide accessible name for the interactive elements, when aria-label or aria-labelledby is used extensively on a web page the aria-label bookmarklet will come in handy to check if the accessible name provided for the interactive elements is descriptive and sufficient.
ARIA-Label Bookmarklet for Accessibility Testing
- If an element has an aria-label, it should get a yellow background and the label displayed in red.
- If an element has an aria-labelledby attribute, it should have a pink background and the object it is pointing to will be displayed in green.
ARIA-Label Bookmarklet Code
See the Pen ARIA-Label Bookmarklet by HolisticA11Y by HolisticA11Y (@HolisticA11YHub) on CodePen.
We hope these accessibility bookmarklets come in handy during your next accessibility audit.
References: ARIA-Label Bookmarklet