skip to main content

accessibility — skip navigation, lang attribute, and CSS requirements

DESCRIPTION antenna generates HTML that meets WCAG 2.1 Level A success criterion 2.4.1 (Bypass Blocks) and uses semantic HTML5 markup throughout.

SKIP NAVIGATION LINK Every generated page includes a skip-navigation link immediately after

that lets keyboard users jump past the site navigation directly to the main content:

<a href="#main-content" class="skip-link">Skip to main content</a>

The skip link is visually hidden off-screen until it receives keyboard focus, at which point it becomes visible. The CSS generated by ‘antenna css’ includes the required .skip-link and .skip-link:focus rules.

If you maintain your own stylesheet, add these rules:

.skip-link {
  position: absolute;
  top: -999px;
  left: -999px;
  padding: 0.5rem 1rem;
  background: #333;
  color: #fff;
  text-decoration: none;
  z-index: 9999;
}
.skip-link:focus {
  position: static;
  top: auto;
  left: auto;
  display: block;
}
LANG ATTRIBUTE The

element includes a lang attribute from page.yaml. The default is “en-US”. Change it for non-English sites:

lang: ja        # Japanese
lang: fr-FR     # French (France)
ARTICLE FOOTER FOR SOURCE LINKS Feed item cards use
(not

) for the source URL at the bottom of each card. CSS selectors targeting the old pattern “article address” must be updated to “article footer”.

The default CSS from ‘antenna css’ already uses the correct selector.

SEMANTIC TIME ELEMENTS Publication and update dates are wrapped in