Formu iezīmes: Būtiskākās ievades lauku pieejamības prasības

Formas ir tīmekļa pamatelements. Sākot no vienkāršām saziņas formām līdz sarežģītām e-komercijas norēķinu lapām, tās ļauj lietotājiem mijiedarboties ar tīmekļa vietnēm un lietojumprogrammām. Tomēr slikti izstrādātas formas var radīt būtiskus šķēršļus lietotājiem ar invaliditāti. Būtisks elements pieejamu formu izveidē ir pareiza formu iezīmju lietošana. Šī rokasgrāmata sniedz visaptverošu pārskatu par formu iezīmju pieejamības prasībām, nodrošinot, ka jūsu formas ir lietojamas ikvienam, neatkarīgi no viņu spējām.

Kāpēc pieejamas formu iezīmes ir svarīgas?

Pieejamas formu iezīmes ir ļoti svarīgas vairāku iemeslu dēļ:

• Lietojamība: Skaidras un kodolīgas iezīmes palīdz visiem lietotājiem saprast katra ievades lauka mērķi, uzlabojot kopējo lietojamību.
• Pieejamība: Iezīmes sniedz būtisku informāciju lietotājiem ar invaliditāti, īpaši tiem, kas paļaujas uz palīgtehnoloģijām, piemēram, ekrāna lasītājiem. Bez atbilstošām iezīmēm šie lietotāji var nespēt aizpildīt formas.
• WCAG atbilstība: Tīmekļa satura pieejamības vadlīnijas (WCAG) nosaka, ka visiem formas vadības elementiem jābūt saistītām iezīmēm. Šo vadlīniju ievērošana nodrošina, ka jūsu vietne ir pieejama un juridiski atbilstoša daudzās jurisdikcijās.
• SEO: Lai gan tas nav tiešs ranga faktors, pieejamām vietnēm parasti ir labāka lietotāja pieredze, kas var netieši uzlabot SEO veiktspēju.

Izpratne par WCAG prasībām formu iezīmēm

WCAG sniedz specifiskas vadlīnijas formu pieejamības nodrošināšanai. Šeit ir galvenās prasības, kas saistītas ar formu iezīmēm:

WCAG 2.1 veiksmes kritērijs 1.1.1 Ar tekstu nesaistīts saturs (A līmenis)

Lai gan šis kritērijs nav tieši par iezīmēm, tas uzsver, cik svarīgi ir nodrošināt teksta alternatīvas visam ar tekstu nesaistītajam saturam, ieskaitot CAPTCHA un attēlus, kas tiek izmantoti formās. Pareizi marķēta forma ir ļoti svarīga, lai nodrošinātu šo alternatīvu kontekstu.

WCAG 2.1 veiksmes kritērijs 1.3.1 Informācija un attiecības (A līmenis)

Informācijai, struktūrai un attiecībām, kas tiek nodotas ar prezentācijas palīdzību, jābūt programmatiski nosakāmām vai pieejamām tekstā. Tas nozīmē, ka attiecībai starp iezīmi un tās atbilstošo ievades lauku jābūt skaidri definētai HTML kodā.

WCAG 2.1 veiksmes kritērijs 2.4.6 Virsraksti un iezīmes (AA līmenis)

Virsraksti un iezīmes apraksta tēmu vai mērķi. Formu iezīmes sniedz aprakstošu kontekstu ievades laukiem, atvieglojot lietotājiem formas struktūras izpratni un precīzu tās aizpildīšanu.

WCAG 2.1 veiksmes kritērijs 3.3.2 Iezīmes vai instrukcijas (A līmenis)

Iezīmes vai instrukcijas tiek nodrošinātas, ja saturam ir nepieciešama lietotāja ievade.

WCAG 2.1 veiksmes kritērijs 4.1.2 Nosaukums, loma, vērtība (A līmenis)

Visiem lietotāja saskarnes komponentiem (tostarp, bet ne tikai, formas elementiem, saitēm un skriptu radītiem komponentiem) nosaukumu un lomu var noteikt programmatiski; stāvokļus, īpašības un vērtības, kuras lietotājs var iestatīt, var iestatīt programmatiski; un paziņojumi par izmaiņām šajos elementos ir pieejami lietotāja aģentiem, tostarp palīgtehnoloģijām.

