An accessible search bar does two jobs at once: it helps people find content fast and it behaves predictably for assistive tech. By the end of this article, you will have a polished search bar with clear visuals, keyboard-friendly focus, screen reader labels, a CSS-only clear button that appears when the field has text, and a magnifying glass icon drawn with CSS. You will also get small, safe enhancements for motion and a tiny script for clearing the field while keeping focus where it belongs.
Why Accessible Search Bars Matter
Search is often the first control users try when they reach a new interface. If the field is not labeled or the focus styles are faint, people lose trust or get blocked. A search bar must work with a keyboard, expose a clear name to screen readers, show strong focus feedback, and avoid surprises like hidden buttons that appear without context. A good design balances visual clarity with semantic HTML, and keeps icons decorative while real text handles the meaning.
Prerequisites
You will build this with simple HTML and CSS, plus a tiny script for the clear button. If you already build common components, this will feel comfortable.
- Basic HTML
- CSS custom properties
- CSS pseudo-elements (::before / ::after)
Step 1: The HTML Structure
The form uses a proper search landmark, a real label (visually hidden but still present), a submit button with a CSS magnifying glass, and a clear button that will be announced correctly. A live region announces “Cleared” when the clear button runs. The clear button follows the input so we can toggle it with the :placeholder-shown selector in pure CSS.
``
Step 2: The Basic CSS & Styling
Set up design tokens with CSS variables so the component can adjust to dark mode and brand colors. The container uses flexible sizing, while the input gets a generous radius to read as a friendly pill shape. The visually hidden helper class keeps labels discoverable to assistive tech. If you want to study how rounded shapes behave, this pill is a practical use of an oval with CSS.
``
/* CSS */
:root {
--search-bg: #ffffff;
--search-fg: #161616;
--search-muted: #6b7280;
--search-border: #d1d5db;
--search-accent: #2563eb;
--search-accent-contrast: #ffffff;
--search-focus: color-mix(in srgb, var(--search-accent) 30%, transparent);
--radius-pill: 9999px;
--radius-sm: 10px;
--ring-size: 3px;
color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
:root {
--search-bg: #0b0b0c;
--search-fg: #f5f5f5;
--search-muted: #9ca3af;
--search-border: #3f3f46;
--search-accent: #60a5fa;
--search-accent-contrast: #0b0b0c;
--search-focus: color-mix(in srgb, var(--search-accent) 40%, transparent);
}
}
*,
*::before,
*::after { box-sizing: border-box; }
body {
margin: 0;
font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
color: var(--search-fg);
background: canvas;
padding: 2rem;
}
/* Keep typography consistent inside the component */
.search { font: inherit; }
.search {
display: flex;
align-items: center;
gap: .5rem;
max-width: min(680px, 100%);
margin-inline: auto;
}
/* Visually hidden, but still accessible */
.sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
.sr-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
Advanced Tip: Custom properties let you theme the search bar from a single place. You can swap
--search-accentto match brand colors, or flip the palette in a dark theme without touching the component CSS.
Step 3: Building the Input Field
The field wrapper positions the clear button inside the input area. The input pads the right side so the clear button does not overlap text. The clear control appears only when the input contains text, thanks to :placeholder-shown.
``
/* CSS */
.search__field {
position: relative;
flex: 1 1 auto;
min-width: 220px;
}
/* Base input styling */
.search__field > input[type="search"] {
width: 100%;
appearance: none;
-webkit-appearance: none;
border: 1px solid var(--search-border);
background: var(--search-bg);
color: var(--search-fg);
border-radius: var(--radius-pill);
padding: .75rem 3.25rem .75rem 1rem; /* space for the clear button on the right */
line-height: 1.2;
box-shadow: 0 1px 0 rgba(0,0,0,.02);
transition: border-color .15s ease, box-shadow .15s ease, background-color .2s ease;
}
.search__field > input::placeholder {
color: var(--search-muted);
}
/* Visible, high-contrast focus */
.search__field > input:focus {
outline: none;
border-color: var(--search-accent);
box-shadow: 0 0 0 var(--ring-size) var(--search-focus);
}
.search__field > input:focus-visible {
outline: none; /* leave it to the custom ring above */
}
/* Clear button inside the field */
.search__clear {
position: absolute;
top: 50%;
right: .5rem;
transform: translateY(-50%);
width: 2rem; height: 2rem;
border-radius: var(--radius-pill);
border: 0;
background: transparent;
color: var(--search-muted);
display: grid;
place-items: center;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity .15s ease, background-color .15s ease, color .15s ease;
}
/* Show clear only when there is text */
.search__field > input:not(:placeholder-shown) + .search__clear {
opacity: 1;
pointer-events: auto;
}
/* Clear button focus and hover */
.search__clear:hover { background: color-mix(in srgb, var(--search-muted) 10%, transparent); }
.search__clear:focus-visible {
outline: none;
box-shadow: 0 0 0 var(--ring-size) var(--search-focus);
}
How This Works (Code Breakdown)
The wrapper creates a positioning context so the clear button can sit on top of the input without breaking layout. Padding on the input reserves space for the clear button so the caret and text never sit under it. The focus state uses a thicker custom ring that works in both light and dark themes, with a color mixed from the accent. This ring is more visible than the default outline while keeping the same keyboard behavior.
The clear button starts inert. opacity: 0 and pointer-events: none keep it out of the tab order when the field is empty. When the input is not :placeholder-shown, the adjacent sibling selector flips the switch. This gives you a clear control without a single extra class. If you want to tailor the pill feel of the input, the large radius is the same trick used when you build an oval with CSS.
Step 4: Building the Buttons
The submit button is a circular control with a CSS magnifying glass. The clear button draws an “X” with pseudo-elements. Both use visible text for screen readers. For a deeper pattern that you can reuse across apps, study how to build a magnifying glass icon in pure CSS and how to draw a CSS X icon.
``
/* CSS */
.search__submit {
position: relative;
flex: none;
width: 2.75rem; height: 2.75rem; /* hit target ≥ 44px at 16px root */
min-width: 2.75rem;
border: 0;
border-radius: 50%;
background: var(--search-accent);
color: var(--search-accent-contrast);
cursor: pointer;
display: grid;
place-items: center;
transition: transform .12s ease, background-color .2s ease, box-shadow .12s ease;
}
/* Visible focus for the icon button */
.search__submit:focus-visible {
outline: none;
box-shadow: 0 0 0 var(--ring-size) var(--search-focus);
}
/* Magnifying glass icon (lens + handle) */
.search__submit::before,
.search__submit::after {
content: "";
position: absolute;
display: block;
}
/* Lens */
.search__submit::before {
width: 14px; height: 14px;
border: 2px solid currentColor;
border-radius: 50%;
transform: translate(-2px, -1px);
}
/* Handle */
.search__submit::after {
width: 10px; height: 2px;
background: currentColor;
transform: translate(8px, 6px) rotate(45deg);
transform-origin: left center;
border-radius: 1px;
}
/* Clear button "X" icon */
.search__clear::before,
.search__clear::after {
content: "";
width: 12px; height: 2px;
background: currentColor;
border-radius: 1px;
}
.search__clear::before { transform: rotate(45deg); }
.search__clear::after { transform: rotate(-45deg); }
How This Works (Code Breakdown)
The submit button uses currentColor so the icon always contrasts with the background. The border-only circle reads cleanly at small sizes. The handle uses a thin rectangle rotated to 45 degrees, which pairs well with a 14px lens at typical body sizes. The button is round and at least 44px in both dimensions, which supports touch targets on mobile.
The clear control relies on two thin rectangles rotated in opposite directions, which creates a clean “X” without any images. Pseudo-elements keep the icon decorative, while the button itself exposes the text label for assistive tech. The focus rings match the input style so users can track where they are with a quick glance.
Advanced Techniques: Micro-Interactions and Motion Preferences
A short animation can help discoverability. Keep it subtle, and honor motion preferences. The submit button scales a bit on hover or focus. The clear button fades in and out smoothly. A tiny script gives the clear button real behavior and announces the change.
``
/* CSS */
.search__submit:hover { transform: translateZ(0) scale(1.04); }
.search__submit:active { transform: translateZ(0) scale(0.98); }
/* Smooth fade for clear button is already in transitions above */
@media (prefers-reduced-motion: reduce) {
.search__submit,
.search__clear {
transition: none;
}
}
``
/* CSS */
// JS
// Progressive enhancement for the clear button and Escape key
(() => {
const form = document.querySelector('.search');
if (!form) return;
const input = form.querySelector('input[type="search"]');
const clear = form.querySelector('.search__clear');
const status = form.querySelector('.sr-status');
function clearField() {
if (!input.value) return;
input.value = "";
input.dispatchEvent(new Event('input', { bubbles: true }));
input.focus();
if (status) status.textContent = "Cleared.";
}
clear?.addEventListener('click', clearField);
input?.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
e.preventDefault();
clearField();
}
});
// Optional: announce the value on submit for screen reader confirmation
form?.addEventListener('submit', () => {
if (status && input) status.textContent = `Searching for "${input.value}"`;
});
})();
Accessibility & Performance
Accessibility
The form uses role="search" to expose a known landmark. The visible label is present in the DOM and connected to the input with for and id, which gives the field a strong, stable name. The submit and clear buttons both include readable text inside a visually hidden span and an aria-label as a backup. The magnifying glass and “X” are drawn with pseudo-elements, which do not add extra announcements.
The clear button appears only when the field has content, which reduces tab stops and chatter. That change is paired with a live region that announces “Cleared” so screen reader users do not wonder where their text went. Keyboard users get a strong focus ring across all interactive elements. The submit button is a full-size hit target, which helps touch users.
The motion rules listen to prefers-reduced-motion, so animations step back for users who request less motion. The color set reaches comfortable contrast for both themes. Test with a high-contrast theme and increase --ring-size if users need an even stronger focus style.
Performance
The icon work happens in CSS with pseudo-elements, which keeps the markup light and avoids fetching icon fonts or images. Transitions run on transform and opacity, which map to GPU-friendly properties. The script only binds a few events and avoids layout thrash. The component does not rely on complex painting or large shadows, so the cost stays low even on mid-range devices.
Ship It With Confidence
You built a search bar that feels familiar, looks clear at a glance, and reads well to assistive tech. You drew the magnifying glass and the clear “X” with CSS, delivered keyboard and screen reader support, and respected motion preferences. Extend it with suggestion lists, or refine the icon style with techniques from the shapes library; you now have a dependable base you can drop into any project.