M

MLOG

Lietuvių

Užtikrinkite įtraukią žiniatinklio patirtį vartotojams visame pasaulyje, įdiegdami prieinamas formų etiketes. Išmokite geriausių WCAG atitikties ir geresnio naudojimo praktikų.

Formų etiketės: esminiai įvesties laukų prieinamumo reikalavimai

Formos yra pagrindinė interneto dalis. Nuo paprastų kontaktų formų iki sudėtingų el. prekybos atsiskaitymo procesų, jos leidžia vartotojams sąveikauti su svetainėmis ir programomis. Tačiau prastai sukurtos formos gali sukelti didelių kliūčių vartotojams su negalia. Svarbus elementas kuriant prieinamas formas yra teisingas formų etikečių naudojimas. Šiame vadove pateikiama išsami formų etikečių prieinamumo reikalavimų apžvalga, užtikrinanti, kad jūsų formomis galėtų naudotis visi, nepriklausomai nuo jų gebėjimų.

Kodėl prieinamos formų etiketės yra svarbios?

Prieinamos formų etiketės yra gyvybiškai svarbios dėl kelių priežasčių:

WCAG reikalavimų formų etiketėms supratimas

WCAG pateikia konkrečias gaires, kaip užtikrinti formų prieinamumą. Štai pagrindiniai reikalavimai, susiję su formų etiketėmis:

WCAG 2.1 sėkmės kriterijus 1.1.1 Netekstinis turinys (A lygis)

Nors tai nėra tiesiogiai susiję su etiketėmis, šis kriterijus pabrėžia, kaip svarbu pateikti tekstines alternatyvas visam netekstiniam turiniui, įskaitant CAPTCHA ir formose naudojamus vaizdus. Tinkamai paženklinta forma yra labai svarbi norint suteikti šioms alternatyvoms kontekstą.

WCAG 2.1 sėkmės kriterijus 1.3.1 Informacija ir ryšiai (A lygis)

Informacija, struktūra ir ryšiai, perteikiami per pateikimą, turėtų būti programiškai nustatomi arba prieinami tekstu. Tai reiškia, kad ryšys tarp etiketės ir atitinkamo įvesties lauko turi būti aiškiai apibrėžtas HTML kode.

WCAG 2.1 sėkmės kriterijus 2.4.6 Antraštės ir etiketės (AA lygis)

Antraštės ir etiketės apibūdina temą ar tikslą. Formų etiketės suteikia aprašomąjį kontekstą įvesties laukams, todėl vartotojams lengviau suprasti formos struktūrą ir tiksliai ją užpildyti.

WCAG 2.1 sėkmės kriterijus 3.3.2 Etiketės arba instrukcijos (A lygis)

Etiketės arba instrukcijos pateikiamos, kai turiniui reikalinga vartotojo įvestis.

WCAG 2.1 sėkmės kriterijus 4.1.2 Pavadinimas, vaidmuo, vertė (A lygis)

Visų vartotojo sąsajos komponentų (įskaitant, bet neapsiribojant, formos elementus, nuorodas ir scenarijų sugeneruotus komponentus) pavadinimą ir vaidmenį galima nustatyti programiškai; būsenas, savybes ir vertes, kurias gali nustatyti vartotojas, galima nustatyti programiškai; o pranešimai apie šių elementų pakeitimus yra prieinami vartotojo agentams, įskaitant pagalbines technologijas.

Geriausios prieinamų formų etikečių įgyvendinimo praktikos

Čia pateikiamos kelios geriausios praktikos, kaip sukurti prieinamas formų etiketes:

1. Naudokite <label> elementą

<label> elementas yra pagrindinis būdas susieti tekstinę etiketę su įvesties lauku. Jis suteikia semantinį ir struktūrinį ryšį tarp etiketės ir valdiklio. <label> elemento for atributas turi atitikti atitinkamo įvesties lauko id atributą.

Pavyzdys:


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

Neteisingas pavyzdys (venkite):


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

Naudojant span elementą vietoje label, nesukuriama būtina programinė asociacija, todėl ji tampa neprieinama ekrano skaitytuvams.

2. Aiškiai susiekite etiketes su įvesties laukais

Užtikrinkite aiškų ir nedviprasmišką ryšį tarp etiketės ir įvesties lauko, naudodami for ir id atributus, kaip parodyta aukščiau pateiktame pavyzdyje.

3. Teisingai išdėstykite etiketes

Etikečių išdėstymas gali turėti įtakos patogumui naudoti. Paprastai etiketės turėtų būti dedamos:

