Accessible Form Controls
Form controls should remain recognizable, keyboard accessible, and readable. Styling should not remove browser affordances without providing an equivalent accessible alternative.
Labels should be associated semantically in HTML, while CSS handles visual presentation.
Accessible Form Control Relationship
Form Control Styling
.field {
display: grid;
gap: 0.5rem;
}
input,
textarea,
select {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid #94a3b8;
border-radius: 0.5rem;
font: inherit;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 2px;
}💡 The controls use inherited typography and retain a strong keyboard focus indicator.
Key Takeaways
- Do not remove focus indicators without replacing them.
- Use
font: inheritto make form controls match surrounding typography.
Knowledge Check
Why is `:focus-visible` important for form accessibility?