M

MLOG

Hrvatski

Osigurajte inkluzivna web iskustva za korisnike diljem svijeta implementacijom pristupačnih oznaka obrazaca. Naučite najbolje prakse za usklađenost s WCAG-om i poboljšanu upotrebljivost.

Oznake obrazaca: Osnovni zahtjevi za pristupačnost polja za unos

Obrasci su temeljni dio weba. Od jednostavnih kontaktnih obrazaca do složenih naplata u e-trgovini, oni omogućuju korisnicima interakciju s web stranicama i aplikacijama. Međutim, loše dizajnirani obrasci mogu stvoriti značajne prepreke za korisnike s invaliditetom. Ključan element u stvaranju pristupačnih obrazaca je pravilna upotreba oznaka obrazaca. Ovaj vodič pruža sveobuhvatan pregled zahtjeva za pristupačnost oznaka obrazaca, osiguravajući da su vaši obrasci upotrebljivi za sve, bez obzira na njihove sposobnosti.

Zašto su pristupačne oznake obrazaca važne?

Pristupačne oznake obrazaca ključne su iz nekoliko razloga:

Razumijevanje WCAG zahtjeva za oznake obrazaca

WCAG pruža specifične smjernice za osiguravanje pristupačnosti obrazaca. Evo ključnih zahtjeva vezanih uz oznake obrazaca:

WCAG 2.1 Kriterij uspješnosti 1.1.1 Netekstualni sadržaj (Razina A)

Iako se ne odnosi izravno na oznake, ovaj kriterij naglašava važnost pružanja tekstualnih alternativa za sav netekstualni sadržaj, uključujući CAPTCHA-e i slike koje se koriste unutar obrazaca. Pravilno označeni obrazac ključan je za pružanje konteksta tim alternativama.

WCAG 2.1 Kriterij uspješnosti 1.3.1 Informacije i odnosi (Razina A)

Informacije, struktura i odnosi koji se prenose prezentacijom trebaju biti programski odredivi ili dostupni u tekstu. To znači da odnos između oznake i odgovarajućeg polja za unos mora biti eksplicitno definiran u HTML kodu.

WCAG 2.1 Kriterij uspješnosti 2.4.6 Naslovi i oznake (Razina AA)

Naslovi i oznake opisuju temu ili svrhu. Oznake obrazaca pružaju opisni kontekst za polja za unos, olakšavajući korisnicima razumijevanje strukture obrasca i njegovo točno ispunjavanje.

WCAG 2.1 Kriterij uspješnosti 3.3.2 Oznake ili upute (Razina A)

Oznake ili upute pružaju se kada sadržaj zahtijeva unos od strane korisnika.

WCAG 2.1 Kriterij uspješnosti 4.1.2 Naziv, uloga, vrijednost (Razina A)

Za sve komponente korisničkog sučelja (uključujući, ali ne ograničavajući se na elemente obrasca, poveznice i komponente generirane skriptama), naziv i uloga mogu se programski odrediti; stanja, svojstva i vrijednosti koje korisnik može postaviti mogu se programski postaviti; a obavijest o promjenama tih stavki dostupna je korisničkim agentima, uključujući pomoćne tehnologije.

Najbolje prakse za implementaciju pristupačnih oznaka obrazaca

Evo nekoliko najboljih praksi za stvaranje pristupačnih oznaka obrazaca:

1. Koristite element <label>

Element <label> primarni je način povezivanja tekstualne oznake s poljem za unos. Pruža semantičku i strukturnu vezu između oznake i kontrole. Atribut for elementa <label> treba odgovarati atributu id odgovarajućeg polja za unos.

Primjer:


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

Neispravan primjer (izbjegavati):


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

Korištenje elementa span umjesto label ne stvara potrebnu programsku povezanost, čineći ga nepristupačnim čitačima zaslona.

2. Eksplicitno povežite oznake s poljima za unos

Osigurajte jasnu i eksplicitnu povezanost između oznake i polja za unos pomoću atributa for i id kao što je prikazano u gornjem primjeru.

3. Pravilno pozicionirajte oznake

Položaj oznaka može utjecati na upotrebljivost. Općenito, oznake bi trebale biti postavljene:

