Aksesueshmëri

Etiketat e fushave të formularit

Çdo fushë hyrjeje duhet të ketë një emërtim të lidhur programatikisht; mjeti pranon gabimisht edhe placeholder-in.

Çfarë është

Një fushë formulari ka nevojë për një emërtim që makina mund ta lidhë me të. Mënyra standarde është <label for="id">, ose mbështjellja e fushës brenda <label>.

Alternativat programatike janë aria-label (tekst i padukshëm) dhe aria-labelledby (tregon te një element tjetër që mban tekstin).

`placeholder` nuk është emërtim. Ai është shembull vlere, zhduket sapo përdoruesi nis të shkruajë, ka kontrast të ulët nga natyra, dhe në disa kombinime shfletuesi–lexues ekrani nuk lexohet fare. Një formular me vetëm placeholder-a është formular pa emërtime.

Pse ka rëndësi

Për një përdorues të lexuesit të ekranit, një fushë pa emërtim njoftohet si "fushë teksti, e zbrazët". Ai nuk e di çfarë duhet shkruar. Në një formular me gjashtë fusha të tilla, plotësimi është hamendje.

Për këdo tjetër, emërtimi i lidhur e zgjeron zonën e klikimit: klikimi mbi tekstin e fokuson fushën. Në telefon kjo është ndryshim i vërtetë përdorshmërie.

Placeholder-i si zëvendësues krijon një problem që prek të gjithë: sapo fillon të shkruash, udhëzimi zhduket. Nëse fusha kërkon një format të veçantë — një datë, një numër telefoni — ti e ke harruar atë format pikërisht kur të duhet.

Dhe për njerëz me vështirësi njohëse ose kujtese, mungesa e emërtimit të qëndrueshëm e bën formularin të pariparueshëm pas çdo ndërprerjeje.

Si rregullohet

<!-- e drejtë -->
<label for="email">Adresa e email-it</label>
<input type="email" id="email" name="email" autocomplete="email"
       placeholder="emri@shembull.com">

<!-- e drejtë: emërtim i padukshëm për një fushë kërkimi me ikonë -->
<input type="search" aria-label="Kërko në sajt">

<!-- e gabuar -->
<input type="email" placeholder="Adresa e email-it">

Hapat:

`for` duhet të përputhet saktësisht me `id`, dhe id-të duhet të jenë unike në faqe.
Mbaj emërtimin të dukshëm kurdo që ka hapësirë; aria-label lëre për raste si kutia e kërkimit me ikonë.
Placeholder-i mbetet shembull, jo udhëzim.
Shto `autocomplete` — ndihmon këdo dhe është kërkesë e nivelit AA.
Grupet e radio-butonave duhen mbështjellë me <fieldset> dhe <legend>.

Si e mat ky mjet

AccessibilityAnalyzer::checkFormLabels() (services/AccessibilityAnalyzer.php:63) merr çdo <input> që nuk është i fshehur ose buton, plus <textarea> dhe <select> (:66). Për secilin kërkon një <label for="…"> që përputhet me id-në e tij (:78), dhe nëse nuk e gjen, pranon aria-label, aria-labelledby ose `placeholder` (:84).

Dy dalje: asnjë fushë pa emërtim (:92, kaluar), një ose më shumë (:94, paralajmërim).

Çfarë NUK e mat

Mjeti e pranon `placeholder` si emërtim të vlefshëm (services/AccessibilityAnalyzer.php:84). Kjo është e pasaktë: një placeholder nuk është emërtim programatik dhe nuk e plotëson kriterin e aksesueshmërisë. Pasoja praktike është se një formular ku çdo fushë ka vetëm placeholder — rasti më i zakonshëm i këtij defekti sot — raportohet si i rregullt.

Kjo faqe ndjek standardin, jo kodin. Konstatimi "të gjitha fushat kanë emërtime" duhet lexuar si "asnjë fushë nuk është krejt pa tekst".

Mjeti gjithashtu nuk kontrollon nëse aria-labelledby tregon te një element që ekziston vërtet, nuk e sheh mbështjelljen <label><input></label> pa for, dhe nuk kontrollon <fieldset>/<legend> te grupet.

Mospërputhje midis tekstit të analizuesit dhe matjes

Kjo faqe ndjek matjen, jo tekstin që prodhon analizuesi.
Teksti i analizuesit	Çfarë ndodh	Si u mat	Burimi
Form elements have labels — All form inputs have associated labels or ARIA attributes.	Kushti pranon aria-label, aria-labelledby OSE placeholder. Placeholder-i nuk është emërtim programatik.	Një formular ku çdo fushë ka vetëm placeholder raportohet si i rregullt. — `matur gjatë 5.10`	`services/AccessibilityAnalyzer.php:84`

Kodi që e kryen matjen

services/AccessibilityAnalyzer.php:63 — AccessibilityAnalyzer::checkFormLabels
services/AccessibilityAnalyzer.php:84 — placeholder