Focus indicator only communicated through color

[rhoadsstevens]

Priority level 1 (out of 3) from UW Accessible Technologies

WCAG mapping: 1.4.1 Use of Color

STEPS TO REPRODUCE:

1. On the homepage, tab to the the search button
2. Observe the focus indicator

OBSERVED BEHAVIOR:
When tabbing to the search button, focus is only communicated through the search button changing color. This specific example is indicative of a larger issue that appears globally across Manifold. Throughout the website, focus is communicated through icons, buttons, or text changing color. Not only does this create an inconsistent experience (some focus indicators are changes of colors, others are a box around an element), but these focus indicators are often hard to see due to their size or low contrast between focused and unfocused states.

EXPECTED BEHAVIOR:
Having visible focus that is clearly indicated to users is essential for keyboard navigation that is easy to follow. The focus indicator should be consistent throughout the application and should have a sufficient color contrast ratio with adjacent colors.

[zdavis]

Could you please provide a screenshot of the search button in question? We see focus applied with a pretty clear and contrasty border.