unimelb / unimelb-design-system

A complete design system for the University of Melbourne
https://web.unimelb.edu.au
30 stars 12 forks source link

Accessibility - Page Header Tools #787

Closed anormand closed 7 years ago

anormand commented 7 years ago

Expected behaviour

As a screen reader user, I need to know that the tools in the page header are part of a navigation item, so that I can understand their purpose.

Actual behaviour

The screen reader reads the tools as individual links.

Steps to reproduce

The current code is:

<div class="page-header-tools">...</div>

NVDA reads it as:

SEARCH link Search

Suggested code:

<nav class="page-header-tools">...</nav>

NVDA will read it as:

navigation landmark clickable SEARCH link Search