Daily Accessibility ReviewMissing Skip Navigation Link (WCAG 2.4.1 Bypass Blocks)

[github-actions[bot]]

Problem Description

The Rancher Dashboard is missing a "skip to main content" link. Keyboard-only users and screen reader users must tab through the entire navigation sidebar (main menu + secondary menu with dozens of items) before reaching the main page content. On the Cluster Dashboard, this includes more than 20 focusable navigation links before reaching the primary content area.

WCAG 2.2 Violation

• **[2.4.1 Bypass Blocks (Level A)]((www.w3.org/redacted) A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. This is a Level A requirement, meaning it is the most critical priority.

Observed Behavior

When inspecting the home page (/dashboard/home) via browser automation:

// No skip navigation links found
const skipLinks = document.querySelectorAll('a[href^="#"]');
// skipLinks.length === 0

Every page that uses the shared layout (header + sidebar navigation) forces keyboard users to navigate through all navigation items before reaching the <main> element.

Recommended Fix

Add a visually-hidden skip link as the very first focusable element in the application layout that becomes visible on focus. This is a common accessibility pattern:

<!-- In the main layout template, before the <header> / <nav> -->
<a href="`#main`-content" class="skip-nav">Skip to main content</a>

<!-- On the <main> element -->
<main id="main-content" tabindex="-1">
  ...
</main>

.skip-nav {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;

  &:focus {
    position: static;
    width: auto;
    height: auto;
  }
}

The layout file to modify is likely shell/layouts/default.vue or equivalent.

Generated by Daily Accessibility Review · ● 1.8M · ◷

• expires on May 28, 2026, 8:31 AM UTC