Labākā prakse pieejamu formu iezīmju ieviešanai

Šeit ir vairākas labākās prakses pieejamu formu iezīmju izveidei:

1. Izmantojiet <label> elementu

<label> elements ir galvenais veids, kā saistīt teksta iezīmi ar ievades lauku. Tas nodrošina semantisku un strukturālu saikni starp iezīmi un vadības elementu. <label> elementa for atribūtam jāatbilst atbilstošā ievades lauka id atribūtam.

Piemērs:

<label for="name">Vārds:</label>
<input type="text" id="name" name="name">

Nepareizs piemērs (izvairieties):

<span>Vārds:</span>
<input type="text" id="name" name="name">

Izmantojot span elementu label vietā, netiek izveidota nepieciešamā programmatiskā saistība, padarot to nepieejamu ekrāna lasītājiem.

2. Skaidri saistiet iezīmes ar ievades laukiem

Nodrošiniet skaidru un nepārprotamu saistību starp iezīmi un ievades lauku, izmantojot for un id atribūtus, kā parādīts iepriekšējā piemērā.

3. Pareizi pozicionējiet iezīmes

Iezīmju izvietojums var ietekmēt lietojamību. Parasti iezīmes jānovieto:

• Virs ievades lauka: Šī bieži ir vispieejamākā un lietotājam draudzīgākā iespēja, īpaši teksta laukiem un teksta apgabaliem.
• Pa kreisi no ievades lauka: Bieži sastopams, bet var būt mazāk efektīvs lietotājiem ar redzes traucējumiem, kuriem var būt grūtības skenēt lapu.
• Radiopogām un izvēles rūtiņām: Iezīmes jānovieto pa labi no vadības elementa.

Pozicionējot iezīmes, ņemiet vērā kultūras normas. Dažās valodās iezīmes tradicionāli tiek novietotas aiz ievades lauka. Pielāgojiet savu dizainu, lai ņemtu vērā šīs preferences.

4. Nodrošiniet skaidras un kodolīgas iezīmes

Iezīmēm jābūt īsām, aprakstošām un viegli saprotamām. Izvairieties no žargona vai tehniskiem terminiem, kas varētu mulsināt lietotājus. Piemēram, "UserID" vietā izmantojiet "Lietotājvārds" vai "E-pasta adrese". apsveriet lokalizāciju. Nodrošiniet, lai jūsu iezīmes būtu viegli tulkojamas dažādās valodās, saglabājot to nozīmi.

5. Nepieciešamības gadījumā izmantojiet ARIA atribūtus

ARIA (Accessible Rich Internet Applications) atribūti var uzlabot formas elementu pieejamību, īpaši sarežģītās situācijās. Tomēr izmantojiet ARIA apdomīgi un tikai tad, ja ar dabiskajiem HTML elementiem un atribūtiem nepietiek.

• aria-label: Izmantojiet šo atribūtu, lai nodrošinātu iezīmi, ja redzama iezīme nav iespējama vai praktiska.
• aria-labelledby: Izmantojiet šo atribūtu, lai atsauktos uz lapā esoša elementa ID, kas kalpos kā iezīme.
• aria-describedby: Izmantojiet šo atribūtu, lai sniegtu papildu informāciju vai norādījumus par ievades lauku. Tas ir noderīgi, lai sniegtu kontekstu vai izskaidrotu validācijas noteikumus.

Piemērs ar aria-label:

<input type="search" aria-label="Meklēt vietnē">

Piemērs ar aria-labelledby:

<h2 id="newsletter-title">Jaunumu abonēšana</h2>
<input type="email" aria-labelledby="newsletter-title" placeholder="Ievadiet savu e-pasta adresi">

6. Grupējiet saistītos formas elementus ar <fieldset> un <legend>

<fieldset> elements grupē saistītos formas vadības elementus, un <legend> elements nodrošina virsrakstu lauku kopai. Tas uzlabo formas struktūru un atvieglo lietotājiem izpratni par attiecībām starp dažādiem ievades laukiem.

