Hur är formulärelement utformade för att vara tillgängliga?

Alla har någon gång haft att göra med formulär. Förr i tiden mer på papper. Idag är det mer och mer digitala formulär, eftersom de tjänar användarens interaktion med en webbplats. Oavsett om det är kommunikation på internet eller beställning av en vara, kan du hitta dem överallt. Att söka på internet, till exempel med Google, påverkas också. Att fylla i dessa formulär är svårare för personer med fysiska eller till och med kognitiva funktionsnedsättningar, såväl som för blinda och synskadade. För att alla människor ska kunna delta i det offentliga livet måste dessa formulär utformas så att de är hinderfria. Men: Hur skapar man egentligen tillgängliga formulärelement?

Det finns flera tekniker för detta. Innan man går in på teknikerna bör man dock känna till formelementen. De kan delas in i olika typer. Bland annat finns följande typer

• enradiga inmatningsfält

• flerradig inmatningsområde

• Urvalslistor

• Radioknappar

• Kryssrutor

• Skicka/Avbryt-knappar

Formulärfältsmärkning

För att uppnå tillgänglighet i formulär måste de olika kontrollerna märkas. Dessa etiketter gör det möjligt för hjälpmedelstekniker att känna igen kontrollernas funktioner och kommunicera dem till användaren. Det är viktigt att etiketterna är tydligt kopplade till kontrollerna, annars kommer skärmläsare inte att kunna ansluta till elementen. Som ett resultat har användarna svårt att förstå formuläret. De kan inte identifiera vilken information som behöver anges i vilka fält. Som ett resultat kan de inte fylla i formuläret korrekt och gör ofta misstag. Beskrivningarna är dock inte alla märkta likadant. Det avgörande är om de ska vara synliga för alla eller inte. I programmeringsspråket HTML skiljer man därför mellan etikettelementet och aria-attributen. etikettelementet används för inmatningsfält, urvalslistor, radioknappar och kryssrutor och måste placeras därefter. För inmatningsfält och urvalslistor placeras etiketten framför kontrollerna. För radioknappar och kryssrutor placeras de dock efter kontrollelementet. Attributet for måste läggas till så att etiketterna också kan länkas till motsvarande element.

Attributet aria används i HTML för knappar. Knappar kan till exempel representera "skicka" eller "avbryt" i ett formulär. aria-attribut gör beskrivningarna av respektive element igenkännbara endast för hjälpmedel. Därför kan de också användas för inmatningsfält som bara ska vara synliga för skärmläsaren. Det finns många aria-attribut som används för att förbättra webbtillgängligheten. Dessa skiljer sig dock åt i typ och funktion. Den så kallade aria-etiketten används för att märka ett element. Naturligtvis är det också möjligt att använda samma etikett för flera element. Detta möjliggörs av en aria-labelledby.

En- och flerradig inmatningsfält

Inmatningsfält är ett av de mest använda elementen i formulär. De kan vara enradiga eller flerradiga. Enradiga fält används för korta frågor, till exempel en persons namn, en e-postadress, en gatuadress eller en ort.

De skapas i HTML med input-Tag och type-attributet.

Dessutom kan andra attribut läggas till som definierar till exempel linjelängden.

Flerradsfält används vanligtvis för större textområden som textmeddelanden. Dessa skapas sedan med textarea-Tag. Återigen kan utvecklaren ange antalet rader och radlängden. För att dessa fält ska vara tillgängliga måste dock label-Tag fortfarande läggas till. Det är dock inte möjligt att skapa en länk mellan etiketten och elementen om de inte är unikt tilldelade. De måste då länkas via for-attributet och id-attributet. I följande HTML-exempel implementeras enkla etiketter i sådana inmatningsfält.

<label for="vorname">Ditt förnamn: </label>

<input type“text“ name=“vorname“ id=“vorname“ />

<br />

Ditt meddelande:

<textarea name="message" id="message"> </textarea>

Här skapas först ett enradigt inmatningsfält för förnamnet med typen "text". Etiketten "Ditt förnamn:" görs synlig för alla av label-elementet. Denna placeras framför inmatningselementet, eftersom den matas ut före inmatningsfältet. Attributet for i label-Tag och attributet id i inmatningselementet länkar samman dessa områden. Det är viktigt att båda innehållen är identiska, annars kan de inte länkas. Attributet name fungerar som en identifierare för detta fält och krävs för att överföra data till en serversida.

Därefter skapas ett flerradigt inmatningsområde med taggen "textarea". Etiketten "Ditt meddelande:" visas sedan här via label-elementet. Även här länkas de två områdena med samma textinnehåll via attributen for och id.

Allmänna anmärkningar

Generellt sett bör formulär vara tydliga och otvetydiga. Förutsägbarhet är också mycket hjälpsamt. Detta gör att användarna snabbt kan se vad som krävs av dem. En tydlig och förnuftig struktur är också mycket viktig. Relaterade innehållselement kan grupperas tillsammans. Logiskt separerade enheter kan också separeras visuellt. Detta underlättar orienteringen. Dessutom kan de separeras från varandra med färg. Det är viktigt att minimikontrasten på 4,5:1 bibehålls.

Tangentbordsfunktionalitet

En av de viktigaste funktionerna för tillgänglig design av formulärfält är möjligheten att använda dem via tangentbord. Det finns personer som inte kan använda mus på grund av sin funktionsnedsättning. Det är därför desto viktigare att utforma formulär på ett sådant sätt att de också kan navigeras med tangentbordet. Användningen av etikettelement och aria-attribut gör formulär lättare att förstå och använda. Ett annat sätt att förenkla användningen via tangentbordet är användningen av kortkommandon. Här kan formulärelement lagras med kortkommandon. Detta kan bidra till att nå vissa områden snabbare eller att hantera funktioner snabbare. Attributet accesskey i HTML används för detta ändamål. Detta attribut infogas vid det element som det ska användas för. Där tilldelas helt enkelt tangenten, som sedan används för tangentbordskommandot. Om du till exempel tilldelar tangenten "n" till ett fält eller en knapp kan den hanteras i Windows med kortkommandot (Alt + n).

