Accessibility Improvement: ARIA Landmarks on Sign-in Pages and Dashboard Sidebar

Release: v1.0.434
Control: A11Y-08
Category: Screen Reader Accessibility

---

Overview

Version 1.0.434 addresses a screen reader accessibility gap (control A11Y-08) across the sign-in page, sign-up page, and the main dashboard sidebar. The changes ensure that assistive technologies — including NVDA, JAWS, and VoiceOver — can expose meaningful HTML landmark regions to users, enabling fast, keyboard-driven navigation around the page without tabbing through every element.

---

Background: Why Landmarks Matter

HTML landmark elements (<main>, <nav>, <aside>, <header>, <footer>) give screen readers a structural map of the page. Most screen readers let users jump directly between landmarks using a single keystroke or gesture:

Assistive Technology	Landmark shortcut
NVDA (browse mode)	D to cycle landmarks
JAWS	R for regions / Q for <main>
VoiceOver (macOS)	VO + U → Landmarks rotor
VoiceOver (iOS)	Swipe by Landmarks in the rotor

Without a <main> element on the sign-in page, a screen reader user arriving at the login form had no way to skip past any preceding content and land directly on the form. Without labelled <aside> and <nav> regions in the dashboard, the landmarks list showed unnamed regions that were impossible to distinguish at a glance.

---

Changes in This Release

1. <main> Landmark on Sign-in and Sign-up Pages

Before:

<div className='flex min-h-screen flex-col items-center justify-center'>
  {/* sign-in card content */}
</div>

After:

<main className='flex min-h-screen flex-col items-center justify-center'>
  {/* sign-in card content */}
</main>

Using <main> instead of a plain <div> as the outermost wrapper gives the page a single, unambiguous main landmark. Screen reader users can now jump straight to the sign-in form without traversing any preceding navigation or header content.

The same change has been applied to the sign-up page to maintain consistency.

---

2. aria-label on the Dashboard <aside>

Before:

<aside>
  {/* sidebar content */}
</aside>

After:

<aside aria-label='Main navigation'>
  {/* sidebar content */}
</aside>

A bare <aside> element in the dashboard layout was indistinguishable from any other complementary region a screen reader might encounter. Adding aria-label='Main navigation' gives it a human-readable name that appears directly in the landmarks list.

---

3. aria-label on the SidebarNav <nav> Element

Before:

<nav>
  {/* navigation links */}
</nav>

After:

<nav aria-label='Sidebar navigation'>
  {/* navigation links */}
</nav>

Pages with more than one <nav> element must label each one distinctly; otherwise screen readers announce them all as "navigation" with no way to tell them apart. The aria-label on the inner <nav> inside SidebarNav satisfies this requirement and pairs clearly with the labelled <aside> that wraps it.

---

WCAG Reference

Criterion	Level	Relevance
1.3.1 Info and Relationships	A	Landmark roles convey structure programmatically
1.3.6 Identify Purpose	AAA	Labels identify the purpose of UI regions
2.4.1 Bypass Blocks	A	<main> enables skip-to-content landmark navigation
4.1.2 Name, Role, Value	A	Interactive regions must have accessible names

---

Affected Files

• src/app/sign-in/[[...sign-in]]/page.tsx
• Sign-up page equivalent
• Dashboard layout component (<aside> element)
• SidebarNav component (<nav> element)

---

Testing These Changes

To verify the improvements with a screen reader:

1. Sign-in page — Open NVDA or VoiceOver and navigate to /sign-in. Use your screen reader's landmark shortcut. You should land directly on a region announced as "main".
2. Dashboard sidebar — While logged in, open the landmarks list (e.g. VO + U on macOS). You should see an <aside> labelled "Main navigation" and a <nav> labelled "Sidebar navigation" as distinct entries.
3. No duplicate unlabelled landmarks — Confirm there are no unlabelled <aside> or <nav> entries remaining in the landmarks rotor.