# Accessibility What the storefront components do for keyboard, focus and screen reader users, and what stays your shop's to set. The components aim at WCAG 2.2 AA. Underneath they are links and GET forms, so search, filters, sort and paging work before the script loads, and without it. Every state a shopper reaches is a URL: ```text title="URLs the components write" /suche?q=couch the search box's form /wohnen/sofas?color=grey a color ticked in the filters' form /wohnen/sofas?color=grey&sort=price_asc a sort chosen in its select ``` `/suche` is the home store's search page (suche: search). With script, the components add what the sections below say. ## Announcements `StorefrontProvider` renders a polite and an assertive live region after the page. A message is said once it has held for 500 ms and differs from the last; what a page says while it loads is not, since a screen reader reads the page. Say your own with `useAnnouncement`, urgently only for a failure: ```tsx twoslash title="app/unavailable.tsx" import { useAnnouncement } from "@orbsearch/react"; // "Search is not available right now" export function Unavailable() { useAnnouncement("Die Suche ist gerade nicht erreichbar", true); return

Die Suche ist gerade nicht erreichbar

; } ``` ## Search box - **A labelled combobox** in a `` landmark, with a submit button. The list opens when suggestions arrive for typed text, never on focus. - **Groups read by name:** text suggestions, the text in a category, each section's links and the products, each named as the arrow keys enter it. - **Focus stays in the box** while the arrow keys move, and a highlighted text suggestion shows in it. Escape closes the list and restores what was typed. - **One count** of the suggestions is announced once typing settles. - **What a suggestion adds** to the typed text is semibold, while its name reads as plain text; `SuggestionText` does the same for a row of your own. ## Listing and results - **The title is the one `h1`.** When results arrive, the polite region says their count and order, after what the search left out. A page without results is said urgently and offers a next step. - **A tile is an `
`** whose heading is its one link. Its photo has empty alt text, since the name says what it shows. - **Facts are words:** a reduced price reads "was … now …", a rating its stars and reviews, and badges, delivery and stock are text. A sponsored product's heading starts with "Anzeige" (ad). - **A banner is no article,** so moving by articles meets the products alone. Its heading is its one link, and its image's alt text follows the words. - **`busy`,** set by your router on `ListingPage`, marks the results `aria-busy` while the next page loads; their photos dim, their text keeps its contrast. - **"Load more" is a link** to the next page. It appends the page, moves focus to the first new item and says how many came. There is no infinite scroll. - **The trail** is a labelled `