This is a browser extension (for Firefox, Chrome and Opera) that enables navigation of WAI-ARIA landmarks, via the keyboard or a pop-up menu.

Landmarks broadly signpost the areas of a page (e.g. navigation, search, main content and so on). They can make navigation considerably easier for people who use the keyboard to navigate and those using assistive technologies such as screen-readers, because they make it much quicker to get an overview and to navigate to (and between) areas of interest.

The following sections explain how to install and use the extension.

If you’re a web author/developer, check out the information below on why landmarks rock, and how easy they are to put into your site—in fact, if you’re using HTML 5, you probably already have landmarks on your site, but there are some ways to make them even more helpful, as discussed below.

Table of Contents

Installation

If you need support, please check the known issues for Landmarks and, if necessary, file a new issue using the “New Issue” button on that page.

Via Shortcut Key

You can use shortcut keys to navigate between landmarks. By default, the keys are:

(On a Mac, use the Option key, which is equivalent to Alt.)

Landmarks will be focused, and a border shown according to your border preferences.

You can change the keyboard shortcuts in the following browsers.

Via Toolbar Pop-up

If landmarks are found on the page, the Landmarks button in the toolbar (which looks like an “L”) will be badged with the number of landmarks found.

  1. Activate the Landmarks toolbar button. A pop-up will appear. If landmarks are present on the page, they will be shown in a nested list, reflecting the structure of the landmarks on the page.

  2. Activate a button in the list to move to that landmark. The landmark will be focused, and a border shown according to your border preferences.

  3. To close the pop-up, press Escape, or click outside of the pop-up.

Border Preferences

A border will be drawn around the landmarks as you navigate them. The border contains a label that displays the landmark’s type and name (if one was provided by the author of the page). You can customise various aspects of this in the extension’s preferences/options page. The available settings are:

You can get to the extension’s settings as follows.

This Extension’s Support for Landmarks

The extension supports WAI-ARIA landmark roles, both as supplied via the role attribute and as implicit landmarks via HTML 5 elements. All landmark roles are supported, with some caveats, as per the relevant specifications, which are described below.

Caveats

  1. Both <header> (banner) and <footer> (contentinfo) elements are not considered landmarks unless they are the page-wide header/footer elements. (As per the HTML element role mappings.)

  2. form and region landmarks are intended to be labelled. Ideally, this should be done with a visual label and an aria-labelledby attribute (so all users can perceive the label). However, if a label is only provided by the (non-visual) aria-label attribute, this extension will recognise it.

    There is ambiguity in the WAI-ARIA specification as to whether they might still be counted as landmarks even if they are unlabelled. Most assistive technologies do not count unlabelled form or region landmarks, because doing so could add a lot of noise to landmark navigation. Therefore this extension also ignores them.

Labelling landmarks

If a landmark label is present (via the aria-labelledby or aria-label attributes), it’ll be shown in the pop-up. As per the accessible name calculation algorithm used by browsers, the aria-labelledby attribute takes precedence over aria-label.

If an aria-labelledby attribute references multiple elements, all of those elements’ text content will be joined to form the label for the landmark. However, it’s not recommended that you label landmark regions with more than one element (usually referring to a single HTML heading element is sufficient). Using more than one labelling element could be a sign that your landmark structure is too complicated. Referencing multiple labelling elements is more suited for labelling <input> elements with information from multiple sources.

Digital Publishing ARIA Landmarks

The following additional landmark roles defined in the Digital Publishing WAI-ARIA Module 1.0 are also supported.

Information for Web Authors, Designers and Developers

As described at start of this document, landmarks can really help various people get a quick overview of your site, and navigate it much more effectively. This can save them a lot of time, so please consider implementing landmarks on your site; here is some information to help you do so…

Please bear in mind the following when implementing landmarks…

Development

You can build and run the current code locally as follows.

  1. Clone the Landmarks repository on GitHub to your computer.

  2. Ensure you have all the required build tools with npm install (you will need Node.js).

  3. Run the build script to build one or all of the extensions:

    • npm run build:firefox
    • npm run build:chrome
    • npm run build:opera
    • npm run build:edge (Edge support is in development, but not fully ready yet.)
    • npm run build:all

    The built versions of the extension are placed in the build/<browser>/ directories and ZIP files for each will be created in the root of the checked-out repository.

  4. To load and use the extension locally in your browser…

Some further info on the test/build process:

Test Pages

The following pages are incorporated into the automated test suite, but you can also visit them in-browser to try out the extension’s UI.

Acknowledgements

This is a fork of the original landmarks extension written by davidtodd at IBM. Thanks to stevefaulkner for suggesting I work on this, and for feature suggestions (and again to davidtodd for supporting me doing so), and to The Paciello Group for donating a significant chunk of the initial development time.

Changes