Piemērs:

<fieldset>
  <legend>Kontaktinformācija</legend>
  <label for="name">Vārds:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">E-pasts:</label>
  <input type="email" id="email" name="email">
</fieldset>

7. Nodrošiniet skaidrus kļūdu ziņojumus

Kad lietotāji kļūdās, aizpildot formu, sniedziet skaidrus un informatīvus kļūdu ziņojumus, kas izskaidro, kas nogāja greizi un kā kļūdu labot. Saistiet šos kļūdu ziņojumus ar atbilstošajiem ievades laukiem, izmantojot ARIA atribūtus, piemēram, aria-describedby.

Piemērs:

<label for="email">E-pasts:</label>
<input type="email" id="email" name="email" aria-describedby="email-error">
<span id="email-error" class="error-message">Lūdzu, ievadiet derīgu e-pasta adresi.</span>

Nodrošiniet, lai kļūdas ziņojums būtu vizuāli atšķirīgs (piemēram, izmantojot krāsu vai ikonas) un programmatiski pieejams palīgtehnoloģijām.

8. Izmantojiet pietiekamu krāsu kontrastu

Nodrošiniet pietiekamu krāsu kontrastu starp iezīmes tekstu un fona krāsu, lai atbilstu WCAG prasībām. Izmantojiet krāsu kontrasta analizatora rīku, lai pārbaudītu, vai kontrasta attiecība atbilst minimālajām prasībām (4.5:1 parastam tekstam un 3:1 lielam tekstam). Tas palīdz lietotājiem ar vāju redzi vieglāk lasīt iezīmes.

9. Nodrošiniet tastatūras pieejamību

Visiem formas elementiem jābūt pieejamiem, izmantojot tikai tastatūru. Lietotājiem jāspēj pārvietoties pa formu, izmantojot taustiņu Tab, un mijiedarboties ar formas vadības elementiem, izmantojot atstarpes taustiņu vai Enter. Rūpīgi pārbaudiet savas formas ar tastatūru, lai nodrošinātu pienācīgu tastatūras pieejamību.

10. Testējiet ar palīgtehnoloģijām

Labākais veids, kā nodrošināt formu pieejamību, ir tās pārbaudīt ar palīgtehnoloģijām, piemēram, ekrāna lasītājiem (piemēram, NVDA, JAWS, VoiceOver). Tas palīdzēs jums identificēt visas pieejamības problēmas, kas var nebūt acīmredzamas vizuālās pārbaudes laikā. Iesaistiet lietotājus ar invaliditāti savā testēšanas procesā, lai saņemtu vērtīgas atsauksmes.

Pieejamu formu iezīmju ieviešanas piemēri

1. piemērs: Vienkārša saziņas forma (starptautiskā perspektīva)

Apsveriet saziņas formu globālai auditorijai. Iezīmēm jābūt skaidrām, kodolīgām un viegli tulkojamām.

<form>
  <label for="name">Pilns vārds, uzvārds:</label>
  <input type="text" id="name" name="name"><br><br>

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

  <label for="country">Valsts:</label>
  <select id="country" name="country">
    <option value="">Izvēlieties valsti</option>
    <option value="us">Amerikas Savienotās Valstis</option>
    <option value="ca">Kanāda</option>
    <option value="uk">Apvienotā Karaliste</option>
    <option value="de">Vācija</option>
    <option value="fr">Francija</option>
    <option value="jp">Japāna</option>
    <option value="au">Austrālija</option>
    <!-- Pievienojiet vairāk valstu -->
  </select><br><br>

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

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

Ņemiet vērā, ka tiek izmantots "Pilns vārds, uzvārds", nevis tikai "Vārds", lai nodrošinātu skaidrību, īpaši kultūrās, kurās uzvārds tiek rakstīts pirms vārda.

2. piemērs: E-komercijas norēķinu forma

E-komercijas norēķinu formās bieži tiek prasīta sensitīva informācija. Skaidras iezīmes un norādījumi ir ļoti svarīgi uzticības veidošanai un pieejamības nodrošināšanai.