Razmotrite kulturne norme prilikom pozicioniranja oznaka. U nekim jezicima, oznake se tradicionalno postavljaju nakon polja za unos. Prilagodite svoj dizajn kako biste udovoljili tim preferencijama.

4. Pružite jasne i sažete oznake

Oznake bi trebale biti kratke, opisne i lake za razumijevanje. Izbjegavajte žargon ili tehničke izraze koji mogu zbuniti korisnike. Na primjer, umjesto "UserID", koristite "Korisničko ime" ili "E-mail adresa". Razmislite o lokalizaciji. Osigurajte da se vaše oznake lako prevode na različite jezike zadržavajući svoje značenje.

5. Koristite ARIA atribute kada je potrebno

ARIA (Accessible Rich Internet Applications) atributi mogu poboljšati pristupačnost elemenata obrasca, posebno u složenim scenarijima. Međutim, koristite ARIA razborito i samo kada su nativni HTML elementi i atributi nedovoljni.

Primjer korištenja aria-label:


<input type="search" aria-label="Pretraži web stranicu">

Primjer korištenja aria-labelledby:


<h2 id="newsletter-title">Pretplata na newsletter</h2>
<input type="email" aria-labelledby="newsletter-title" placeholder="Unesite svoju e-mail adresu">

6. Grupirajte povezane elemente obrasca s <fieldset> i <legend>

Element <fieldset> grupira povezane kontrole obrasca, a element <legend> pruža naslov za fieldset. To poboljšava strukturu obrasca i olakšava korisnicima razumijevanje odnosa između različitih polja za unos.

Primjer:


<fieldset>
  <legend>Kontakt informacije</legend>
  <label for="name">Ime:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
</fieldset>

7. Pružite jasne poruke o pogreškama

Kada korisnici naprave pogreške prilikom ispunjavanja obrasca, pružite jasne i informativne poruke o pogreškama koje objašnjavaju što je pošlo po zlu i kako ispraviti pogrešku. Povežite te poruke o pogreškama s odgovarajućim poljima za unos pomoću ARIA atributa poput aria-describedby.

Primjer:


<label for="email">Email:</label>
<input type="email" id="email" name="email" aria-describedby="email-error">
<span id="email-error" class="error-message">Molimo unesite valjanu e-mail adresu.</span>

Osigurajte da je poruka o pogrešci vizualno prepoznatljiva (npr. pomoću boje ili ikona) i programski dostupna pomoćnim tehnologijama.

8. Koristite dovoljan kontrast boja

Osigurajte dovoljan kontrast boja između teksta oznake i boje pozadine kako biste ispunili WCAG zahtjeve. Koristite alat za analizu kontrasta boja kako biste provjerili zadovoljava li omjer kontrasta minimalne zahtjeve (4.5:1 za normalan tekst i 3:1 za veliki tekst). To pomaže korisnicima sa slabim vidom da lakše čitaju oznake.

9. Osigurajte pristupačnost tipkovnicom

Svi elementi obrasca trebaju biti dostupni samo pomoću tipkovnice. Korisnici bi trebali moći navigirati kroz obrazac pomoću tipke Tab i interagirati s kontrolama obrasca pomoću razmaknice ili tipke Enter. Temeljito testirajte svoje obrasce tipkovnicom kako biste osigurali pravilnu pristupačnost tipkovnicom.

10. Testirajte pomoću pomoćnih tehnologija

Najbolji način da osigurate pristupačnost svojih obrazaca je da ih testirate pomoću pomoćnih tehnologija poput čitača zaslona (npr. NVDA, JAWS, VoiceOver). To će vam pomoći identificirati probleme s pristupačnošću koji možda nisu očiti tijekom vizualnog pregleda. Uključite korisnike s invaliditetom u svoj proces testiranja kako biste dobili vrijedne povratne informacije.

Primjeri implementacije pristupačnih oznaka obrazaca

Primjer 1: Jednostavan kontakt obrazac (međunarodna perspektiva)

Razmotrite kontakt obrazac za globalnu publiku. Oznake bi trebale biti jasne, sažete i lako prevodive.


