Nav bar does not have visible focus

Bug #1839374 reported by Tiffany Little
10
This bug affects 2 people
Affects Status Importance Assigned to Milestone
Evergreen
Undecided
Unassigned

Bug Description

When the links in the nav bar receive keyboard focus, the CSS reflects that the background color is set to "transparent" and the text decoration is set to "none." This causes the visible focus of the elements to disappear upon keyboard focus. A user who utilizes a screen magnification tool may lose track of where they are on the page if unable to clearly see where focus has landed.

.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
    color: #333;
    background-color: transparent;

.nav > li > a:focus, .nav > li > a:hover {
    text-decoration: none;

We should ensure that all focusable elements have sufficient visible focus. See more about visible focus indicators here: https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/

See: https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=246%2C131#focus-visible

See also: https://wiki.evergreen-ils.org/doku.php?id=accessibility:webclient_audit

tags: removed: webstaffclient
To post a comment you must log in.
This report contains Public information  Edit
Everyone can see this information.

Other bug subscribers