Improving Screen Reader Support: ARIA Labels on Sidebar Navigation

Release: v1.0.435
Accessibility Control: A11Y-09
Affected component: SidebarNav / CollapsibleNavGroup / DownloadReceiptButton

---

Overview

Version 1.0.435 ships a targeted set of accessibility fixes for the dashboard sidebar navigation. All three changes address the same underlying theme: interactive elements that communicated state or purpose visually but not programmatically, leaving screen reader users without the information they needed.

---

What was fixed

1. CollapsibleNavGroup — aria-expanded on the toggle button

Problem: The sidebar groups (e.g. Property Income, Self-Employment) are collapsible. The open/closed state was shown visually by rotating a chevron icon, but the <button> element itself had no aria-expanded attribute. Screen readers had no way to announce whether the group was expanded or collapsed.

Fix: aria-expanded={open} is now set directly on the toggle <button>, reflecting the current boolean state of the group.

// Before
<button onClick={handleToggle} className="...">
  <ChevronIcon />
  {label}
</button>

// After
<button onClick={handleToggle} aria-expanded={open} className="...">
  <ChevronIcon />
  {label}
</button>

With this change, a screen reader will announce something like "Property Income, collapsed, button" or "Property Income, expanded, button" — giving users the context they need before deciding whether to activate the control.

---

2. SidebarNav — aria-label on the <nav> landmark

Problem: The sidebar rendered a <nav> element with no accessible name. When a page contains multiple navigation landmarks (e.g. a top header nav and a sidebar nav), screen reader users navigating by landmarks could not differentiate them.

Fix: aria-label="Main navigation" has been added to the <nav> element.

// Before
<nav className="...">

// After
<nav aria-label="Main navigation" className="...">

This allows screen readers to announce "Main navigation, navigation" when the user enters or jumps to this landmark region.

---

3. DownloadReceiptButton — descriptive aria-label

Problem: The button to download a PDF receipt had a title attribute for tooltip display, but no aria-label. The title attribute:

• Is not reliably announced by all screen reader / browser combinations.
• Is not surfaced when the element is focused via keyboard (only on mouse hover).

This meant keyboard-only users and screen reader users could not easily identify which receipt the button would download.

Fix: An explicit aria-label is now set in the format Download PDF receipt for {quarterLabel} {taxYear} — for example, "Download PDF receipt for Q2 2024/25".

// Before
<button title={`Download PDF receipt for ${quarterLabel} ${taxYear}`}>
  <DownloadIcon />
</button>

// After
<button
  title={`Download PDF receipt for ${quarterLabel} ${taxYear}`}
  aria-label={`Download PDF receipt for ${quarterLabel} ${taxYear}`}
>
  <DownloadIcon />
</button>

---

WCAG coverage

Fix	WCAG Success Criterion
aria-expanded on toggle button	4.1.2 Name, Role, Value (Level A)
aria-label on <nav> landmark	2.4.1 Bypass Blocks / 1.3.1 Info and Relationships (Level A)
aria-label on DownloadReceiptButton	4.1.2 Name, Role, Value (Level A)

All three issues fall under WCAG 2.1 Level A — the baseline conformance level — making these fixes a priority for any production deployment.

---

Affected file

• src/app/dashboard/sidebar-nav.tsx