Skip to content
This repository has been archived by the owner on Nov 2, 2021. It is now read-only.

Commit

Permalink
Add aria labels to account manager nav elements
Browse files Browse the repository at this point in the history
The account manager prototype currently had two navigation landmarks,
one being in the site header, and another being the account menu.

WCAG SC 2.4.1 states that when there are multiple navigation landmarks
of the same kind on a page, they should be labelled in order to help
assistive tech users differentiate between them.

This adds relevant labels to these landmarks to improve navigation for
screen reader users.
  • Loading branch information
danacotoran committed Jan 13, 2021
1 parent 789e8d5 commit ecaa274
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 1 deletion.
2 changes: 1 addition & 1 deletion app/views/application/_account-navigation.html.erb
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<% page_is ||= nil %>

<nav>
<nav aria-label="Account management">
<ul class="accounts-menu">
<li class="accounts-menu__item <%= "accounts-menu__item--current" if page_is == "your-account" %>">
<a class="accounts-menu__link govuk-link govuk-link--no-visited-state" href="<%= user_root_path %>"><%= t("navigation.menu_bar.account.link_text") %></a>
Expand Down
1 change: 1 addition & 0 deletions app/views/layouts/application.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@
<%= render "govuk_publishing_components/components/layout_header", {
product_name: "Account",
navigation_items: navigation_items,
navigation_items_label: "Account access",
} %>

<div class="govuk-width-container app-width-container">
Expand Down

0 comments on commit ecaa274

Please sign in to comment.