« Back to home

Page structure bookmarklets explained

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.

On this page

• Bookmarklet 1. Highlight headings
• Bookmarklet 2. Highlight image alternatives
• Bookmarklet 3. Highlight lists
• Bookmarklet 4. Highlight landmarks
• Bookmarklet 5. Highlight page language

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.

« Back to home