« Back to home

Names and descriptions bookmarklets explained

These bookmarklets help you inspect how accessible names and descriptions have been provided. Use them to review ARIA naming techniques, referenced content and potential naming issues.

This page explains the bookmarklets available on the Intopia's accessibility testing bookmarklets page.

On this page

• Bookmarklet 11. Highlight aria-label
• Bookmarklet 12. Highlight aria-labelledby
• Bookmarklet 13. Highlight aria-describedby
• Bookmarklet 14. Highlight name mismatches
• Bookmarklet 15. Highlight name-prohibited roles

Bookmarklet 11. Highlight aria-label

Highlights all elements that use the aria-label attribute. Where present, the bookmarklet displays the value of the aria-label so you can quickly review the accessible name without inspecting the HTML.

It also flags empty aria-label values and identifies cases where aria-label has been applied to roles that prohibit author-provided accessible names.

Use this bookmarklet when you want to:

• identify where aria-label has been used on a page
• review the accessible names provided by aria-label
• find empty aria-label attributes
• check that aria-label has been applied appropriately

How to use it

1. Drag a bookmarklet to your browser's Bookmarks Bar.
2. Open the page you want to inspect.
3. Click the Highlight aria-label bookmarklet.
4. Scroll through the page to review the highlighted elements.
5. Press Esc to remove the overlay.

When reviewing the page, check for:

• aria-label values that clearly describe the purpose of the element.
• Empty aria-label attributes, which don't provide an accessible name.
• Elements where aria-label duplicates visible text, as this may indicate unnecessary markup.
• aria-label used on roles that prohibit author-provided names, which may be ignored by assistive technologies.

Bookmarklet 12. Highlight aria-labelledby

Highlights all elements that use the aria-labelledby attribute, together with the elements they reference. This makes it easier to see where an accessible name comes from and how the relationship has been created.

The bookmarklet identifies:

• referenced IDs
• referenced elements that are hidden
• elements that reference themselves
• referenced IDs that do not exist

Use this bookmarklet when you want to:

• identify where aria-labelledby has been used
• see which content provides an element's accessible name
• check that referenced IDs exist
• review accessible name relationships across a page

How to use it

1. Drag a bookmarklet to your browser's Bookmarks Bar.
2. Open the page you want to inspect.
3. Click the Highlight aria-labelledby bookmarklet.
4. Scroll through the page to review each highlighted element and its referenced targets.
5. Press Esc to remove the overlay.

When reviewing the page, check for:

• Referenced elements that exist and contain meaningful text.
• Labels that clearly describe the element's purpose.
• Multiple referenced IDs that are combined in a logical order.
• Missing IDs, where aria-labelledby points to an element that cannot be found.
• Hidden referenced elements, which may not provide the intended accessible name.
• Self-referencing elements, where an element includes its own ID in the aria-labelledby attribute.

Bookmarklet 13. Highlight aria-describedby

Highlights all elements that use the aria-describedby attribute, together with the elements they reference. This makes it easier to see where additional descriptions come from and how they are associated with an element.

The bookmarklet identifies:

• referenced IDs
• referenced elements that are hidden
• referenced IDs that do not exist

Use this bookmarklet when you want to:

• identify where aria-describedby has been used
• inspect descriptions associated with form controls and other elements
• check that referenced IDs exist
• review description relationships across a page

How to use it

1. Drag a bookmarklet to your browser's Bookmarks Bar.
2. Open the page you want to inspect.
3. Click the Highlight aria-describedby bookmarklet.
4. Scroll through the page to review each highlighted element and its referenced descriptions.
5. Press Esc to remove the overlay.

When reviewing the page, check for:

• Referenced elements that exist and contain useful descriptive information.
• Descriptions that provide additional context, such as instructions, hints or error messages.
• Multiple referenced IDs that are combined in a logical order.
• Missing IDs, where aria-describedby points to an element that cannot be found.
• Hidden referenced elements, which may not provide the intended description.

Bookmarklet 14. Highlight name mismatches

Highlights links and buttons where the visible label and accessible name are compared. The bookmarklet identifies whether they:

• Match: where the accessible name matches the visible label.
• Partially match: where the accessible name begins with the visible label but includes additional text.
• Don't match: where the accessible name differs from the visible label.

This makes it easy to identify controls that may be difficult to operate using speech recognition software.

Use this bookmarklet when you want to:

• compare visible labels with accessible names
• identify potential Label in Name issues
• check links and buttons that use ARIA or other accessible naming techniques
• review how controls will be announced by assistive technologies

How to use it

1. Drag a bookmarklet to your browser's Bookmarks Bar.
2. Open the page you want to inspect.
3. Click the Highlight name mismatches bookmarklet.
4. Scroll through the page to review the highlighted links and buttons.
5. Press Esc to remove the overlay.

When reviewing the page, check for:

• Matching names, where the accessible name matches the visible label.
• Partial matches, where the accessible name begins with the visible label but includes additional descriptive text.
• Mismatched names, where the visible label and accessible name differ.
• Controls that may be difficult to activate using speech recognition, because users are likely to speak the visible label rather than the accessible name.

Bookmarklet 15. Highlight name-prohibited roles

Highlights elements that have been given an author-provided accessible name using aria-label or aria-labelledby, even though their role does not allow one.

Each affected element is labelled with the message:

NAME PROHIBITED: [role]

The bookmarklet checks roles that cannot be named in ARIA 1.2, together with additional name-prohibited roles identified in the ARIA 1.3 draft.

Use this bookmarklet when you want to:

• find aria-label or aria-labelledby used on roles that cannot have an author-provided name
• identify ARIA attributes that may be ignored by browsers and assistive technologies
• review whether accessible naming attributes have been applied appropriately
• find unnecessary or invalid ARIA markup

How to use it

1. Drag a bookmarklet to your browser's Bookmarks Bar.
2. Open the page you want to inspect.
3. Click the Highlight name-prohibited roles bookmarklet.
4. Scroll through the page to review any highlighted elements.
5. Check the displayed role and inspect how the accessible name has been provided.
6. Press Esc to remove the overlay.

When reviewing the page, check for:

• aria-label or aria-labelledby applied to a name-prohibited role.
• Native HTML elements with implicit name-prohibited roles, such as caption, code, p, strong, sub and sup.
• Explicit ARIA roles that cannot be named, such as role="caption" or role="generic".
• ARIA attributes that should be removed, rather than replaced with another accessible naming technique.
• Elements that may need a different role or HTML element if an accessible name is genuinely required.

« Back to home