« Back to home

Form bookmarklets explained

These bookmarklets help you inspect common accessibility features in forms and form controls. Use them to review names, buttons, groups, required fields, validation states and autocomplete values.

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

On this page

• Bookmarklet 16. Highlight form field names
• Bookmarklet 17. Highlight buttons
• Bookmarklet 18. Highlight fieldsets
• Bookmarklet 19. Highlight required fields
• Bookmarklet 20. Highlight aria-invalid
• Bookmarklet 21. Highlight autocomplete

Bookmarklet 16. Highlight form field names

Highlights form fields and identifies how their accessible names have been provided. It distinguishes between names provided by:

• associated label elements
• implicit labels
• aria-labelledby
• aria-label
• title
• placeholder

It also flags form fields that do not have an accessible name. This makes it easy to identify both missing names and names that rely on less reliable techniques.

Use this bookmarklet when you want to:

• inspect how form fields have been labelled
• identify fields with no accessible name
• review accessible names created using HTML and ARIA
• find fields that rely on placeholder or title instead of a proper label

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 form field names bookmarklet.
4. Scroll through the page to review the highlighted form fields.
5. Press Esc to remove the overlay.

When reviewing the page, check for:

• Associated labels, whether explicit or implicit.
• Names provided using aria-labelledby or aria-label, where appropriate.
• Fields that rely on title or placeholder, which are generally less reliable sources of accessible names.
• Fields with no accessible name, which are likely to be inaccessible to screen reader users.

Bookmarklet 17. Highlight buttons

Highlights all buttons and identifies how their accessible names have been provided. It distinguishes between names provided by:

• visible text
• aria-labelledby
• aria-label
• the value attribute
• the title attribute
• the default labels for submit and reset buttons

It also flags buttons that do not have an accessible name.

Use this bookmarklet when you want to:

• inspect how buttons have been labelled
• identify buttons with no accessible name
• review accessible names created using HTML and ARIA
• check that buttons expose a meaningful name to 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 buttons bookmarklet.
4. Scroll through the page to review the highlighted buttons.
5. Press Esc to remove the overlay.

When reviewing the page, check for:

• Buttons with meaningful accessible names, regardless of how those names have been provided.
• Buttons that rely on aria-label or aria-labelledby, ensuring the name accurately describes the button's purpose.
• Buttons that use the title attribute as their accessible name, which may not be the most robust approach.
• Buttons with no accessible name, which may be inaccessible to people using assistive technologies.

Bookmarklet 18. Highlight fieldsets

Highlights fieldset, legend and role="radiogroup" elements. It identifies fieldsets and their legends, highlights radio groups, and flags fieldset elements that do not have a legend. This makes it easy to inspect how related form controls have been grouped and labelled.

Use this bookmarklet when you want to:

• identify groups of related form controls
• check that fieldsets have meaningful legends
• inspect radio groups
• find fieldsets that are missing a legend

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 fieldsets bookmarklet.
4. Scroll through the page to review the highlighted fieldsets, legends and radio groups.
5. Press Esc to remove the overlay.

When reviewing the page, check for:

• Fieldsets with meaningful legends: that describe the group of controls.
• Fieldsets without legends: where users may not understand the purpose of the group.
• Related form controls: such as radio buttons or checkboxes, that have been grouped appropriately.
• Radio groups: that have a clear group label.

Bookmarklet 19. Highlight required fields

Highlights form fields that have been marked as required. It distinguishes between:

• native HTML required
• aria-required="true"
• controls that use both required and aria-required

This makes it easy to see how required fields have been identified and to spot unnecessary duplication.

Use this bookmarklet when you want to:

• identify required form fields
• check how required fields have been marked up
• distinguish between native HTML and ARIA techniques
• find fields that use both required and aria-required

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 required fields bookmarklet.
4. Scroll through the page to review the highlighted form fields.
5. Press Esc to remove the overlay.

When reviewing the page, check for:

• Fields that use the native required attribute: which is the preferred approach for standard HTML form controls.
• Fields that use aria-required="true": ensuring ARIA has been used appropriately.
• Fields that use both required and aria-required: which is usually unnecessary duplication.
• Required fields: that are clearly identified to all users, both visually and programmatically.

Bookmarklet 20. Highlight aria-invalid

Highlights elements that use the aria-invalid attribute. All recognised values are highlighted in green, making it easy to see where aria-invalid has been used. Elements where aria-invalid contains an unrecognised value are highlighted in red.

The recognised values are:

• true
• false
• grammar
• spelling

Use this bookmarklet when you want to:

• identify fields that use aria-invalid
• inspect how validation states have been marked up
• check that recognised aria-invalid values have been used
• find invalid aria-invalid values

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-invalid bookmarklet.
4. Scroll through the page to review the highlighted elements.
5. Press Esc to remove the overlay.

When reviewing the page, check for:

• Fields with aria-invalid="true", indicating that the current value has failed validation.
• Fields using grammar or spelling, where those more specific states are appropriate.
• Fields with aria-invalid="false", ensuring they have been used intentionally.
• Invalid aria-invalid values, which are not recognised by the ARIA specification and are highlighted in red.

Bookmarklet 21. Highlight autocomplete

Highlights form fields that use the autocomplete attribute. It distinguishes between:

• valid autocomplete values
• generic values such as on and off
• invalid or unrecognised values

This makes it easy to review how autocomplete has been used across a form.

Use this bookmarklet when you want to:

• identify fields that use the autocomplete attribute
• check that recognised autocomplete values have been used
• find fields that rely on generic on or off values
• identify invalid autocomplete values

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 autocomplete bookmarklet.
4. Scroll through the page to review the highlighted form fields.
5. Press Esc to remove the overlay.

When reviewing the page, check for:

• Recognised autocomplete values: such as given-name, family-name, email or postal-code, where appropriate.
• Generic values (on or off), which provide less information than the recognised autocomplete tokens.
• Invalid autocomplete values: which browsers may ignore.
• Consistent use of autocomplete: particularly across forms that collect personal information.

« Back to home