UnderlineNav

Accessibility and usability expectations

Underline nav provides a structured set of links to help users navigate to pages of content.

The navigation should be easily discoverable for screen reader users by appearing in the landmarks of the page, and the landmark should have a descriptive accessible name.

Each link must have a clear and descriptive label text that provides the purpose of the link.

Icons in the links are purely decorative and are hidden from screen readers by default. If the icon does convey any informational meaning, the adjacent text inside of the link must provide all the necessary information without relying on the icon itself.

Items that include a counter must include the counter in the accessible name of the link so that it is conveyed to screen reader users.

The active link must be conveyed to screen reader users, which can be achieved by using the aria-current attribute.

The label text must have sufficient colour contrast against the background and the active link must be visually obvious to users with low vision.

The links must have a visible focus style. A custom focus style must have a minimum contrast ratio of 3:1 against the background.

Each link must be focusable using the Tab key and activated by pressing the Enter key.

Each link must have a minimum target size of 24 by 24 CSS pixels. This is to ensure that the link is large enough to be easily activated by users with motor impairments.

The component must not require horizontal scrolling when resized or zoomed to a view port of 320px. If an overflow disclosure menu is present, the control to open/close the menu should be a <button> with an aria-expanded attribute that conveys the expanded state.

Built-in accessibility features

This component is rendered as a <nav> navigation landmark region. UnderlineNav has an aria-label prop to provide an accessible name for the navigation landmark.

The individual items are rendered as an <ul> unordered list, with each item marked up as a link in a separate <li> list item.

The counter text is included in the accessible name of the link.

The label text and focus style meet minimum colour contrast requirements.

The active link is visually obvious to users with low vision. Whilst the coral underline of an active link does not meet contrast requirements, the label of the active link is bold and has higher contrast than the non-selected labels, which ensures users with low vision can distinguish the active link.

The links have a target size larger than the 24×24 CSS pixels minimum.

The component does not cause horizontal scrolling by automatically collapsing overflowing items into a disclosure menu. The control for the menu is a <button> with an aria-expanded attribute with a value that correctly conveys the expanded state.

Keyboard navigation

Items can be activated using a cursor or keyboard

Implementation requirements

Provide a descriptive accessible name for the navigation landmark by using aria-label with an appropriate value.

<UnderlineNav aria-label="Repository">

Provide a clear and descriptive label for each link.

Only use decorative icons as a text description cannot be set.

Set aria-current to "page" to indicate that the item represents the current page. Set aria-current to "location" to indicate that the item represents the current location on a page.

How to test the component

Integration tests

• The navigation landmark has an appropriate and descriptive accessible name
• Each link has an appropriate and descriptive label
• If an icon is present within a link, the adjacent text inside of the link provides all the necessary information without relying on the icon itself
• The active link is conveyed to assistive technologies using the aria-current attribute, and is set to "page" when the item represents the current page and "location" when the item represents the current location on the page.

Component tests

• The component container is a <nav> and can accept the aria-label attribute
• The navigation consists of an unordered list of links
• Links that include a counter include the counter in the accessible name
• The label text has sufficient colour contrast against the background
• The active link is visually obvious to users with low vision
• Each link has a visible focus style. As it is custom, the focus style must have a minimum contrast ratio of 3:1 against the background
• Each link has a minimum target size of 24 by 24 CSS pixels
• Each link can be reached using the Tab key and activated by using the Enter key
• The component does not cause horizontal scrolling when zoomed or viewed at a width equivalent to 320 CSS pixels. An overflow disclosure menu is present when space is limited.
• The control for the overflow disclosure menu is a <button> that has an aria-expanded attribute with a value that correctly conveys the expanded state