<form>
  <label for="name">Puno ime:</label>
  <input type="text" id="name" name="name"><br><br>

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

  <label for="country">Država:</label>
  <select id="country" name="country">
    <option value="">Odaberite državu</option>
    <option value="us">Sjedinjene Američke Države</option>
    <option value="ca">Kanada</option>
    <option value="uk">Ujedinjeno Kraljevstvo</option>
    <option value="de">Njemačka</option>
    <option value="fr">Francuska</option>
    <option value="jp">Japan</option>
    <option value="au">Australija</option>
    <!-- Dodajte još država -->
  </select><br><br>

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

  <input type="submit" value="Pošalji">
</form>

Primijetite upotrebu "Puno ime" umjesto samo "Ime" radi jasnoće, posebno za kulture gdje prezimena prethode imenima.

Primjer 2: Obrazac za naplatu u e-trgovini

Obrasci za naplatu u e-trgovini često zahtijevaju osjetljive informacije. Jasne oznake i upute ključne su za izgradnju povjerenja i osiguravanje pristupačnosti.


<form>
  <fieldset>
    <legend>Adresa za dostavu</legend>
    <label for="shipping_name">Puno ime:</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">Grad:</label>
    <input type="text" id="shipping_city" name="shipping_city"><br><br>

    <label for="shipping_zip">Poštanski broj:</label>
    <input type="text" id="shipping_zip" name="shipping_zip"><br><br>

    <label for="shipping_country">Država:</label>
    <select id="shipping_country" name="shipping_country">
      <option value="">Odaberite državu</option>
      <option value="us">Sjedinjene Američke Države</option>
      <option value="ca">Kanada</option>
      <!-- Dodajte još država -->
    </select>
  </fieldset>

  <fieldset>
    <legend>Informacije o plaćanju</legend>
    <label for="card_number">Broj kreditne kartice:</label>
    <input type="text" id="card_number" name="card_number"><br><br>

    <label for="expiry_date">Datum isteka (MM/GG):</label>
    <input type="text" id="expiry_date" name="expiry_date" placeholder="MM/GG"><br><br>

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

  <input type="submit" value="Naruči">
</form>

Upotreba fieldseta i legenda jasno organizira obrazac u logičke odjeljke. Tekst rezerviranog mjesta (placeholder) pruža dodatne upute, ali zapamtite da se tekst rezerviranog mjesta ne smije koristiti kao zamjena za oznake.

Primjer 3: Obrazac za registraciju s ARIA atributima

Razmotrite obrazac za registraciju gdje je nadimak neobavezan. Koristeći ARIA atribute, možemo pružiti dodatni kontekst.


<form>
  <label for="username">Korisničko ime:</label>
  <input type="text" id="username" name="username" required><br><br>

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

  <label for="nickname">Nadimak (neobavezno):</label>
  <input type="text" id="nickname" name="nickname" aria-describedby="nickname-info">
  <span id="nickname-info">Ovaj nadimak bit će javno prikazan.</span><br><br>

  <input type="submit" value="Registriraj se">
</form>

Atribut aria-describedby povezuje polje za unos nadimka s elementom span koji pruža dodatne informacije o tome kako će se nadimak koristiti.

Alati za testiranje pristupačnosti obrazaca

Nekoliko alata vam može pomoći u procjeni pristupačnosti vaših obrazaca:

Zaključak

Pristupačne oznake obrazaca ključne su za stvaranje inkluzivnih web iskustava. Slijedeći najbolje prakse navedene u ovom vodiču, možete osigurati da su vaši obrasci upotrebljivi za sve, bez obzira na njihove sposobnosti. Davanje prioriteta pristupačnosti ne koristi samo korisnicima s invaliditetom, već poboljšava i cjelokupnu upotrebljivost vaše web stranice za sve korisnike. Ne zaboravite dosljedno testirati svoje obrasce s pomoćnim tehnologijama i uključiti korisnike s invaliditetom u proces testiranja kako biste dobili vrijedne povratne informacije i kontinuirano poboljšavali pristupačnost svoje web stranice.

Prihvaćanje pristupačnosti nije samo pitanje usklađenosti; radi se o stvaranju inkluzivnijeg i pravednijeg weba za sve. Ulaganjem u pristupačan dizajn obrazaca, pokazujete predanost inkluzivnosti i stvarate bolje korisničko iskustvo za sve.