Links

Native link

The native <a> element is fully styled by wexa.css. No JavaScript required. Color, hover and visited states are applied automatically. Add .external-link to append an external link icon after the text.

<a href="page.html">Internal link</a>
<a href="https://example.org" class="external-link">External link</a>

Variables

LinkController — when and why

A plain <a href> is not enough when:

• You need to carry the current accessibility parameters (color scheme, contrast) into the destination URL so the target page opens in the same state.
• The clickable element is not an <a> — for example a <button> or any non-anchor element that cannot carry a native href attribute.
• You need to normalize click and Enter key activation consistently across all browsers.
• You need to load a URL into an <iframe> without causing a full page navigation.

LinkController attaches both click and keyboard listeners to any element identified by ID, reads href or data-href as the target URL, and opens it according to data-target. Requires JavaScript.

handleLinks

handleLinks(ids) registers click and Enter listeners on the listed element IDs.

URL resolution. href is used if present and non-empty. On elements that cannot carry href (e.g. <button>), use the data-href attribute instead — LinkController will read it as a fallback.

Target. Set data-target on the element: _blank (default — opens in new tab), _self (same page), or the ID of an <iframe> on the page.

Call LinkController.initFocusable() once at page load to make elements that carry data-href (but no href and no explicit tabindex) reachable via Tab.

Open in new tab

<a id="link-blank" role="button" data-href="https://sppas.org">
    Open SPPAS (new tab)
</a>
<!-- data-target defaults to _blank -->

lc.handleLinks(['link-blank']);

Open in same page

<a id="link-self" role="button" data-href="./index.html" data-target="_self">
    Open index (_self)
</a>

lc.handleLinks(['link-self']);

Open in iframe

<button id="link-iframe"
        data-href="https://example.org"
        data-target="preview-iframe">Load in iframe</button>
<iframe id="preview-iframe" title="Preview area"></iframe>

lc.handleLinks(['link-iframe']);

handleLinksWithParameters

handleLinksWithParameters(ids) behaves identically to handleLinks, but appends the current accessibility state (color scheme, contrast mode) as URL parameters via Wexa.accessibility.setUrlWithParameters(). Use this when the destination page is also a Whakerexa application and should open in the same accessibility state as the current page.

<a id="link-params" role="button" data-href="./index.html" data-target="_blank">
    Open index with accessibility params
</a>

lc.handleLinksWithParameters(['link-params']);