<form>
  <fieldset>
    <legend>Piegādes adrese</legend>
    <label for="shipping_name">Pilns vārds, uzvārds:</label>
    <input type="text" id="shipping_name" name="shipping_name"><br><br>

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

    <label for="shipping_city">Pilsēta:</label>
    <input type="text" id="shipping_city" name="shipping_city"><br><br>

    <label for="shipping_zip">Pasta indekss:</label>
    <input type="text" id="shipping_zip" name="shipping_zip"><br><br>

    <label for="shipping_country">Valsts:</label>
    <select id="shipping_country" name="shipping_country">
      <option value="">Izvēlieties valsti</option>
      <option value="us">Amerikas Savienotās Valstis</option>
      <option value="ca">Kanāda</option>
      <!-- Pievienojiet vairāk valstu -->
    </select>
  </fieldset>

  <fieldset>
    <legend>Maksājuma informācija</legend>
    <label for="card_number">Kredītkartes numurs:</label>
    <input type="text" id="card_number" name="card_number"><br><br>

    <label for="expiry_date">Derīguma termiņš (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="Veikt pasūtījumu">
</form>

Lauku kopu un to virsrakstu izmantošana skaidri organizē formu loģiskās sadaļās. Vietures teksts (placeholder) sniedz papildu norādījumus, taču atcerieties, ka vietures tekstu nedrīkst izmantot kā iezīmju aizstājēju.

3. piemērs: Reģistrācijas forma ar ARIA atribūtiem

Apsveriet reģistrācijas formu, kurā segvārds nav obligāts. Izmantojot ARIA atribūtus, mēs varam sniegt papildu kontekstu.

<form>
  <label for="username">Lietotājvārds:</label>
  <input type="text" id="username" name="username" required><br><br>

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

  <label for="nickname">Segvārds (neobligāts):</label>
  <input type="text" id="nickname" name="nickname" aria-describedby="nickname-info">
  <span id="nickname-info">Šis segvārds tiks publiski attēlots.</span><br><br>

  <input type="submit" value="Reģistrēties">
</form>

aria-describedby atribūts saista segvārda ievades lauku ar span elementu, kas sniedz papildu informāciju par to, kā segvārds tiks izmantots.

Rīki formu pieejamības testēšanai

Vairāki rīki var palīdzēt novērtēt jūsu formu pieejamību:

• Accessibility Insights: Pārlūkprogrammas paplašinājums, kas identificē pieejamības problēmas tīmekļa lapās.
• WAVE (Web Accessibility Evaluation Tool): Tiešsaistes rīks, kas novērtē tīmekļa lapu pieejamības kļūdas.
• axe DevTools: Pārlūkprogrammas paplašinājums, kas veic automatizētu pieejamības testēšanu.
• Ekrāna lasītāji (NVDA, JAWS, VoiceOver): Testēšana ar ekrāna lasītājiem ir būtiska, lai identificētu pieejamības problēmas, kas var nebūt redzamas automatizētās testēšanas laikā.

Noslēgums

Pieejamas formu iezīmes ir būtiskas, lai radītu iekļaujošu tīmekļa pieredzi. Ievērojot šajā rokasgrāmatā izklāstītās labākās prakses, jūs varat nodrošināt, ka jūsu formas ir lietojamas ikvienam, neatkarīgi no viņu spējām. Pieejamības prioritizēšana ne tikai nāk par labu lietotājiem ar invaliditāti, bet arī uzlabo jūsu vietnes kopējo lietojamību visiem lietotājiem. Atcerieties konsekventi testēt savas formas ar palīgtehnoloģijām un iesaistīt lietotājus ar invaliditāti savā testēšanas procesā, lai saņemtu vērtīgas atsauksmes un nepārtraukti uzlabotu savas vietnes pieejamību.

Pieejamības pieņemšana nav tikai atbilstības jautājums; tas ir par iekļaujošāka un taisnīgāka tīmekļa radīšanu ikvienam. Ieguldot pieejamā formu dizainā, jūs demonstrējat apņemšanos veicināt iekļaušanu un radāt labāku lietotāja pieredzi visiem.