Popisky formulárov: Základné požiadavky na prístupnosť vstupných polí

Formuláre sú základnou súčasťou webu. Od jednoduchých kontaktných formulárov až po zložité platobné procesy v e-shopoch umožňujú používateľom interagovať s webovými stránkami a aplikáciami. Avšak, zle navrhnuté formuláre môžu vytvárať značné bariéry pre používateľov so zdravotným postihnutím. Kľúčovým prvkom pri vytváraní prístupných formulárov je správne používanie popisov formulárov. Táto príručka poskytuje komplexný prehľad požiadaviek na prístupnosť popisov formulárov, aby sa zabezpečilo, že vaše formuláre budú použiteľné pre každého, bez ohľadu na jeho schopnosti.

Prečo sú prístupné popisky formulárov dôležité?

Prístupné popisky formulárov sú kľúčové z niekoľkých dôvodov:

Použiteľnosť: Jasné a stručné popisky pomáhajú všetkým používateľom pochopiť účel každého vstupného poľa, čím sa zlepšuje celková použiteľnosť.
Prístupnosť: Popisky poskytujú dôležité informácie pre používateľov so zdravotným postihnutím, najmä pre tých, ktorí sa spoliehajú na asistenčné technológie, ako sú čítačky obrazovky. Bez správnych popisov nemusia byť títo používatelia schopní formuláre vyplniť.
Súlad s WCAG: Pokyny pre prístupnosť webového obsahu (WCAG) vyžadujú, aby všetky ovládacie prvky formulára mali priradené popisky. Splnenie týchto pokynov zabezpečuje, že vaša webová stránka je prístupná a v mnohých jurisdikciách v súlade so zákonom.
SEO: Hoci to nie je priamy faktor hodnotenia, prístupné webové stránky majú tendenciu poskytovať lepší používateľský zážitok, čo môže nepriamo zlepšiť výkon SEO.

Pochopenie požiadaviek WCAG pre popisky formulárov

WCAG poskytuje špecifické pokyny na zabezpečenie prístupnosti formulárov. Tu sú kľúčové požiadavky týkajúce sa popisov formulárov:

Kritérium úspešnosti WCAG 2.1 1.1.1 Netextový obsah (Úroveň A)

Hoci sa toto kritérium priamo netýka popisov, zdôrazňuje dôležitosť poskytovania textových alternatív pre všetok netextový obsah, vrátane CAPTCHA a obrázkov použitých vo formulároch. Správne označený formulár je kľúčový pre poskytnutie kontextu týmto alternatívam.

Kritérium úspešnosti WCAG 2.1 1.3.1 Informácie a vzťahy (Úroveň A)

Informácie, štruktúra a vzťahy sprostredkované prostredníctvom prezentácie by mali byť programovo zistiteľné alebo dostupné v texte. To znamená, že vzťah medzi popiskom a príslušným vstupným poľom musí byť explicitne definovaný v kóde HTML.

Kritérium úspešnosti WCAG 2.1 2.4.6 Nadpisy a popisky (Úroveň AA)

Nadpisy a popisky opisujú tému alebo účel. Popisky formulárov poskytujú popisný kontext pre vstupné polia, čo používateľom uľahčuje pochopenie štruktúry formulára a jeho správne vyplnenie.

Kritérium úspešnosti WCAG 2.1 3.3.2 Popisky alebo inštrukcie (Úroveň A)

Popisky alebo inštrukcie sa poskytujú, keď obsah vyžaduje vstup od používateľa.

Kritérium úspešnosti WCAG 2.1 4.1.2 Názov, rola, hodnota (Úroveň A)

Pre všetky komponenty používateľského rozhrania (vrátane, ale nielen, prvkov formulára, odkazov a komponentov generovaných skriptami) musia byť názov a rola programovo zistiteľné; stavy, vlastnosti a hodnoty, ktoré môže nastaviť používateľ, musia byť programovo nastaviteľné; a oznámenie o zmenách týchto položiek musí byť dostupné pre používateľské agenty, vrátane asistenčných technológií.

