Jag bloggar numera på http://blog.dileno.com ».

Att skapa mer tillgängliga formulär

en XHTML-artikel av Martin S., publicerad den 2 maj 2005
Många tror att formulär bara består av form-elementet tillsammans med en massa textfält och en submit-knapp – och nöjer sig med det. Tyvärr, för man kan få ut mycket mer av formulär än det. Elementet label tillsammans med elementen fieldset, legend, tabindex och accesskey gör att man kan bygga mer tillgängliga formulär, och gör dessutom surfande på olika plattformar smidigare. Tack vare dessa element stänger man inte ut användare, utan snarare välkomnar dem.

Ett grundläggande formulär


Som kanske är bekant, består ett formulär av elementet form och textfält du kan skriva i, samt en submit-knapp för att skicka datan i formuläret. Ett typexempel är detta formulär:

<form action="…" id="form1" name=”form1” method="post">
<p>Namn:
<br /><input type="text" id="namn" name="namn" /></p>
<p>Ålder:
<br /><input type=”text” id=”namn” name=”namn” /></p>
<p><input type="submit" value="Skicka" /></p>
</form>

Formuläret ovan fungerar som det är tänkt. Dock används inte element som är ämnade att användas i formulär – elementen label, fieldset och legend.

Label-elementet


Label-elementet använder man för att beskriva vad användaren ska skriva i ett specifikt textfält i formuläret. Formuläret ovan fast med label-element ser ut så här:

<form action="…" id="form1" name=”form1” method="post">
<p><label for=”namn”>Namn:</label>
<br /><input type="text" id="namn" name="namn" /></p>
<p><label for=”alder”>Ålder</label>
<br /><input type=”text” id=”namn” name=”namn” /></p>
<p><input type="submit" value="Skicka" /></p>
</form>

I label-elementet ovan anger jag att elementet gäller för textfältet namn i formuläret. En fördel med att använda label-elementet mot att inte använda det, är att man kan behöver inte klicka direkt i ett textfält för att skriva i det – man kan även klicka på label-elementet. En stor fördel för folk som surfar på mobiler/handdatorer eller är begränsade i syn/rörlighet, och ett steg i rätt riktning vad gäller tillgänglighet på webben. Ha därför alltid som regel att använda label-elementet tillsammans med dina textfält.

Fieldset och legend


Jag har ofta stött på formulär på Internet som bara radar upp information man ska fylla i – utan att ha en vettig struktur finns. Det finns bra exempel på hur formulär ska se ut för att vem som helst ska kunna fylla i dem som det är tänkt – men dessa exempel är få, och ändå inte fullt så bra som de skulle kunna vara. Ett formulär som är relativt anpassat till användaren skulle idag kunna se ut så här:

<form action="…" id="form1" name=”form1” method="post">
<p><label for="namn">Namn:</label>
<br /><input type="text" id="namn" name="namn" /></p>
<p><label for="pnr">Personnummer:</label>
<br /><input type="text" id="pnr" name="pnr" /></p>
<p><label for="utb">Typ av utbildning</label>
<p><select id="utb" name="utb">
<option value="#">Välj typ</option>
<option>…</option>
<option>…</option>
</select></p></p>
<p><input type="submit" value="Skicka" /></p>
</form>

Effekten av koden blir detta formulär:

Ett vanligt webbformulär

Formuläret är ganska bra strukturerat, men långt ifrån tillräckligt. Ovana användare kan bli förvirrade, och kanske struntar i att fylla i formuläret – och vad händer då med tillgängligheten, som är viktig för att alla ska kunna använda sig av din sajt? Nej – för att strukturen (och därmed tillgängligheten) ska bli bättre krävs det att man använder sig av två element som är just till för att strukturera upp formulär; elementen fieldset och legend.

Elementet fieldset är till för att gruppera likadan information i formulär, och legend är till för att förtydliga vad som är vad i ett formulär.

Med hjälp av elementet fieldset kan man dela upp formuläret ovan i två delar – en där användaren skriver i personuppgifter, och en där användaren skriver i utbildningsuppgifter. Med hjälp av elementet legend kan man sedan ge respektive del av formuläret en rubrik. För att få struktur på formuläret ovan så behöver vi enbart använda oss av två fieldset-element och två legend-element. Så här:

