[A11Y] [Medium] Missing main landmark for content navigation

[continue]

Accessibility Issue: Missing Main Landmark

WCAG Level: A
Severity: Medium
Category: Semantic HTML

Issue Description

The application's main content area lacks a <main> landmark element or role="main" attribute. Screen reader users rely on landmarks to quickly navigate to different sections of a page.

User Impact

• Affected Users: Screen reader users
• Severity: Users cannot quickly jump to the main content area using landmark navigation

Violations Found

File: src/app/app.component.html

Lines: 24-28

<mat-sidenav-content #sideNavContent [perfectScrollbar]>
  <div class="inner-sidenav-content" fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
    <router-outlet #outlet="outlet" />
  </div>
</mat-sidenav-content>

Issue: The main content area is wrapped in <mat-sidenav-content> and a generic <div>, but neither has role="main" or uses the <main> element.

---

Recommended Fix

<mat-sidenav-content #sideNavContent [perfectScrollbar]>
  <main id="main-content" class="inner-sidenav-content" fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
    <router-outlet #outlet="outlet" />
  </main>
</mat-sidenav-content>

Or if Angular Material conflicts with semantic elements:

<mat-sidenav-content #sideNavContent [perfectScrollbar]>
  <div role="main" id="main-content" class="inner-sidenav-content" fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
    <router-outlet #outlet="outlet" />
  </div>
</mat-sidenav-content>

Changes Made:

1. Replace <div> with <main> element for main content
2. Add id="main-content" for skip link target
3. Alternative: add role="main" if <main> element causes styling issues

---

Testing Instructions

1. Use screen reader (NVDA/VoiceOver) to navigate by landmarks
2. Verify main content landmark is announced
3. Use landmark navigation shortcut (NVDA: D, VoiceOver: Web Rotor)
4. Confirm only one main landmark exists on each page

Resources

• WCAG 1.3.1 Info and Relationships
• MDN main element
• WebAIM Landmarks

Acceptance Criteria

• Main content wrapped in <main> element or has role="main"
• Only one main landmark per page
• Tested with screen reader landmark navigation
• Works with existing skip link (when implemented)

---