Resources

These bookmarklets help you inspect the overall structure of a page, including headings, images, lists, landmarks and language. Use them to quickly identify how key page content has been marked up.

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

Bookmarklet 1. Highlight headings

Highlights all HTML headings (h1 to h6) using different colours so you can quickly see the page's heading structure. Each heading is labelled with its level and text. The bookmarklet also flags empty headings and pages with more than one h1 element.

Use this bookmarklet when you want to:

• understand the heading structure of a page
• check that headings are being used to organise content
• identify empty headings
• find pages with multiple h1 elements

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

When reviewing the page, check for:

• A single h1 that describes the main purpose of the page.
• A logical heading hierarchy, where heading levels follow the structure of the content.
• Skipped heading levels, such as jumping from an h2 directly to an h4, which can make the page structure harder to understand.
• Empty headings, which provide no useful information to users.
• Multiple h1 elements, which should be reviewed to ensure the page structure is clear and intentional.

Bookmarklet 2. Highlight image alternatives

Highlights all images on a page and identifies how their alternative text has been provided. Each image is labelled with one of three states:

• Alternative text: where the image has descriptive text.
• Empty alternative text: (alt=""), which is typically used for decorative images.
• Missing alternative text: where no alt attribute has been provided.

Where alternative text is present, the bookmarklet displays its value, making it easy to review the text without inspecting the HTML.

Use this bookmarklet when you want to:

• check that images have appropriate alternative text
• identify decorative images
• find images that are missing alternative text
• review how images have been marked up 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 image alternatives bookmarklet.
4. Scroll through the page to review each highlighted image.
5. Press Esc to remove the overlay.

When reviewing the page, check for:

• Informative images that have meaningful alternative text describing their purpose or content.
• Decorative images that use empty alternative text (alt="") so they can be ignored by screen readers.
• Images with missing alternative text, which may be inaccessible to people who cannot see the image.
• Alternative text that matches the purpose of the image, rather than simply describing its appearance.

Bookmarklet 3. Highlight lists

Highlights lists on a page, including both native HTML list elements and ARIA list roles. Different colours are used to distinguish each type, making it easy to see how lists have been created. The bookmarklet highlights:

• list containers: ul, ol and dl.
• list items: li, dt and dd), as well as ARIA list and listitem roles.

Use this bookmarklet when you want to:

• identify lists on a page
• check that groups of related items have been marked up as lists
• distinguish between native HTML lists and ARIA lists
• find content that may look like a list but isn't marked up as one

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

When reviewing the page, check for:

• Related items that have been grouped into lists.
• Navigation menus and collections that have been marked up appropriately.
• Lists that use native HTML elements (ul, ol and dl) wherever possible.
• Content that looks like a list but has been created using line breaks, paragraphs or other elements instead of proper list markup.
• Lists that have been recreated using ARIA roles where native HTML list elements would have been more appropriate.

Bookmarklet 4. Highlight landmarks

Highlights all page landmarks using distinct colours for each landmark role. Where a landmark has an accessible name, the name is also displayed, making it easy to identify and distinguish between landmarks of the same type.

Use this bookmarklet when you want to:

• identify the landmark structure of a page
• check that major regions have been marked up as landmarks
• verify that multiple landmarks of the same type have unique accessible names
• understand how assistive technologies divide a page into regions

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

When reviewing the page, check for:

• The expected landmark regions<, such as banner, navigation, main, complementary, contentinfo, search, region and form.
• A single main landmark, representing the primary content of the page.
• Accessible names on landmarks where there is more than one of the same type (for example, multiple navigation regions).
• Logical organisation, where landmarks divide the page into meaningful sections without unnecessary duplication.

Bookmarklet 5. Highlight page language

Highlights the language of the page by checking both the document language and any inline language changes.

It validates the language codes used in lang attributes and identifies:

• valid language codes
• empty lang attributes
• unrecognised language codes
• invalid language codes
• common mistakes, with suggested corrections where possible
• missing document language

Inline lang attributes are also highlighted so you can see where the language changes within a page.

Use this bookmarklet when you want to:

• check that a page has a document language
• validate lang attribute values
• identify missing or invalid language codes
• inspect where language changes occur within a page
• review multilingual content

