Problém s automatickým doplňováním a jak jej opravit

O

Automatické doplňování je úžasný nástroj pro váš web. Pomáhá vašim uživatelům najít to, co hledají, hodně rychleji, než kdyby vše napsali a klikli na tlačítko Hledat.

Pokud například používám vyhledávač hlavních měst s názvem „Capital Search“ k hledání „Nicosia“, místo zadávání celého názvu a kliknutí na tlačítko Hledat stačí zadat první 2–3 písmena („nic“ ) a výsledek se zobrazí přímo pod textovým polem. Teď na to stačí kliknout a přesměruje mě to přímo na web!

Interaktivní stránka dostupná na CodePen

Tato okamžitá interakce s vašimi uživateli však přichází s malým, ale důležitým problémem.

Rychlý přehled našeho kódu automatického doplňování

Než prozkoumáme problém s automatickým doplňováním, podívejme se, jak aktuálně vypadá náš kód. Celý kód je k dispozici zde. Způsob, jakým to funguje, je docela jednoduchý:

  1. Uživatel zadá do vstupního pole
  2. Pokaždé, když zadávají, je filtrován seznam hlavních měst, aby se získal seznam všech hlavních měst začínající zadáním uživatele. Pokud například napíšu „n“, vrátí se jako výsledky vyhledávání města „Nassau“, „Nicosia“, „Nairobi“ atd.
  3. Výsledky se zobrazí jako seznam pod vstupním polem.
  4. Kliknutím na položku se uživatel dostane na stránku města Wikipedie.

Problém

Problém s automatickým doplňováním souvisí s přístupností, konkrétně se softwarem pro čtení obrazovky. Pokaždé, když uživatel zadá do vstupního pole, změní se stav stránky:výsledky automatického doplňování se aktualizují a zobrazí se vašemu uživateli.

Čtečka obrazovky to však nerozpozná jako akci, o které má uživatele informovat . Když získají fokus, oznámí záhlaví („Vyhledávání velkých písmen“) a vstupní pole, ale nikoli výsledky vyhledávání.

Vy, jako vývojář, budete muset něco zavést, abyste mohli uživateli čtečky obrazovky při zadávání vyhledávání sdělit, kolik výsledků bylo nalezeno.

Řešení:"Živé oblasti"

Řešením tohoto problému je to, čemu říkáme „živá oblast ARIA“. V podstatě používáme aria-live tag pro vytvoření <div> . Kdykoli je tato značka zahrnuta, čtečka obrazovky oznámí jakoukoli změnu, ke které dojde v jejím obsahu. Vypadá to takto:

<div role="region" aria-live="polite">0 results found</div>

Pokud se obsah změní na „2 výsledky nalezeny“, čtečka obrazovky o tom uživatele informuje.

Aktualizace našeho kódu

Nyní musíme aktualizovat náš kód z výše uvedeného odkazu CodePen, aby zahrnoval naši živou oblast.

Nejprve přidejte oblast do našeho HTML:

<div id="page">
  <div id="container">
    <h1>Capital Search</h1>
    <div id="search">
      <div id="autocomplete">
        <input type="text" id="query" onkeyup="respondToSearchboxChange()"/>
        <ul id="results">
        </ul>
      </div>
    </div>
  </div>

</div>
+ <div id="live-region" role="region" aria-live="polite"></div>

Nyní musíme aktualizovat náš kód Javascript, abychom aktualizovali naši živou oblast pokaždé, když dojde ke změně ve výsledcích vyhledávání:

function respondToSearchboxChange(){
  var input = document.querySelector("#query").value

  var searchResults = []


  if(input.length > 0){
    searchResults = capitals.filter((capital) => capital.toLowerCase().startsWith(input))
  }
+  
+  document.querySelector("#live-region").innerHTML = `${searchResults.length} results found`

  document.querySelector("ul#results").innerHTML = searchResults.map((result) =>
    `<li><a href="https://en.wikipedia.org/wiki/${result}" target="_blank" rel="noreferrer">${result}</a></li>`
  ).join("")
}

Nakonec, protože nechceme, aby byla oblast viditelná na samotné stránce, skryjeme ji pomocí CSS:

#live-region{
    position: fixed;
    top: -100px;
}

Celý kód je k dispozici na CodePen

A je to! Vaše automatické doplňování je nyní připraveno a přístupné uživatelům čtečky obrazovky. Pokaždé, když se počet výsledků změní, čtečka obrazovky o tom uživatele informuje. Skvělé!

Dejte mi vědět, buď zde nebo na Twitteru, jak jste našli tento tutoriál. Pomohlo vám to zpřístupnit funkci automatického doplňování?