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 (from the extension’s toolbar button).

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 can be drawn around the landmarks as you navigate them, to make it clear where you are on the page. You can change the border style in the extension’s preferences/options page. The available border styles are:

You can change this setting as follows.

Remember to use the “Save” button to save any changes. Also, due to the varied way in which web pages can be styled, the border will sometimes not appear to fully surround the landmark element.

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.

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.

If a landmark label is present (via the aria-labelledby or aria-label attributes), they’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.

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 forms or regions, because doing so could add a lot of noise to landmark navigation. Therefore this extension also ignores them.

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…

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 development time.

Changes