[a11y] Buttons do not have visible focus state #15

New issue

Open

opened 2025-05-15 13:45:14 +00:00 by wohfab · 0 comments

wohfab commented

2025-05-15 13:45:14 +00:00

Contributor

Buttons (and class="button") do not have visible focus states. Navigating to them by keyboard isn't highlighting them as it does with links (<a>). I would suggest, adding a visible outline on keyboard focus via something like this:

:is(.button,button):focus-visible {
  outline: 2px solid white;
  outline-offset: 4px;
}

WCAG Reference: 2.4.7 Focus Visible (Level AA) [QuickRef] [Understanding]

Buttons (and `class="button"`) do not have visible focus states. Navigating to them by keyboard isn't highlighting them as it does with links (`<a>`). I would suggest, adding a visible outline on keyboard focus via something like this: ```css :is(.button,button):focus-visible { outline: 2px solid white; outline-offset: 4px; } ``` WCAG Reference: 2.4.7 [Focus Visible](https://www.w3.org/TR/WCAG22/#focus-visible) (Level AA) [[QuickRef](https://www.w3.org/WAI/WCAG22/quickref/#focus-visible)] [[Understanding](https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html)]

Tobi added reference main

2025-06-19 10:28:24 +00:00

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: KABI/fedi.camp_Website#15

No description provided.

Rows
Columns