Accessibility

Accessible side navigation requirements

Keep these considerations in mind if you're modifying the Design System or creating a custom component.

WCAG guidelines

1.3 Adaptable

All items in the side navigation are in a nested <ul> structure, which provides additional information to assistive technologies (Carbon Design System, n.d.).

The Vertical navigation component is in a <nav> section with aria-label="side navigation" .

Further more the side navigation should be housed in an <aside> element. By using the <aside> element to mark up a side menu, you're providing a semantic structure to the content, which helps assistive technology such as screen readers to correctly identify and interpret the menu. The <aside> element is designed to be used for content that is related to the main content of the page, but not essential to understanding it which makes it perfect for a side menu.

2.1.1: Keyboard

Implement proper keyboard navigation for menus, including the Enter key to activate links, the Enter or Space key to press buttons and expand submenus.

2.4.1: Bypass blocks

Include a mechanism to bypass side navigation for those using a keyboard or screen readers.

2.4.7: Focus Visible

Provide visible focus indicators for interactive elements, so keyboard users can easily identify which element is currently focused.

3.2: Predictable

Maintain consistent navigation structure and appearance across all pages of the website to help users understand the interface and anticipate where they'll find navigation items.

Use descriptive labels for each link in the primary navigation, as this makes it easier for users with screen readers to understand what the link is for.

2.4.5: Multiple ways

More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process.

2.4.6: Headings and labels

Use clear and consistent headings to organise the links in the side navigation and mega menu, as this makes it easier for users with screen readers to navigate the menu.

Other best practice guidance

  • Offer multiple ways to access content, such as providing a search functionality and a sitemap
  • Use clear and simple language for navigation labels, avoiding jargon or unfamiliar terms
  • Activated links should receive an aria-current="page" attribute

Last updated: April 2026

Back to top