Dynamic Skip Links

A small module that scans your page for landmarks and headings and builds a skip link list automatically — no manual maintenance needed.

Labelled elements

The header, main navigation, and search form above all have aria-label attributes. Their skip links read as meaningful destinations. The headings on this page also produce good labels because the module reads their text content directly.

Missing labels

The nav and form below have no aria-label. They fall back to a generic label (“Navigation”, “Form”). The <main> element also has no explicit label.

How to fix it

Add aria-label to any landmark that lacks meaningful text content:

<nav aria-label="Related resources">…</nav>
<form aria-label="Newsletter signup">…</form>
<main aria-label="Main content">…</main>

See README.md for the full integration guide.

Edge cases

Title attribute instead of aria-label. The nav below has a title attribute but no aria-label. The module strips title to prevent browser tooltips on focused elements — it is never used as a label source.

Pre-existing id. This nav already has id="resources" in the HTML. The module detects it and skips id generation — the skip link points directly to #resources rather than a generated sl-… id.

This heading has a very long text that should be truncated in the generated skip link label

Heading labels are read from text content and trimmed at the nearest word boundary around 60 characters, with an ellipsis appended. Check the skip link list to see the result.