How to use it

1. Open the page you want to inspect.
2. Click the "Highlight page language" bookmarklet.
3. Review the document language banner at the top of the page.
4. Scroll through the page to inspect any highlighted inline language changes.

When reviewing the page, check for:

• A valid document language, declared on the <html> element.
• Missing document language, which should be added.
• Invalid or unrecognised language codes, which should be corrected.
• Inline language changes, ensuring words or passages in another language have an appropriate lang attribute.
• Common typing mistakes, where the bookmarklet suggests the intended language code.

These bookmarklets help you inspect the structure and accessibility of HTML and ARIA tables. Use them to review captions, headers, cell relationships and table roles.

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

Bookmarklet 6. Highlight captions and headers

This helps you inspect the structure of HTML tables and review how their header cells have been marked up. Highlights important accessibility features within HTML tables. It identifies:

• table elements
• table captions
• header cells
• header cells with a scope attribute
• header cells without a scope attribute

Use this bookmarklet when you want to:

• identify table captions
• identify row and column header cells
• check whether header cells use the scope attribute
• understand the basic structure of a table
• find tables that may need further accessibility testing

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 captions and headers bookmarklet.
4. Scroll through the page to review the tables.
5. Press n to cycle through table, caption and th elements one at a time.
6. Press Esc to remove the overlay.

By default, tables, captions and header cells are all displayed. Scope information (key 4) is hidden by default — press 4 to reveal it. The keyboard shortcuts let you focus on one part of the table at a time.

When reviewing a table, check for:

• A useful caption that identifies the purpose of the table.
• Header cells that clearly describe the rows or columns they relate to.
• Appropriate use of scope, such as scope="col" for column headers and scope="row" for row headers.
• Cells that look like headers but use ordinary data cells (td) instead of th.
• Complex header relationships that may not be adequately described using scope alone.

Bookmarklet 7. Highlight table IDs and headers

Highlights the relationships between data cells and their associated header cells within complex HTML tables.

When you navigate to a table cell, a floating badge displays the cell's content together with its id or headers attribute where present. When a data cell references one or more header cells using the headers attribute, those header cells are highlighted in green, making the relationships immediately visible.

It also identifies empty table cells.

Use this bookmarklet when you want to:

• understand how complex tables associate data cells with header cells
• verify id and headers relationships
• inspect the structure of complex HTML tables
• identify empty table cells
• teach or learn how accessible table relationships work

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 table IDs and headers bookmarklet.
4. Press Tab or n to move through the table cells one at a time.
5. Review the floating badge for each cell, and observe which header cells are highlighted as you navigate.
6. Press Esc to remove the overlay.

When reviewing a table, check for:

• Data cells that reference the correct header cells using the headers attribute.
• Header cells that have unique id attributes.
• Highlighted header cells that provide the correct row and column context for each data cell.
• Complex tables where multiple header cells combine to describe a single data cell.
• Empty table cells, which may indicate missing information or unintended markup.

Bookmarklet 8. Highlight ARIA table roles

Highlights the ARIA roles used to create tables and grids. It identifies the roles that make up an ARIA table or grid, helping you understand how a custom widget has been structured.

It also displays the current value of the aria-sort attribute where it has been applied to sortable column headers.

Use this bookmarklet when you want to:

• inspect tables built using ARIA roles instead of native HTML table elements
• understand the structure of a custom table or grid
• check that the expected ARIA roles have been applied
• review the current aria-sort values on sortable column headers

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 table roles bookmarklet.
4. Scroll through the page to review the ARIA-based tables.
5. Press n to cycle through table / grid / treegrid, rowgroup, row, columnheader, rowheader and cell / gridcell roles one at a time.
6. Press Esc to remove the overlay.

Note: If you sort a table while the bookmarklet is active, run the bookmarklet again to refresh the displayed aria-sort values.

When reviewing an ARIA table or grid, check for:

• A complete role hierarchy, with all required parent and child roles present.
• Rows, headers and cells that appear in the expected structure.
• Sortable column headers that correctly update their aria-sort values.
• Consistent use of ARIA roles throughout the table or grid.