Vyhledávání

Proč je to přístupné

Vyhledávání v záhlaví je obyčejný formulář s popiskem a tlačítkem. S JavaScriptem se pole stane comboboxem podle vzoru APG: seznam výsledků má roli listbox, právě zvýrazněný výsledek je připojen přes aria-activedescendant, takže zaměření zůstává v poli a člověk může dál psát. Stavový řádek „12 výsledků“ přečte odečítač obrazovky automaticky.

Vyhledává se v indexu, který vzniká při sestavení webu (Pagefind (externí odkaz)), přímo v prohlížeči a bez odesílání dat na server. Index se načte až při prvním kliknutí do pole. Diakritika není nutná: „pristupnost“ najde i „přístupnost“.

Vyzkoušejte si sami

Klávesnice

Tab do pole v záhlaví, napište „přístupnost“.
↓ a ↑ procházejí výsledky, Enter otevře zvýrazněný, Escape seznam zavře.
Enter bez zvýrazněného výsledku otevře stránku vyhledávání se všemi výsledky.

Odečítač obrazovky

Po napsání výrazu uslyšíte počet výsledků; při pohybu šipkami název a úryvek každého výsledku.

Zvětšení a přizpůsobení obsahu

Seznam výsledků má omezenou výšku a roluje se; při šířce 320 px zabírá celou šířku obrazovky.

Bez JavaScriptu

Formulář se odešle na mapu webu, která nabídne všechny stránky a upozorní, že vyhledávání potřebuje JavaScript. Hledaný výraz zůstává v adrese.

Kód

<ad-search data-lang="cs" data-search-page="/cs/hledat/" data-strings='{ "results": { "one": "{n} výsledek", "few": "{n} výsledky", "other": "{n} výsledků" } }'>
  <form role="search" method="get" action="/cs/mapa-webu/">
    <label for="q">Hledat na webu</label>
    <input id="q" name="q" type="search" autocomplete="off">
    <button type="submit">Hledat</button>
  </form>
</ad-search>
<link rel="stylesheet" href="/assets/js/components/ad-search/ad-search.css">
<script type="module" src="/assets/js/components/ad-search/ad-search.js"></script>

Ukázka