Osvedčené postupy pre implementáciu prístupných popisov formulárov

Tu je niekoľko osvedčených postupov pre vytváranie prístupných popisov formulárov:

1. Použite element <label>

Element <label> je primárnym spôsobom, ako priradiť textový popis k vstupnému poľu. Poskytuje sémantické a štrukturálne spojenie medzi popiskom a ovládacím prvkom. Atribút for elementu <label> by sa mal zhodovať s atribútom id príslušného vstupného poľa.

Príklad:


<label for="name">Meno:</label>
<input type="text" id="name" name="name">

Nesprávny príklad (vyhnite sa):


<span>Meno:</span>
<input type="text" id="name" name="name">

Použitie elementu span namiesto label nevytvára potrebné programové prepojenie, čo ho robí neprístupným pre čítačky obrazovky.

2. Explicitne priraďte popisky k vstupným poliam

Zabezpečte jasné a explicitné prepojenie medzi popiskom a vstupným poľom pomocou atribútov for a id, ako je uvedené v príklade vyššie.

3. Umiestnite popisky správne

Umiestnenie popisov môže ovplyvniť použiteľnosť. Všeobecne platí, že popisky by mali byť umiestnené:

Nad vstupným poľom: Toto je často najprístupnejšia a najpoužívanejšia možnosť, najmä pre textové polia a textové oblasti.
Naľavo od vstupného poľa: Bežné, ale môže byť menej efektívne pre používateľov so zrakovým postihnutím, ktorí môžu mať ťažkosti s prehľadávaním stránky.
Pre prepínače a začiarkavacie políčka: Popisky by mali byť umiestnené napravo od ovládacieho prvku.

Pri umiestňovaní popisov zvážte kultúrne zvyklosti. V niektorých jazykoch sa popisky tradične umiestňujú za vstupné pole. Prispôsobte svoj dizajn tak, aby vyhovoval týmto preferenciám.

4. Poskytnite jasné a stručné popisky

Popisky by mali byť krátke, popisné a ľahko zrozumiteľné. Vyhnite sa žargónu alebo technickým termínom, ktoré by mohli používateľov zmiasť. Napríklad namiesto "UserID" použite "Používateľské meno" alebo "E-mailová adresa". Zvážte lokalizáciu. Uistite sa, že vaše popisky sa dajú ľahko preložiť do rôznych jazykov pri zachovaní ich významu.

5. V prípade potreby použite atribúty ARIA

Atribúty ARIA (Accessible Rich Internet Applications) môžu zlepšiť prístupnosť prvkov formulára, najmä v zložitých scenároch. Používajte však ARIA uvážlivo a len vtedy, keď natívne prvky a atribúty HTML nie sú postačujúce.

aria-label: Tento atribút použite na poskytnutie popisu, keď viditeľný popis nie je možný alebo praktický.
aria-labelledby: Tento atribút použite na odkazovanie na ID existujúceho prvku na stránke, ktorý má slúžiť ako popis.
aria-describedby: Tento atribút použite na poskytnutie dodatočných informácií alebo pokynov pre vstupné pole. Je to užitočné na poskytnutie kontextu alebo vysvetlenie pravidiel validácie.

Príklad použitia aria-label:


<input type="search" aria-label="Prehľadať webovú stránku">

Príklad použitia aria-labelledby:


<h2 id="newsletter-title">Odber noviniek</h2>
<input type="email" aria-labelledby="newsletter-title" placeholder="Zadajte vašu e-mailovú adresu">

6. Zoskupte súvisiace prvky formulára pomocou <fieldset> a <legend>

Element <fieldset> zoskupuje súvisiace ovládacie prvky formulára a element <legend> poskytuje nadpis pre fieldset. To zlepšuje štruktúru formulára a uľahčuje používateľom pochopenie vzťahov medzi rôznymi vstupnými poliami.

Príklad:


<fieldset>
  <legend>Kontaktné informácie</legend>
  <label for="name">Meno:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email">
</fieldset>

