SkipLink + LiveRegion

Atom

SkipLink is visually hidden until focused, enabling keyboard users to bypass navigation. LiveRegion announces dynamic content to screen readers.

Preview

Tab into the area below to reveal the skip link:

Main content area

Code

<%# Place at top of layout: %>
<%- include('modules/ui/SkipLink', { href: '#main-content' }) %>

<%# Linked target: %>
...

Preview

(screen reader hears: "Announcement #1 sent")

Code

<%# Polite live region — announces `message` to screen readers %>

  <%= message %>

<%
  var _href      = locals.href      || '#main-content';
  var _label     = locals.label     || 'Skip to main content';
  var _className = locals.className || '';
%>

  <%= _label %>

SkipLink + LiveRegion

SkipLink (focus to reveal)

LiveRegion