Išdėstydami etiketes, atsižvelkite į kultūrines normas. Kai kuriose kalbose etiketės tradiciškai dedamos po įvesties lauko. Pritaikykite savo dizainą, kad atitiktų šiuos pageidavimus.

4. Pateikite aiškias ir glaustas etiketes

Etiketės turėtų būti trumpos, aprašomosios ir lengvai suprantamos. Venkite žargono ar techninių terminų, kurie gali suklaidinti vartotojus. Pavyzdžiui, vietoj „UserID“ naudokite „Vartotojo vardas“ arba „El. pašto adresas“. Apsvarstykite lokalizaciją. Užtikrinkite, kad jūsų etiketės būtų lengvai verčiamos į skirtingas kalbas, išlaikant jų prasmę.

5. Kai būtina, naudokite ARIA atributus

ARIA (Accessible Rich Internet Applications) atributai gali pagerinti formos elementų prieinamumą, ypač sudėtingose situacijose. Tačiau ARIA naudokite apgalvotai ir tik tada, kai nepakanka natūralių HTML elementų ir atributų.

Pavyzdys naudojant aria-label:


<input type="search" aria-label="Ieškoti svetainėje">

Pavyzdys naudojant aria-labelledby:


<h2 id="newsletter-title">Naujienlaiškio prenumerata</h2>
<input type="email" aria-labelledby="newsletter-title" placeholder="Įveskite savo el. pašto adresą">

6. Grupuokite susijusius formos elementus su <fieldset> ir <legend>

<fieldset> elementas grupuoja susijusius formos valdiklius, o <legend> elementas pateikia laukų rinkinio antraštę. Tai pagerina formos struktūrą ir leidžia vartotojams lengviau suprasti ryšius tarp skirtingų įvesties laukų.

Pavyzdys:


<fieldset>
  <legend>Kontaktinė informacija</legend>
  <label for="name">Vardas:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">El. paštas:</label>
  <input type="email" id="email" name="email">
</fieldset>

7. Pateikite aiškius klaidų pranešimus

Kai vartotojai pildydami formą padaro klaidų, pateikite aiškius ir informatyvius klaidų pranešimus, kurie paaiškina, kas nutiko ne taip ir kaip klaidą ištaisyti. Susiekite šiuos klaidų pranešimus su atitinkamais įvesties laukais naudodami ARIA atributus, pvz., aria-describedby.

Pavyzdys:


<label for="email">El. paštas:</label>
<input type="email" id="email" name="email" aria-describedby="email-error">
<span id="email-error" class="error-message">Įveskite galiojantį el. pašto adresą.</span>

Užtikrinkite, kad klaidos pranešimas būtų vizualiai išskirtinis (pvz., naudojant spalvą ar piktogramas) ir programiškai prieinamas pagalbinėms technologijoms.

8. Naudokite pakankamą spalvų kontrastą

Užtikrinkite pakankamą spalvų kontrastą tarp etiketės teksto ir fono spalvos, kad atitiktumėte WCAG reikalavimus. Naudokite spalvų kontrasto analizatoriaus įrankį, kad patikrintumėte, ar kontrasto santykis atitinka minimalius reikalavimus (4,5:1 normaliam tekstui ir 3:1 dideliam tekstui). Tai padeda vartotojams su silpnu regėjimu lengviau skaityti etiketes.

9. Užtikrinkite prieinamumą klaviatūra

Visi formos elementai turi būti pasiekiami naudojant tik klaviatūrą. Vartotojai turėtų galėti naršyti po formą naudodami Tab klavišą ir sąveikauti su formos valdikliais naudodami tarpo arba Enter klavišą. Kruopščiai išbandykite savo formas su klaviatūra, kad užtikrintumėte tinkamą prieinamumą klaviatūra.

10. Išbandykite su pagalbinėmis technologijomis

Geriausias būdas užtikrinti, kad jūsų formos yra prieinamos, yra išbandyti jas su pagalbinėmis technologijomis, tokiomis kaip ekrano skaitytuvai (pvz., NVDA, JAWS, VoiceOver). Tai padės jums nustatyti prieinamumo problemas, kurios gali būti nepastebimos vizualiai tikrinant. Įtraukite vartotojus su negalia į savo testavimo procesą, kad gautumėte vertingų atsiliepimų.

Prieinamų formų etikečių įgyvendinimo pavyzdžiai

1. Pavyzdys: Paprasta kontaktų forma (tarptautinė perspektyva)

Apsvarstykite kontaktų formą, skirtą pasaulinei auditorijai. Etiketės turėtų būti aiškios, glaustos ir lengvai verčiamos.


