Textové pole s našeptávačem - Jak na přístupnost

Spravce 21.10.2022 – 12:01

Popis vzoru

Textové pole s našeptávačem je formulářový prvek, nazývaný někdy také jako combobox, který uživateli umožňuje zadání libovolného textu, přičemž během jeho zadávání je možné si psaní usnadnit výběrem hodnoty z předem určeného seznamu. Tento seznam se průběžně aktualizuje tak, že nabízí jen hodnoty začínající na text, jež je v textovém poli už zadán.

Ovládání pomocí klávesnice

  • Šipka dolů:

    • Jestliže je fokus na textovém poli, tak rozbalí seznam našeptávače a přesune fokus na jeho první nabízenou položku.

    • Jestliže je fokus v seznamu našeptávače, tak přesune fokus na následující položku v tomto seznamu. Pokud je fokus na poslední položce seznamu, tak přesune fokus na jeho první položku.

  • Šipka nahoru:

    • Jestliže je fokus na textovém poli, tak rozbalí seznam našeptávače a přesune fokus na jeho poslední nabízenou položku.

    • Jestliže je fokus v seznamu našeptávače, tak přesune fokus na předchozí položku v tomto seznamu. Pokud je fokus na první položce seznamu, tak přesune fokus na jeho poslední položku.

  • Enter:

    • Jestliže je fokus v seznamu našeptávače, tak nastaví hodnotu textového pole na právě vybranou položku v seznamu, přesune fokus do textového pole a sbalí seznam našeptávače.

  • Escape:

    • Jestliže je fokus v  seznamu našeptávače, tak pouze přesune fokus do textového pole a sbalí seznam našeptávače.

Požadavky na přístupnost

Textové pole

  • Doporučujeme implementovat textové pole pomocí elementu <input type=“text“>

  • Textové pole by mělo být pojmenováno. Toho lze docílit pomocí na něj navázaného elementu <label> nebo atributem aria-label nastaveném na tomto textovém poli.

  • Textové pole by mělo mít nastavený atribut role=“combobox“.

  • Textové pole by mělo mít dynamicky nastaveno atribut aria-expanded s hodnotou „true“ v momentě, kdy je našeptávaný seznam rozbalen, a s hodnotou „false“ v momentě, kdy je sbalen.

  • Textové pole by mělo mít nastaveno atribut aria-autocomplete=“list“.

  • Textové pole by mělo mít nastaveno atribut aria-controls odkazující na element našeptávaného seznamu.

Našeptávaný seznam

  • Doporučujeme implementovat našeptávaný seznam pomocí elementu <ul> a jeho položky pomocí <li>.

  • Seznam by měl být pojmenován pro odečítače pomocí atributu aria-label.

  • Seznam by měl mít nastavený atribut role=“listbox“ a jeho položky atribut role=“option“.

Tlačítko pro rozbalení našeptávaného seznamu

Toto tlačítko slouží uživatelům používajícím myš k rozbalení našeptávaného seznamu.

  • Doporučujeme tlačítko implementovat pomocí elementu <button type=“button“>.

  • Jestliže je tlačítko realizováno jako SVG ikona nebo bitmapový obrázek, tak by mělo být pojmenováno pro odečítače pomocí atributu aria-label.

  • Tlačítko by mělo mít nastavený atribut tabindex=“-1“. To zajistí, že tlačítko nebude zaměřitelné tabulátorem.

  • Tlačítko by mělo mít dynamicky nastaveno atribut aria-expanded s hodnotou „true“ v momentě, kdy je našeptávaný seznam rozbalen, a s hodnotou „false“ v momentě, kdy je sbalen.

  • Tlačítko by mělo mít nastaveno atribut aria-controls odkazující na element našeptávaného seznamu.

Funkční ukázka

Zdrojový kód

HTML

<p>Začněte psát název nějaké země v angličtině:</p>

    <form>
      <label for="cb1-input">Země</label>
      <div class="combobox combobox-list">
        <div class="group">
          <input type="text" role="combobox" id="cb1-input" autocomplete="off" aria-autocomplete="list"
            aria-expanded="false" aria-controls="cb1-listbox">
    
          <button type="button" id="cb1-button" tabindex="-1" aria-label="Seznam zemí" aria-expanded="false"
            aria-controls="cb1-listbox">
            <svg width="18" height="16" aria-hidden="true" focusable="false" style="forced-color-adjust: auto">
              <polygon class="arrow" stroke-width="0" fill-opacity="0.75" fill="currentcolor" points="3,6 15,6 9,14">
              </polygon>
            </svg>
          </button>
        </div>
    
        <ul role="listbox" id="cb1-listbox" aria-label="Země">
          <li role="option">Afghanistan</li>
          <li role="option">Albania</li>
          <li role="option">Algeria</li>
          <li role="option">Andorra</li>
          <li role="option">Angola</li>
         ...
          <li role="option">Venezuela</li>
          <li role="option">Vietnam</li>
          <li role="option">Virgin Islands (US)</li>
          <li role="option">Yemen</li>
          <li role="option">Zambia</li>
          <li role="option">Zimbabwe</li>
        </ul>
    </form>

Zdrojový kód ke stažení

Související kritéria úspěšnosti WCAG

Výše popsaná implementace textového pole s našeptávačem splňuje především následující kritéria úspěšnosti Pokynů pro zpřístupnění webového obsahu WCAG (Web Content Accessibility Guidelines):

Použité zdroje informací

Štítky

přístupnost
Jak na přístupnost