Devographics / Devographics/Monorepo

Contrast too light to indicate focused field

Open
#238 1 comment 3 reactions 0 assignees View on GitHub
a11y surveyform
Dominant language
TypeScript
Stars
178
Forks
55
Avg merge
1m
Merged PRs (30d)
2

Description

Filling out State of CSS Survey 2023:
https://survey.devographics.com/en-US/survey/state-of-css/2023/hfg5V70I2tPvW2i5wgy1V/13

**To reproduce:**
1. navigate to any page of the survey with a form field
2. using only the keyboard to navigate, identify the field that has focus

**What should happen:** I can clearly identify the focused field.

**What actually happens:** For checkboxes, select menus, and text fields I cannot immediately identify the currently focused field. This is particularly tricky with checkboxes since the `:focus-within` on the wrapper indicates (for users who can perceive the color change) that my focus is on _a_ checkbox, but not _which_ checkbox.

**More detail:**
These styles remove the browser's default focus indicator and rely on a low contrast box shadow:
```CSS
:focus:not(:focus-visible) {
outline: none;
}
.form-control:focus {
color: #212529;
background-color: #fff;
border-color: #86b7fe;
outline: 0;
box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}
```
In practice, that makes the color combination `#1C375A` on `#212424`, which has a 1.3:1 contrast ratio.

**Potential fix:**
This block of CSS puts a yellow outline (`#ffff00`) on the fields (contrast ratio of 14.6:1):
```CSS
.form-control:focus, .form-check-input:focus, .form-select:focus {
outline: .2em solid ffff00;
outline-offset: .1em;
}
```

**Platform:** Firefox 114 / Windows 11

**WCAG failure:** This constitutes a [WCAG SC 1.4.11 Non-text Contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html) (Level AA) failure.

**Image demonstration:**
This image shows each of four different form field types with the site's own focus indicators (left side of image) and then shows the same field types with the CSS I proposed above (right column).

The most compelling difference is the "Visual impairments" checkbox, in my opinion.

![A set of radio buttons, a select menu, a set of checkboxes, and a text field all with a light blue outline alongside the same fields with a vibrant yellow outline.](https://github.com/Devographics/Monorepo/assets/1376607/a682241d-fef9-45ba-9822-0a5a1ebdb18f)

Contributor guide

No contributing guide indexed for this repository

Research direction

Open the State of CSS Survey 2023 form from the reproduction link and search the repository for the shown .form-control, .form-check-input, and .form-select focus styles. Test keyboard navigation across text fields, select menus, and checkboxes, then verify that every focused control has a clearly visible indicator meeting the stated contrast requirement.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
accessibility, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.