Getting Started with The WebAbility Accessibility Enhancer

Accessibility Enhancer Installation Overview

1. Sign up for an account
2. Add your site
3. Use the free trial or choose a plan
4. Install the script

Load timing

By default the Accessibility Enhancer loads with the page. The fixes and the launcher button are in place before the page is interactive. If you want the Accessibility Enhancer to start later, add the data-asw-init attribute to the embed script. The attribute takes one of three values: immediate, idle or interaction.

You do not need to edit the snippet by hand. In the dashboard, go to Sites and select your site. Open the Settings tab. Under Installation, in Copy your snippet, choose a value for Load timing. The snippet updates as you change it.

immediate (default)

The Accessibility Enhancer loads with the page. Fixes and the launcher are in place before the page is interactive. Omitting the attribute gives the same result.

<script src="https://enhancer.webability.io/widget.min.js" data-asw-init="immediate" defer></script>

idle

The Accessibility Enhancer waits until the browser has finished loading the page and is idle. It uses requestIdleCallback after the load event, with a 3 second cap. Browsers without requestIdleCallback wait 1.5 seconds after load instead. A visitor who interacts with the page before that starts the Accessibility Enhancer at once.

<script src="https://enhancer.webability.io/widget.min.js" data-asw-init="idle" defer></script>

interaction

The Accessibility Enhancer waits for the first real keypress, tap, click or mouse-wheel scroll. Scripted focus or scrolling does not count. If none happens, it starts 10 seconds after load. Keyboard and screen reader users get the launcher on their first Tab press: that Tab lands on a small "Accessibility menu is loading" button, and focus moves to the "Open Accessibility Widget" link as soon as the Accessibility Enhancer is ready.

<script src="https://enhancer.webability.io/widget.min.js" data-asw-init="interaction" defer></script>

What is delayed

The browser downloads the embed script with the page in every mode. The defer attribute delays when the script runs, not the download, and the Accessibility Enhancer cannot read data-asw-init before it runs. In both lazy modes, that one download is all that happens before the trigger. The Accessibility Enhancer does not fetch the fix manifest or its own code, sends no telemetry, and applies no fixes. The launcher is not shown either. This delays the Accessibility Enhancer's work, not the script download.

The trade-off: lazy modes reduce the Accessibility Enhancer's share of the page load score, and they delay the accessibility fixes by the same amount. A visitor who needs the fixes waits for them. For that reason the default stays immediate.

Verify in devtools

The Accessibility Enhancer fires an asw:init event on window when it starts. The event detail is { mode, trigger }. Add a listener before the embed script to see which mode ran and what started it:

<script>
  window.addEventListener("asw:init", (e) => console.log("asw:init", e.detail));
</script>
<script src="https://enhancer.webability.io/widget.min.js" data-asw-init="idle" defer></script>

Exclude content from the page summary

The Accessibility Enhancer sends a summary of each page to WebAbility so we can find and fix accessibility issues. To keep part of a page out of that summary, mark it with one of these:

• the data-webability-no-capture attribute
• the wa-no-capture class
• the ph-no-capture class. This is the PostHog marker, so areas you already mark for PostHog are covered.

The marker applies to the element and everything inside it. In that area, text, HTML snippets and attribute values are replaced with asterisks before the summary leaves the browser: each character becomes *. Tag names and structural attributes (id, class, role, type, tabindex and ARIA state) are kept, so we can still check the structure, for example that a button has a name.

<!-- Attribute form -->
<div data-webability-no-capture>
  <p>Account holder: Jane Doe</p>
</div>

<!-- Class form -->
<section class="wa-no-capture">
  <h2>Order history</h2>
</section>

Masked without a marker

• Email addresses and phone numbers are always masked in the browser. A mailto: or tel: prefix stays.
• Text a visitor types or selects is never sent. This covers form field values, textarea text, the chosen option of a select, contenteditable regions, and elements with the role textbox, searchbox or combobox.
• The page URL in the summary keeps only the origin, the path and the query parameters that select page content, for example ?p=42. The fragment is removed, and so are tracking, session and token parameters and parameters whose value is an email address or an opaque ID.

See The Accessibility Enhancer in our privacy policy for what we keep.