« Back to home

Table bookmarklets explained

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.

On this page

• Bookmarklet 6. Highlight captions and headers
• Bookmarklet 7. Highlight table IDs and headers
• Bookmarklet 8. Highlight ARIA table roles

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.

« Back to home