Landmarks
Bookmarklet
A bookmarklet is a small piece of (JavaScript) code that is run in the context of the currently visible web page. It comes as a bookmark that you typically add to your browser bookmarks for being able to run it repeatedly. In order to install this bookmarklet, please drag the link above to your browser bookmarks and call it from there. You can also click on the link to run the bookmarklet on this very page.
Purpose & Notes
The purpose of this bookmarklet is to identify the presence of landmark regions in a document.
The results are displayed visually on the page:
- A green bubble (✔) indicates an proper landmark region.
- A red bubble (✖) indicates a landmark region which is missing an essential features, usually a label.
- An orange bubble (💀) indicates a landmark region which is missing a detail. Usually its label isn't unique among the landmarks with the same role.
Click on any of the info bubbles to log the associated element to the DevTools console. In the DevTools log you will also see a table of landmarks with the following details per landmark:
- The DOM node that generated the landmark
- The landmark's role (implicit roles in parentheses)
- The custom role description (if any;
aria-roledescriptionattribute) - The landmark's label / accessible name
- The landmark's context region (if any)
- A textual representation of the landmark status (see above)
Test bed
This is a first named section (using aria-label) which should become a region landmark.
Second named section
This is a first named section (using aria-labelledby) which should become a region
landmark.
This is a region landmark without a label.
This is a region landmark which is also labelled "Second named section".