Two tools: announce or strip target="_blank", and optional global underlined link styling.
What it does
- New-tab links: label for assistive tech and/or remove forced new tabs
- Global link styles: underline + thickness so links are not color-only
Guided setup in the admin area
The two modules are presented as separate cards and can be enabled independently. Dependent fields appear only when they are relevant. A live preview shows the new-tab notice, optional icon and body-text underline. It remains sticky beside the settings on desktop and precedes them on smaller screens. The page also warns when the visitor preference Toolbar → Colors → Underline all links could affect the same links, and keeps exceptions and hover details in compact disclosures.
Defaults on a fresh install
Main toggle and external-link handling (mark mode) are on; visible icon off. Global link styles are off.
Why it matters
- Screen reader users: hear when a link opens a new window
- Everyone: underlines improve scanability
- WCAG: supports 2.4.4 (link purpose in context), 3.2.5 (change on request—when removing new tabs), 1.4.1 (use of color), 1.4.3 / 1.4.11 (contrast)
WCAG notes
- 2.4.4: labeling clarifies “opens in new tab” behavior
- 3.2.5: stripping target=”_blank” avoids surprise context changes
Part 1 — New-tab handling
Targets anchors with target="_blank".
Option A — Announce
- Visually hidden text for AT (e.g. “Opens in a new tab”)
- Optional inline SVG icon after the link
Option B — Remove
- Strip target=”_blank” so links stay in-tab
Announcement settings: SR text, icon on/off, icon preset, size 8–32px, vertical alignment + nudge, exclusion selectors.
Part 2 — Global link styles
Applies site-wide underline rules (with exclusions).
- Why: WCAG 1.4.1—don’t rely on color alone
- Defaults: text-decoration: underline, optional color, offset (~0.15em), thickness (~0.1em)
- Hover: thicker underline (+~0.04em), optional hover colors
- Exclusions: selectors for nav chrome, buttons-as-links, etc.
Examples
Example 1: Announce new tabs
Enable announce + visible icon (default glyph, 16px). SR text: “Opens in a new tab”. Exclude primary nav.
Example 2: Remove new tabs
Enable strip mode—everything stays in the same browsing context.
Example 3: Global underline
Blue 0.1em underline, 0.14em on hover; exclude nav + button classes.
Example 4: Combined
Icons for external/new-tab links + global underline palette; exclude footer utility links if they need bespoke styling.
Tips
- Either remove new-tab behavior or announce it—don’t leave silent _blank
- Keep icon/underline colors ≥ contrast requirements
- Test icon alignment at 200% zoom
- Turn on global underlines when the theme colors links only
- Exclude patterns that should look like buttons
- Avoid competing hover animations
- Cross-browser smoke test
- If Toolbar → Colors → Underline all links is active, disable one system to avoid double rules
Common issues
Icon missing
Confirm “visible icon” is on; check size/alignment; verify theme isn’t hiding inline SVG.
Global styles not applying
Feature enabled? selectors excluding everything? theme !important overrides?
Toolbar conflict
Disable Toolbar → Colors → Underline all links or the global styles—run one system at a time.
Technical notes
- New-tab detection/adjustment uses front-end JS
- Icons use inline SVG
- Global styles are CSS; work without JS
- Uses text-decoration-thickness / text-underline-offset with fallbacks
Available for: All plans Free