search

sarapis / orservices

ORServices is an open source, smartphone-friendly directory application that enables you to collect, verify, organize and share information about social services in your community with your stakeholders, beneficiaries, partner organizations and more.
https://sarapis.org/human-services/orservices/
22 stars 16 forks source link

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

Open HaSistrunk opened 3 years ago

HaSistrunk commented 3 years ago

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 commented 2 years ago

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):