[A11Y] [Medium] Missing skip link for main content navigation

[continue]

Accessibility Issue: Missing Skip Link for Main Content

WCAG Level: A
Severity: Medium
Category: Skip Links & Navigation

Issue Description

The application lacks a "Skip to main content" link, which is essential for keyboard users and screen reader users to bypass repetitive navigation elements and jump directly to the main content area.

User Impact

• Affected Users: Keyboard-only users, screen reader users
• Severity: Users must tab through the entire navigation menu on every page before reaching the main content, significantly degrading the user experience

Violations Found

File: src/app/app.component.html

Lines: 1-36

<div fxLayout="column" id="rtl-container" class="rtl-container medium" [ngClass]="[selNode.settings.themeColor | lowercase, selNode.settings.themeMode | lowercase]">
  <mat-toolbar fxLayout="row" fxLayoutAlign="space-between center" class="bg-primary rtl-top-toolbar">
    <!-- No skip link present before navigation -->

Issue: No skip link exists to allow users to bypass the toolbar and navigation menu.

---

Recommended Fix

<div fxLayout="column" id="rtl-container" class="rtl-container medium" [ngClass]="[selNode.settings.themeColor | lowercase, selNode.settings.themeMode | lowercase]">
  <!-- Skip link for keyboard/screen reader users -->
  <a href="#main-content" class="skip-link">Skip to main content</a>
  
  <mat-toolbar fxLayout="row" fxLayoutAlign="space-between center" class="bg-primary rtl-top-toolbar">
    ...
  </mat-toolbar>
  ...
  <mat-sidenav-content #sideNavContent [perfectScrollbar]>
    <div id="main-content" class="inner-sidenav-content" fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch" tabindex="-1">
      <router-outlet #outlet="outlet" />
    </div>
  </mat-sidenav-content>
</div>

Add CSS in src/styles.scss or a global stylesheet:

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  z-index: 9999;
  transition: top 0.3s;
  
  &:focus {
    top: 0;
  }
}

Changes Made:

1. Add skip link as first focusable element
2. Add id="main-content" to main content area
3. Add tabindex="-1" to main content for programmatic focus
4. Style skip link to be visually hidden until focused

---

Testing Instructions

1. Load any page in the application
2. Press Tab key - skip link should appear
3. Press Enter on skip link - focus should move to main content
4. Test with screen reader (NVDA/VoiceOver)

Resources

• WCAG 2.4.1 Bypass Blocks
• WebAIM Skip Navigation Links
• MDN Skip Links

Acceptance Criteria

• Skip link added as first focusable element
• Skip link visible on keyboard focus
• Skip link targets main content area
• Tested with screen reader (NVDA/VoiceOver)
• Skip link styled consistently with application theme

---