7. Poskytnite jasné chybové hlásenia

Keď používatelia urobia chyby pri vypĺňaní formulára, poskytnite jasné a informatívne chybové hlásenia, ktoré vysvetľujú, čo sa pokazilo a ako chybu opraviť. Priraďte tieto chybové hlásenia k príslušným vstupným poliam pomocou atribútov ARIA, ako je aria-describedby.

Príklad:


<label for="email">E-mail:</label>
<input type="email" id="email" name="email" aria-describedby="email-error">
<span id="email-error" class="error-message">Zadajte prosím platnú e-mailovú adresu.</span>

Uistite sa, že chybové hlásenie je vizuálne odlíšené (napr. pomocou farby alebo ikon) a programovo prístupné pre asistenčné technológie.

8. Použite dostatočný farebný kontrast

Zabezpečte dostatočný farebný kontrast medzi textom popisu a farbou pozadia, aby ste splnili požiadavky WCAG. Použite nástroj na analýzu farebného kontrastu na overenie, či pomer kontrastu spĺňa minimálne požiadavky (4.5:1 pre bežný text a 3:1 pre veľký text). To pomáha používateľom so slabým zrakom ľahšie čítať popisky.

9. Zabezpečte prístupnosť z klávesnice

Všetky prvky formulára by mali byť prístupné len pomocou klávesnice. Používatelia by mali byť schopní navigovať formulárom pomocou klávesu Tab a interagovať s ovládacími prvkami formulára pomocou medzerníka alebo klávesu Enter. Dôkladne otestujte svoje formuláre pomocou klávesnice, aby ste zabezpečili správnu prístupnosť z klávesnice.

10. Testujte s asistenčnými technológiami

Najlepším spôsobom, ako zabezpečiť prístupnosť vašich formulárov, je otestovať ich s asistenčnými technológiami, ako sú čítačky obrazovky (napr. NVDA, JAWS, VoiceOver). To vám pomôže identifikovať akékoľvek problémy s prístupnosťou, ktoré nemusia byť zrejmé pri vizuálnej kontrole. Zapojte do testovacieho procesu používateľov so zdravotným postihnutím, aby ste získali cennú spätnú väzbu.

Príklady implementácií prístupných popisov formulárov

Príklad 1: Jednoduchý kontaktný formulár (medzinárodná perspektíva)

Zvážte kontaktný formulár pre globálne publikum. Popisky by mali byť jasné, stručné a ľahko preložiteľné.


<form>
  <label for="name">Celé meno:</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">E-mailová adresa:</label>
  <input type="email" id="email" name="email"><br><br>

  <label for="country">Krajina:</label>
  <select id="country" name="country">
    <option value="">Vyberte krajinu</option>
    <option value="us">Spojené štáty</option>
    <option value="ca">Kanada</option>
    <option value="uk">Spojené kráľovstvo</option>
    <option value="de">Nemecko</option>
    <option value="fr">Francúzsko</option>
    <option value="jp">Japonsko</option>
    <option value="au">Austrália</option>
    <!-- Pridajte ďalšie krajiny -->
  </select><br><br>

  <label for="message">Správa:</label>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

  <input type="submit" value="Odoslať">
</form>

Všimnite si použitie "Celé meno" namiesto len "Meno" pre jasnosť, najmä pre kultúry, kde priezviská predchádzajú krstným menám.

Príklad 2: Formulár pre platbu v e-shope

Formuláre pre platbu v e-shopoch často vyžadujú citlivé informácie. Jasné popisky a pokyny sú kľúčové pre budovanie dôvery a zabezpečenie prístupnosti.


