Vyhľadávanie

Prečo je to prístupné

Vyhľadávanie v hlavičke je obyčajný formulár s menovkou a tlačidlom. S JavaScriptom sa pole stane comboboxom podľa vzoru APG: zoznam výsledkov má rolu listbox, práve zvýraznený výsledok je pripojený cez aria-activedescendant, takže zameranie zostáva v poli a človek môže ďalej písať. Stavový riadok „12 výsledkov“ prečíta čítač obrazovky automaticky.

Vyhľadáva sa v indexe, ktorý vzniká pri zostavení webového sídla (Pagefind (externý odkaz)), priamo v prehliadači a bez odosielania dát na server. Index sa načíta až pri prvom kliknutí do poľa. Diakritika nie je nutná: „pristupnost“ nájde aj „prístupnosť“.

Vyskúšajte si sami

Klávesnica

Tab do poľa v hlavičke, napíšte „prístupnosť“.
↓ a ↑ prechádzajú výsledky, Enter otvorí zvýraznený, Escape zoznam zavrie.
Enter bez zvýrazneného výsledku otvorí stránku vyhľadávania so všetkými výsledkami.

Čítač obrazovky

Po napísaní výrazu počujete počet výsledkov; pri pohybe šípkami názov a úryvok každého výsledku.

Priblíženie a reflow

Zoznam výsledkov má obmedzenú výšku a roluje sa; pri 320 px šírke zaberá celú šírku obrazovky.

Bez JavaScriptu

Formulár sa odošle na mapu webového sídla, ktorá ponúka všetky stránky a upozorní, že vyhľadávanie potrebuje JavaScript. Hľadaný výraz zostáva v adrese.

Kód

<ad-search data-lang="sk" data-search-page="/hladat/" data-strings='{ "results": { "one": "{n} výsledok", "few": "{n} výsledky", "other": "{n} výsledkov" } }'>
  <form role="search" method="get" action="/mapa-weboveho-sidla/">
    <label for="q">Hľadať na webovom sídle</label>
    <input id="q" name="q" type="search" autocomplete="off">
    <button type="submit">Hľadať</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ážka