CSS Accessibility
CSS User Interface
Control selection, pointer hit testing, resizing, caret appearance, cursors, and other interaction-facing CSS without hiding usable states. It covers pointer hit testing, selection, resizing, carets, cursors, control feedback, and accessibility boundaries.
Interaction-facing CSS should clarify what users can do without weakening text selection, focus, or native control behavior. Visual convenience is not a reason to remove platform features that people rely on to read, edit, and navigate.
The CSS Basic User Interface module controls several details users feel directly, from whether text can be selected to whether a textarea can be resized. These declarations affect interaction feedback, so their visual convenience must be weighed against keyboard access, text selection, and native platform expectations. This topic also connects with Accessible CSS and Modern Form Styling.
Selection and pointer behavior
user-select controls whether text can be selected. pointer-events controls pointer hit testing, but it does not disable keyboard focus or communicate a disabled state.
Example
css
.drag-handle {
user-select: none;
cursor: grab;
}
.decoration {
pointer-events: none;
}Editable controls
Use resize to control author-provided resizing and caret-color to keep the insertion caret visible. Do not prevent textarea resizing unless the layout provides another way to reveal all entered content.
Example
css
textarea {
resize: block;
min-block-size: 8rem;
caret-color: currentColor;
}Interaction feedback
A custom cursor is supplementary feedback, not the only signal that an element is interactive. Preserve visible hover, active, focus, selected, readonly, and disabled states.
Coordinate browser gestures
touch-action tells the browser which direct-manipulation gestures remain available on a region. Restrict it only when an implemented interaction genuinely needs the same gesture, and never block page scrolling across a broad container without an accessible alternative.
Example
css
.horizontal-slider {
touch-action: pan-y pinch-zoom;
}User Interface Properties
| Property | Purpose | Example |
|---|---|---|
| user-select | Controls text selection. | user-select: none |
| pointer-events | Controls pointer hit testing. | pointer-events: none |
| resize | Controls author-provided resizing. | resize: block |
| caret-color | Sets the insertion caret color. | caret-color: currentColor |
| touch-action | Declares which direct-manipulation gestures remain available. | touch-action: pan-y pinch-zoom |
Complete Example
Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.
Complete runnable example
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS User Interface example</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 2rem;
font-family: system-ui, sans-serif;
line-height: 1.5;
}
main { max-width: 70rem; margin-inline: auto; }
article, section, aside, form, .card, .panel {
padding: 1rem;
border: 1px solid #cbd5e1;
border-radius: 0.6rem;
}
.drag-handle {
user-select: none;
cursor: grab;
}
.decoration {
pointer-events: none;
}
textarea {
resize: block;
min-block-size: 8rem;
caret-color: currentColor;
}
.horizontal-slider {
touch-action: pan-y pinch-zoom;
}
</style>
</head>
<body>
<main><p class="drag-handle">Drag handle text</p><span class="decoration">Decorative overlay</span><label for="notes">Resizable notes</label><textarea id="notes">Edit this text and resize the field.</textarea></main>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| pointer-events | 1 | 12 | 1.5 | 4 |
| user-select | 54 | 79 | 69 | 3 |
| resize | 1 | 79 | 4 | 3 |
| touch-action | 36 | 12 | 52 | 13 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.
Notes
- CSS can change interaction feedback, but HTML semantics and control state remain responsible for meaning and keyboard behavior.
- Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
- Use a fallback when the support table shows that one of your required browsers predates the feature.
Conclusion
User-interface properties refine selection, hit testing, resizing, carets, and cursors, but they do not replace semantic states or keyboard behavior. Use them to clarify interaction while preserving selection, focus, readable content, and native control expectations.
Use these properties locally and deliberately. Broad selection bans, hidden focus, misleading cursors, or pointer-event workarounds usually indicate a structural interaction problem.