Dag 28: Merking av skjema-elementer

Har det noen ganger plaget deg at webskjemaer er så vanskelige å bruke. For eksempel, i regulære GUI-applikasjoner kan du klikke hvor som helst på en avmerkingsboks for å merke av eller avmerke boksen, men i webbaserte applikasjoner kan du kun klikke på den lille avmerkingsboksens kvadrat. Dette er irriterende men ikke fatalt. Men for blinde brukere er situasjonen enda verre. Til og med enkle skjemaer, som kommentarskjemaer, kan være vanskelige å bruke hvis du ikke kan se alle på én gang. (Vi har lagt merke til et tilsvarende problem med tabeller; en weblogg-kalender er enkel å bruke hvis du kan se alt på én gang, men vanskelig hvis du kun kan se én dag om gangen.)

Det finnes HTML-tagger som kan hjelpe til med å gjøre skjemaer enklere å bruke. Jeg skal snakke om én, <label>-taggen; du kan lese om de andre i «Les mer»-seksjonen.

<label>-taggen lar deg assosiere skjemaers «label» med hvilke som helst skjemaers input-elementer: Tekstbokser, flerlinje-tekstområder, avmerkingsbokser, radioknapper, hva som helst. Dette lar skjermlesere tydelig kunne lese opp hva et bestemt input-element er ved å lese «labelen». Videre, hvis du bruker en <label>-tagg til å assosiere en avmerkingsboks (<input type="checkbox">) med dens etterfølgende tekst, så vil ditt webbaserte skjema fungere som en GUI-applikasjon: Da kan man klikke hvor som helst i teksten til «labelet» for å trigge avmerkingsboksen.

Hvem har nytte av det?

  1. Anne har nytte av det. Når Anne bruker TAB-knappen på tastaturet til å navigere gjennom et skjema, så leser JAWS opp navnene til hvert element (med dets name-egenskap), noe som både kan være forståelig og ikke være det. Men hvis skjemaets element er assosiert med en «label», så vil JAWS lese «label»-teksten i stedet. «Tekst: Navn.» (TAB) «Tekst: Epostadresse.» (TAB) «Tekst: URL.» (TAB) «Tekstområde: Kommentar.», og så videre.
  2. Lillian har nytte av det. Straks et skjema-element er assosiert med «labels», så kan Lillian klikke hvor som helst på teksten som er rett etter avmerkingsboksen, og det vil trigge avmerkingsboksen. Dette gir et mye større rom for feilgrep når hun skal trigge avmerkingsboksen ved å bruke en mus, og med hennes begrensede synsevne så trenger hun det.
  3. Knut skal også ha nytte av dette, men bare ikke riktig enda. Han navigerer for det meste med tastaturet, noe som for det meste betyr TAB-knappen. Når han bruker TAB-knappen for å komme seg til en avmerkingsboks i et skjema så burde Mozilla sette fokus rundt hele «labelen», men det gjør den ikke; den setter kun fokus på selve avmerkingsboksen. (Internet Explorer gjør faktisk dette riktig. Til og med Netscape 4 gjør det riktig. Dette er ille, Mozilla.)

Hvordan gjøre det: Movable Type

I Movable Type redigerer du ditt Comment Listing Template. Nær bunnen skal du se et skjema som inneholder elementer som dette:

Navn:<br />
<input name="author" /><br /><br />

Epostadresse:<br />
<input name="email" /><br /><br />

URL:<br />
<input name="url" /><br /><br />

Kommentar:<br />
<textarea name="text" rows="10" cols="50"></textarea><br /><br />

<input type="checkbox" name="bakecookie" />Remember info?<br /><br />

Hvert av disse nakne «labels» trenger å bli pakket inn i <label>-tagger. Fordi <label>-taggen peker til et skjema-element med ID (ikke navn), så trenger hver <input>-tagg et ID-attributt. Alt i alt så vil det ende opp med å se ut som dette:

<label for="author">Navn:</label><br />
<input id="author" name="author" /><br /><br />

<label for="email">Epostadresse:</label><br />
<input id="email" name="email" /><br /><br />

<label for="url">URL:</label><br />
<input id="url" name="url" /><br /><br />

<label for="text">Kommentar:</label><br />
<textarea id="text" name="text" rows="10" cols="50"></textarea><br /><br />

<input type="checkbox" id="bakecookie" name="bakecookie" /><label for="bakecookie">Husk meg?</label><br /><br />

Vær nøye med å gjøre de samme endringene i ditt Comment Preview template, ditt Comment Error template, og i Individual Entry Archive.

Hvordan gjøre det: Greymatter

Under «Rediger Karma & Comments-Related Templates», skal du se en mal som kalles «{{entrycommentsform}} Posting form» som inkluderer dette:

Navn
<BR>
<INPUT TYPE=TEXT NAME="newcommentauthor" SIZE=40>
<P>
Epostadresse (valgfri)
<BR>
<INPUT TYPE=TEXT NAME="newcommentemail" SIZE=40>
<P>
Hjemmeside (valgfri)
<BR>
<INPUT TYPE=TEXT NAME="newcommenthomepage" SIZE=40>
<P>
Kommentar
<BR>
<TEXTAREA NAME="newcommentbody" COLS=35 ROWS=10 WRAP=VIRTUAL></TEXTAREA>

Endre det til dette:

<label for="newcommentauthor">Navn</label>
<BR>
<INPUT TYPE=TEXT id="newcommentauthor" NAME="newcommentauthor" SIZE=40>
<P>
<label for="newcommentemail">Epostadresse (valgfri)</label>
<BR>
<INPUT TYPE=TEXT id="newcommentemail" NAME="newcommentemail" SIZE=40>
<P>
<label for="newcommenthomepage">Hjemmeside (valgfri)</label>
<BR>
<INPUT TYPE=TEXT id="newcommenthomepage" NAME="newcommenthomepage" SIZE=40>
<P>
<label for="newcommentbody">Kommentar</label>
<BR>
<TEXTAREA id="newcommentbody" NAME="newcommentbody" COLS=35 ROWS=10 WRAP=VIRTUAL></TEXTAREA>

Les mer