<form>
  <label for="name">Pilnas vardas:</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">El. pašto adresas:</label>
  <input type="email" id="email" name="email"><br><br>

  <label for="country">Šalis:</label>
  <select id="country" name="country">
    <option value="">Pasirinkite šalį</option>
    <option value="us">Jungtinės Valstijos</option>
    <option value="ca">Kanada</option>
    <option value="uk">Jungtinė Karalystė</option>
    <option value="de">Vokietija</option>
    <option value="fr">Prancūzija</option>
    <option value="jp">Japonija</option>
    <option value="au">Australija</option>
    <!-- Pridėti daugiau šalių -->
  </select><br><br>

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

  <input type="submit" value="Pateikti">
</form>

Atkreipkite dėmesį, kad aiškumo dėlei naudojamas „Pilnas vardas“ vietoj tiesiog „Vardas“, ypač kultūrose, kur pavardės rašomos prieš vardus.

2. Pavyzdys: El. prekybos atsiskaitymo forma

El. prekybos atsiskaitymo formose dažnai reikalaujama jautrios informacijos. Aiškios etiketės ir instrukcijos yra labai svarbios norint sukurti pasitikėjimą ir užtikrinti prieinamumą.


<form>
  <fieldset>
    <legend>Pristatymo adresas</legend>
    <label for="shipping_name">Pilnas vardas:</label>
    <input type="text" id="shipping_name" name="shipping_name"><br><br>

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

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

    <label for="shipping_zip">Pašto / Zip kodas:</label>
    <input type="text" id="shipping_zip" name="shipping_zip"><br><br>

    <label for="shipping_country">Šalis:</label>
    <select id="shipping_country" name="shipping_country">
      <option value="">Pasirinkite šalį</option>
      <option value="us">Jungtinės Valstijos</option>
      <option value="ca">Kanada</option>
      <!-- Pridėti daugiau šalių -->
    </select>
  </fieldset>

  <fieldset>
    <legend>Mokėjimo informacija</legend>
    <label for="card_number">Kredito kortelės numeris:</label>
    <input type="text" id="card_number" name="card_number"><br><br>

    <label for="expiry_date">Galiojimo data (MM/YY):</label>
    <input type="text" id="expiry_date" name="expiry_date" placeholder="MM/YY"><br><br>

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

  <input type="submit" value="Pateikti užsakymą">
</form>

Laukų rinkinių ir legendų naudojimas aiškiai suskirsto formą į logines dalis. Vietos rezervavimo tekstas (placeholder) suteikia papildomų nurodymų, tačiau atminkite, kad jis neturėtų būti naudojamas kaip etikečių pakaitalas.

3. Pavyzdys: Registracijos forma su ARIA atributais

Apsvarstykite registracijos formą, kurioje slapyvardis yra neprivalomas. Naudodami ARIA atributus, galime suteikti papildomo konteksto.


<form>
  <label for="username">Vartotojo vardas:</label>
  <input type="text" id="username" name="username" required><br><br>

  <label for="password">Slaptažodis:</label>
  <input type="password" id="password" name="password" required><br><br>

  <label for="nickname">Slapyvardis (neprivaloma):</label>
  <input type="text" id="nickname" name="nickname" aria-describedby="nickname-info">
  <span id="nickname-info">Šis slapyvardis bus rodomas viešai.</span><br><br>

  <input type="submit" value="Registruotis">
</form>

aria-describedby atributas susieja slapyvardžio įvesties lauką su span elementu, kuris pateikia papildomos informacijos apie tai, kaip slapyvardis bus naudojamas.

Formų prieinamumo testavimo įrankiai

Keli įrankiai gali padėti įvertinti jūsų formų prieinamumą:

Išvada

Prieinamos formų etiketės yra būtinos norint sukurti įtraukią žiniatinklio patirtį. Laikydamiesi šiame vadove pateiktų geriausių praktikų, galite užtikrinti, kad jūsų formomis galės naudotis visi, nepriklausomai nuo jų gebėjimų. Prieinamumo prioritetas ne tik naudingas vartotojams su negalia, bet ir pagerina bendrą jūsų svetainės patogumą naudoti visiems vartotojams. Nepamirškite nuolat testuoti savo formas su pagalbinėmis technologijomis ir įtraukti vartotojus su negalia į savo testavimo procesą, kad gautumėte vertingų atsiliepimų ir nuolat tobulintumėte savo svetainės prieinamumą.

Prieinamumo priėmimas yra ne tik atitikties klausimas; tai yra apie įtraukesnio ir teisingesnio interneto kūrimą visiems. Investuodami į prieinamą formų dizainą, jūs demonstruojate įsipareigojimą įtraukumui ir sukuriate geresnę vartotojo patirtį visiems.