Se dock till att den här kortkommandot inte redan används för ett annat kommando i webbläsaren.

Minskning till minimum

Likaså är det lämpligt att reducera allt till det väsentliga för att inte belasta personer med funktionsnedsättning i onödan. Därför bör endast absolut nödvändiga uppgifter begäras. Frågor om redan befintliga uppgifter bör utelämnas. Dessutom kan synligheten av formulärfält anpassas till situationen. Valfria inmatningsfält eller fält som är kopplade till villkor behöver inte vara synliga. De kan visas när de behövs. Till exempel är frågan om barns ålder meningslös om det tidigare har valts att inga barn ska vara närvarande.

Hjälp och felmeddelanden

Dessutom bör inmatningshjälp erbjudas. Detta kan vara i form av en dialogruta eller ett verktygstips. Med deras hjälp kan inmatningen förklaras mer i detalj. En annan möjlighet vore att länka till en separat hjälpsida. Detta skulle öka framgångsgraden enormt. Misstag inträffar fortfarande. Viktiga är då meningsfulla felmeddelanden. Om till exempel lösenordet angavs felaktigt vid inloggning, bör meddelandet "Användarnamn eller lösenord är felaktigt" inte visas. Det är bättre att filtrera felet. Rätt här skulle vara: "Lösenordet du angav är felaktigt. Ange rätt lösenord".

Det finns flera typer av fel. Först formatfelet. Här anges lösenordet i fel format. Till exempel anges bokstäver istället för siffror. Värdefel kan också uppstå. Detta kan hända när ett felaktigt värde anges trots ett giltigt format. Ett exempel på detta skulle vara att ange värdet 34 för en tagg för datumet. Meddelandet skulle då lyda till exempel: "Månaden mars har 31 dagar. Ange taggen igen".

En annan typ av fel är ogiltig inmatning. Här anger utvecklaren värden som är ogiltiga. Slutligen finns det feltypen när ingen inmatning gjordes för obligatoriska fält. Detta händer till exempel om e-postadressen är ett obligatoriskt fält och inmatningen glömdes bort. Ofta händer detta även med de allmänna villkoren. På många webbplatser kommer du inte att kunna fortsätta utan att godkänna detta uttalande.

Obligatoriska fält

Formulär innehåller ofta obligatoriska fält. Dessa måste markeras som sådana. En ofta använd symbol för att indikera ett obligatoriskt fält är ett "*" som visas bredvid formulärfältet. I detta fall bör det dock påpekas direkt i början av formuläret att fälten markerade med en asterisk är obligatoriska fält. Ett annat alternativ är att visa dessa obligatoriska fält i en annan färg eller skuggning. Dessa är dock inte tillgängliga för alla. För att skärmläsaranvändare också ska kunna känna igen dem bör attributet required eller aria-required också användas. Detta talar om för skärmläsaren att det är ett obligatoriskt fält.

Platshållare

Ett sätt att göra formulär ännu mer lättförståeliga och användarvänliga är att använda platshållare i formulärfält. Platshållare är tillfälliga texter som visas i ett formulärfält för att indikera för användaren vilken typ av information som ska anges. Dessa texter försvinner när man klickar på eller fokuserar på formulärfältet och kan ersättas med det faktiska innehållet i formulärfältet. Platshållare kan enkelt infogas i HTML-inmatningselementet i ett formulärfält med hjälp av placeholder-attributet.

Spara inmatningar

Alla användare ska ha möjlighet att spara sina uppgifter. Problem uppstår gång på gång med längre formulär. För att undvika dataförlust här kan de sparas. För detta ändamål kan en knapp implementeras som sparar det aktuella läget. Detta gör det sedan enklare att fylla i komplexa formulär. Detta har också fördelen att saknade uppgifter kan kompletteras vid ett senare tillfälle. Detta beror på att upprepning av dessa uppgifter gör att vissa användare slutar fylla i formuläret. Detta kan vara irriterande för både webbplatsens operatör och användaren.

Autentisering och tidsgräns

Autentisering ökar säkerheten på internet. Det är dock också ett av de hinder som ständigt dyker upp. Dessa förekommer ofta på webbplatser där inloggning krävs. Men för att dessa ska vara tillgängliga för alla måste formulär utformas för att vara hinderfria. Detta beror på att autentiseringsprocedurer i många fall är tidsbegränsade. Människor har då väldigt lite tid att logga in. Ofta är det bara 30 eller 60 sekunder. För många personer med funktionsnedsättning är detta inte tillräckligt med tid för att logga in. Därför är det viktigt att inte begränsa inmatningen till en viss tid.

Captchas utgör ett annat problem. De används för att identifiera användaren som en människa och inte som en dator. Här ombeds användaren att identifiera en förvrängd bild och ange resultatet i ett formulärfält. Ofta måste dock alla bilder klickas på, till exempel de som visar en bil. Dessa är dock inte alltid hinderfria. Blinda eller synskadade personer kan inte känna igen dessa bilder. För att komma runt detta hinder bör ett ljudalternativ erbjudas.

Sammanfattningsvis är tillgänglig design av formulärfält ett viktigt steg på vägen mot en tillgänglig digital miljö. Användningen av korrekta beteckningar, en tydlig och strukturerad layout, samt manövrering via tangentbordet och motsvarande felmeddelanden ökar sannolikheten för att även personer med funktionsnedsättningar kommer att kunna fylla i formulären självständigt.