<form action="…" id="form1" name=”form1” method="post">
<fieldset>
<legend>Personuppgifter</legend>
<p><label for="namn">Namn:</label>
<br /><input type="text" id="namn" name="namn" /></p>
<p><label for="pnr">Personnummer:</label>
<br /><input type="text" id="pnr" name="pnr" /></p>
</fieldset>
<fieldset>
<legend>Utbildning</legend>
<p><label for="utb">Typ av utbildning</label></p>
<p><select id="utb" name="utb">
<option value="#">Välj typ</option>
<option>…</option>
<option>…</option>
</select></p>
</fieldset>
<p><input type="submit" value="Skicka" /></p>
</form>

Så här ser formuläret ut nu, då elementen fieldset och legend nyttjas:

Webbformulär med fieldset och legend

Som du märker är strukturen betydligt förbättrad, vilket gör det enklare för olika typer av användare att fylla i formuläret som det är tänkt. Vill man så kan man även öka avstånden mellan respektive formulärgrupp, genom att använda margin och padding i CSS. (se CSS-artikeln Anpassa avstånden med margin och padding).

Noterbart är dock att man inte alltid behöver använda sig av fieldset och legend om man jobbar med formulär. Fieldset och legend är till för att strukturera upp formulär. Har du två textfält som ska fyllas i så är det kanske inte så mycket som ska struktureras.
För att göra textfält mer tillgängliga kan man även använda sig av title-attributet och ge det ett värde. Exempelkod:

<input type=”text” id=”namn” name=”namn” title=”Skriv ditt namn här” />

Tabindex


Tack vare elementet tabindex är det möjligt att ge textfälten i ett formulär en inbördes ordning (prioritering) när man använder sig av tab-tangenten för att skifta mellan textfält i formulär.
Första gången användaren trycker på tab så fokuseras det textfältet som har det lägsta tabindexet på sidan. För varje gång användaren sedan trycker på tab så fokuseras andra textfält man har angett tabindex för i stigande ordning. Här är ett exempel:

<form action="…" id="form1" method="post">
<fieldset>
<legend>Personuppgifter</legend>
<p><label for="namn">Namn:</label>
<br /><input tabindex=”1” type="text" id="namn" name="namn" /></p>
<p><label for="pnr">Personnummer:</label>
<br /><input type="text" id="pnr" name="pnr" /></p>
<p><label for="land">Land:</label>
<br /><input tabindex=”2” type="text" id="land" name="land" /></p>
<p><input type="submit" value="Skicka" /></p>
</fieldset>
</form>

Första gången användaren trycker på tab, så kommer textfältet namn att fokuseras. Andra gången användaren trycker på tab så kommer textfältet land att fokuseras. Sedan textfältet pnr.

Tabindex är bra att använda sig av ifall om man vill att användaren snabbt ska hitta till viktiga delar i ett formulär. Man kan ange tabindex-värden från 0-32767, där det element som har tabindex 0 är högst prioriterat och övriga prioriterade i stigande sifferordning.

Element som stödjer tabindex: a, area, button, input, object, select och textarea

Accesskey


Man kan använda sig av attributet accesskey om man vill aktivera kortkommandon på en sida. När någon då använder ett kortkommando fokuseras ett element på sidan som kortkommandot är aktiverat för.
Windows-användare trycker på alt + en tangent för att använda ett kortkommando, och Apple-användare trycker på cmd + en tangent.

Här är ett exempel:

<form action="…" id="form1" method="post">
<fieldset>
<legend>Personuppgifter</legend>
<p><label for="namn">Namn:</label>
<br /><input accesskey="1" type="text" id="namn" name="namn" /></p>
<p><label for="pnr">Personnummer:</label>
<br /><input type="text" id="pnr" name="pnr" /></p>
<p><label for="land">Land:</label>
<br /><input accesskey=”2” type="text" id="land" name="land" /></p>
<p><input type="submit" value="Skicka" /></p>
</fieldset>
</form>

Använder man kortkommandot alt + 1 (Windows-system) så fokuseras textfältet namn, använder man alt + 2 i stället så fokuseras textfältet land.

Element som stödjer accesskey: a, area, button, input, label, legend och textarea

Börja göra bra formulär!


Genom att använda sig av element på det sätt som de är tänkta att användas, så kan du göra dina formulär bättre och mer tillgängliga. En bra struktur på sina formulär är viktigt för att användare inte ska tappa intresset. Genom att tänka sig för både en och två gånger innan man strukturerar sina formulär så kan man förebygga missförstånd – speciellt om man använder sig av elementen label, fieldset och legend.