Skip Links, Focus, and Reading Order

For keyboard-only users and screen reader users, the path through a page is determined by two things: the order of focusable elements in the HTML source and whether shortcuts exist to bypass large sections of repeated content. Blaskan addresses both.

The Skip Link

A skip link is a visually hidden anchor that becomes visible when it receives keyboard focus. It lets keyboard users jump past the site header and navigation directly to the main content. Without a skip link, a keyboard user pressing Tab must navigate through every header link before reaching the page content on each new page they visit.

Blaskan places a skip link as the first element in the HTML body. The link target is the #main-content anchor on the main content area. The skip link text reads "Skip to content."

When a sighted keyboard user arrives on a page and presses Tab for the first time, the skip link appears in the top-left of the viewport. Pressing Enter activates the link and moves focus to the main content area.

How it renders: The skip link is positioned off-screen by default using CSS. On focus, it is repositioned into the visible viewport. This approach keeps the link accessible without affecting the page layout for mouse users who never see it.

If you have added a child theme with custom CSS, verify that your CSS does not affect .skip-link or related rules. Overrides that set display: none on this element will break keyboard navigation.

Keyboard Focus Visibility

Every interactive element in Blaskan has a visible focus state. This includes navigation links, buttons, form fields, comment reply links, and pagination links.

Focus states use an outline rather than a box-shadow. The default outline style provides sufficient contrast against both the page background and the element backgrounds used in the theme.

Browser default focus styles vary by browser and platform. Blaskan does not remove the default outline with outline: 0 or outline: none. The focus style is either the browser's default or an explicit custom outline that meets contrast requirements.

Testing focus visibility: Navigate the page using only the Tab key. Every focusable element should display a clearly visible indicator as you move through it. If any focusable element shows no visual change on focus, that element has a focus state problem.

Tab Order and Reading Order

Tab order follows the HTML source order. Blaskan's HTML structure places elements in logical document order:

1. Skip link
2. Site header (brand link, navigation links)
3. Page content (main heading, body content)
4. Sidebar (if visible)
5. Footer (footer navigation links)

This order matches the visual layout. A keyboard user moves through elements in the same left-to-right, top-to-bottom sequence that a sighted user reads them.

Avoid CSS-only reordering: If you add a child theme with custom CSS, be cautious about using CSS order in flexbox or grid-row / grid-column to move elements that contain focusable content. CSS reordering changes the visual position of elements without changing the HTML source order, which creates a mismatch between what a keyboard user experiences and what a sighted user sees. This is a WCAG 2.1 failure under Success Criterion 1.3.2 (Meaningful Sequence) and 2.4.3 (Focus Order).

Screen Reader Landmarks

HTML landmark regions (declared via semantic elements or ARIA roles) let screen reader users jump directly to sections of the page. Blaskan uses the following:

• <header> for the site header
• <nav> for the main navigation (with an accessible label)
• <main> for the primary content area
• <aside> for the sidebar widget area
• <footer> for the site footer

These landmarks are announced by screen readers and appear in the screen reader's landmark navigation list. A user wanting to go directly to the main navigation, main content, or footer can do so without reading through intervening content.

Reading Order for Posts with Complex Content

For posts that include data tables, images with captions, or block quotes, the reading order within the post content follows the HTML source. When writing or editing content:

• Place figure captions immediately after the <img> or within the <figure> element so they are read in context
• Avoid using whitespace-heavy formatting that creates empty paragraphs between related elements
• If you use a page builder or block editor with reordering features, review the HTML output to confirm the reading order still makes sense when read linearly

For color and contrast considerations related to accessibility, see color contrast, line length, and scannability. For theme documentation, see the documentation overview.