<form>
  <fieldset>
    <legend>Doručovacia adresa</legend>
    <label for="shipping_name">Celé meno:</label>
    <input type="text" id="shipping_name" name="shipping_name"><br><br>

    <label for="shipping_address">Adresa:</label>
    <input type="text" id="shipping_address" name="shipping_address"><br><br>

    <label for="shipping_city">Mesto:</label>
    <input type="text" id="shipping_city" name="shipping_city"><br><br>

    <label for="shipping_zip">PSČ/Zip kód:</label>
    <input type="text" id="shipping_zip" name="shipping_zip"><br><br>

    <label for="shipping_country">Krajina:</label>
    <select id="shipping_country" name="shipping_country">
      <option value="">Vyberte krajinu</option>
      <option value="us">Spojené štáty</option>
      <option value="ca">Kanada</option>
      <!-- Pridajte ďalšie krajiny -->
    </select>
  </fieldset>

  <fieldset>
    <legend>Platobné informácie</legend>
    <label for="card_number">Číslo kreditnej karty:</label>
    <input type="text" id="card_number" name="card_number"><br><br>

    <label for="expiry_date">Dátum exspirácie (MM/RR):</label>
    <input type="text" id="expiry_date" name="expiry_date" placeholder="MM/RR"><br><br>

    <label for="cvv">CVV:</label>
    <input type="text" id="cvv" name="cvv"><br><br>
  </fieldset>

  <input type="submit" value="Odoslať objednávku">
</form>

Použitie fieldsetov a legend jasne organizuje formulár do logických sekcií. Placeholder text poskytuje dodatočné usmernenie, ale pamätajte, že placeholder text by nemal byť použitý ako náhrada za popisky.

Príklad 3: Registračný formulár s atribútmi ARIA

Zvážte registračný formulár, kde je prezývka nepovinná. Pomocou atribútov ARIA môžeme poskytnúť dodatočný kontext.


<form>
  <label for="username">Používateľské meno:</label>
  <input type="text" id="username" name="username" required><br><br>

  <label for="password">Heslo:</label>
  <input type="password" id="password" name="password" required><br><br>

  <label for="nickname">Prezývka (nepovinné):</label>
  <input type="text" id="nickname" name="nickname" aria-describedby="nickname-info">
  <span id="nickname-info">Táto prezývka bude zobrazená verejne.</span><br><br>

  <input type="submit" value="Registrovať">
</form>

Atribút aria-describedby prepája vstupné pole pre prezývku s elementom span, ktorý poskytuje dodatočné informácie o tom, ako bude prezývka použitá.

Nástroje na testovanie prístupnosti formulárov

Niekoľko nástrojov vám môže pomôcť vyhodnotiť prístupnosť vašich formulárov:

Accessibility Insights: Rozšírenie prehliadača, ktoré identifikuje problémy s prístupnosťou na webových stránkach.
WAVE (Web Accessibility Evaluation Tool): Online nástroj, ktorý hodnotí webové stránky na chyby prístupnosti.
axe DevTools: Rozšírenie prehliadača, ktoré vykonáva automatizované testovanie prístupnosti.
Čítačky obrazovky (NVDA, JAWS, VoiceOver): Testovanie s čítačkami obrazovky je nevyhnutné na identifikáciu problémov s prístupnosťou, ktoré nemusia byť zrejmé pri automatizovanom testovaní.

Záver

Prístupné popisky formulárov sú nevyhnutné pre vytváranie inkluzívnych webových zážitkov. Dodržiavaním osvedčených postupov uvedených v tejto príručke môžete zabezpečiť, že vaše formuláre budú použiteľné pre každého, bez ohľadu na jeho schopnosti. Uprednostňovanie prístupnosti neprospieva len používateľom so zdravotným postihnutím, ale zlepšuje aj celkovú použiteľnosť vašej webovej stránky pre všetkých používateľov. Nezabudnite pravidelne testovať svoje formuláre s asistenčnými technológiami a zapojiť do testovacieho procesu používateľov so zdravotným postihnutím, aby ste získali cennú spätnú väzbu a neustále zlepšovali prístupnosť vašej webovej stránky.

Prijatie prístupnosti nie je len otázkou dodržiavania predpisov; je to o vytváraní inkluzívnejšieho a spravodlivejšieho webu pre všetkých. Investovaním do prístupného dizajnu formulárov preukazujete záväzok k inkluzivite a vytvárate lepší používateľský zážitok pre všetkých.