Interactive elements should have visible focus style and logical focus order for accessibility

[HaSistrunk]

Is your feature request related to a problem? Please describe.

To enable access for users that navigate with the keyboard or other assistive tech, there should be visible focus style for interactive elements that are navigated to via keyboard input. The focus order should be predictable and match the visual layout of the site. Currently there are multiple links and buttons without any focus styles, and some styles that only use color to designate focus.

Describe the solution you'd like

Tab through each page to test visible focus. Usually, it's best to avoid removing the default browser focus styles (by adding outline: none to those elements) if you don't replace with custom styles. When using custom styles, include an outline or other visual indication other than color to indicate focus so that color is not the only visual means of conveying information (see WCAG SC 1.4.1 Use of Color).

Additional context

These guidelines are specified in WCAG 2.x Success Criteria 2.4.7 AA (Focus Visible) and 1.4.7 A (Meaningful Sequence)

[HaSistrunk]

There are focus styles on most elements, but if you load a page and just hit "tab" repeatedly you can test this (Tab button moves the focus to the next element and Shift-Tab moves it backward).

Elements that still need a focus indicator (just a color change isn't enough because not everyone can see color differences):

• Navigation links in the header
• Category links on the homepage
• Service category links on the services page. These links don't receive focus at all. Example: