Webbdirektivet

Ge alternativ i form av text till innehåll som inte är textbaserat, så att det kan omvandlas till det format som användarna behöver, till exempel stor stil, punktskrift, tal, symboler eller enklare språk. Exempel på innehåll är bilder, animationer, ljud och diagram

• Använd alt-attribut för att ge en icke visuell beskrivning av bilder på webben.
• När en textbeskrivning ligger separat, som exempelvis en bildtext, kan man knyta id-attributet för det element som innehåller beskrivningen till det som beskrivs till exempel med hjälp av aria-labelledby eller aria-describedby. Den kan då vara längre och även innehålla länkar.

Man använder html-elementen för att ge såväl grafisk särskiljning som strukturell igenkänning åt de olika delarna i ett innehåll. Detta bygger en hierarki av sidans innehåll. Genom att använda kodelementen på rätt sätt skapar man en struktur som kan tolkas genom en skärmläsare. Metoden kan även ge en bättre sökbarhet på internet.

• Skapa rubriker med h-element
• Skriv rubriker till tabeller och kolumnrader
• Markera i kod vid byte av språk
• Markera i kod användning av förkortningar
• Betona innehåll med elementet em och inte bara kursivering, eftersom det inte går att kursivera skärmläsarens tal.
• Använd rätt typ av lista: UL, OL, eller DL. En ordnad lista används när punkterna behöver komma i rätt ordning. Det är inte viktigt i en oordnad lista används inte för att skapa extra mellanrum mellan rader. Definitionslistan ger ytterligare funktionalitet till listan genom att koppla en beskrivning till en term.

Utforma innehållet på ett sätt som bevarar den avsedda ordningsföljden av innehållet i en text. Det betyder att ordningen inte ska ändras exempelvis vid mindre skärmar där textinnehållet påverkas genom smalare läsyta.

• Testa läsordningen genom att granska en sida av varje sidtyp med några skärmar i olika storlek och genom att lyssna igenom innehållet med en skärmläsare.
• Se till och testa även att läsordningen är logisk i dokument som inte är html (pdf, word med mera).
• Anpassningsbart: Skapa innehåll som kan presenteras på olika sätt (exempelvis med enklare layout) utan att information eller struktur går förlorad. Innehållet ska struktureras på ett sådant sätt att det är begripligt även med css bortkopplat.

Det är inte möjligt för alla att uppfatta form eller storlek eller att kunna relatera till höger eller vänster på en skärm. Exempelvis är det svårt för en person som använder skärmläsare att förstå en instruktion som ”klicka på knappen till höger”.

Därför måste instruktioner av den här typen kompletteras med ytterligare information för att alla ska kunna förstå.

Vissa användare kan inte uppfatta färgskillnader, till exempel på grund av färgblindhet eller för att de använder en monokrom skärm eller skärmläsare. Speciellt  färgerna grön, röd och brun är för många lätta att sammanblanda för personer med med färgblindhet. 

Användningen av färger kan förtydligas genom komplettering genom att:

• ge textområde en ram eller att använda fetstil, kursivering eller annat teckensnitt
• komplettera med ikoner
• skapa mönster i diagram och kartor för att särskilja exempelvis ytmarkeringar.
• ge beskrivning i text.
• skapa en semantisk kodning där sammanhanget framgår

Det ska vara möjligt att förstora texten till åtminstone dubbel höjd och bredd utan att problem uppstår (till exempel att text hamnar bakom en bild eller krockar med annan text). Detta beroende på att vissa webbläsare erbjuder enbart förstoring av text, medan övrigt innehåll inte förstoras. För att kolla detta måste man  gå till webbläsarens inställningar och ändra textstorlek, det duger inte att kolla genom att man exempelvis zoomar in innehållet (vilket ju även det ska gå, utan att scroll i sidled uppstår)

• Placera text i utrymmen som är tillräckligt stora eller som anpassar sig efter innehållet.
• Ta hänsyn till att texter kan ändra storlek om du använder absolut positionering av element som riskerar att krocka med texten.

Bra kontrast mellan text och bakgrund är viktigt för läsbarheten, särskilt för personer med nedsatt synförmåga. Personer med nedsatt syn har ofta svårt att läsa text med bristande kontrast mot textens bakgrund. Det finns programvara som kan läsa om  kontrasten är tillräcklig:

webaim-contrastchecker

• Lita inte på automatisk granskning av kontraster
• Överträffa gärna gränsvärdena för kontrast
• Överväg att låta användaren välja kontraster

Användare har oftast goda möjligheter att kontrollera hur digital text presenteras, när texten utgörs av en del av en bild saknas de möjligheterna. Då blir bilden och texten pixlig om den förstoras och det är svårt eller omöjligt att byta teckensnitt eller färger. Man ska därför undvika att använda text i form av bild. (Logga är undantagen från regeln). När bilder trots allt behöver innehålla text kan denna ofta göras tillgänglig för alla genom att:

• Använda CSS för att placera text i bilden, istället för att ha texten avbildad.
• Generera bilden dynamiskt med hänsyn till användarens preferenser för teckensnitt, storlek och förgrund- eller bakgrund. Observera att detta kan kräva en del programmering och att sidan kan behöva innehålla kontroller för att ställa in sådana preferenser. Komplettera med en alt-text.
• Skriv alt-text till knappar, logotyper, skärmdumpar och diagram som förmedlar samma information som bilden.
• En bild av ett handskrivet brev kan ha antingen en alt-text som återger innehållet eller en kompletterande text med samma funktion.

En bra beskrivande titel (title) sammanfattar både sidans ämne och dess innehåll. Varje sida på en webbplats, liksom andra typer av dokument bör ha en unik titel. Detta hjälper användarna att orientera sig och att lättare hitta innehåll. Bra utformade sidtitlar hjälper till exempelvis vid listor med sökresultat. Det hjälper även till vid allmänna sökningar på internet. Därför bör varje sida på en webbplats, och även andra typer av dokument ha en unik sidtitel.

• Beskriv sidans ämne eller innehåll.
• Formulera en titel som går att förstå på egen hand. Det kan till exempel innebära att avsändaren eller webbplatsens namn anges i slutet av sidtiteln.
• Titeln bör vara så tydlig och så unik som möjligt utan att bli för lång.

En del användare navigerar med hjälp av tangentbord eller andra inmatningsenheter som gör att man  kan flytta fokus mellan sidans olika element. Det vanligaste är att använda tab-tangenten, men även andra tangenter används, till exempel pilar. Det är viktigt att fokus-ordningen är logisk i förhållande till hur innehållet presenteras på skärm eller i skärmläsare. Fokus får inte flytta till ett oväntat element, det är förvirrande. Oftast följer fokusordningen den ordning som innehållet har i html-koden, men det är inte alltid den ordningen överensstämmer med presentationen. Det blir lättare att registrera fokus om detta framhävs visuellt, genom en grafisk förändring av fokusområdet (detta hjälper inte personer som använder skärmläsare).

• Kontrollera ordningen utan pekdon.
• Kontrollera att fokus markeras på valt område
• Säkerställ en logisk ordning med tabindex.

Tydliga länkar kan hjälpa användare av skärmläsare att välja att navigera genom att enbart läsa upp länkarna på en sida. En regel är därför att, när detta är möjligt, skriva länktexten så att det går att förstå vart länken leder även om den är tagen ur sitt sammanhang. Genom att låta användarna förstå syftet med varje länk underlättas därmed navigationen på sidan.

• Formulera länktext med omsorg. Användaren måste kunna förutse vad som händer vid klick på länken.
• Låt sammanhanget och syftet med länken avgöra om den exempelvis ska placeras i brödtexten eller utanför.
• Utforma länkar till dokument och länkar till e-post så att användaren får rätt förväntningar.
• Länktexten ska vara självförklarande eller förtydligas genom title-text.
• Ange i länken om denna öppnas i nytt fönster

Beskrivande rubriker, ledtexter och etiketter hjälper användarna att förstå en sidas innehåll och syfte. Man använder dessa html-element för att ge såväl en grafisk särskiljning, som en strukturell igenkänning åt de olika delarna på en sida. Genom att använda kod-elementen strukturerat och konsekvent skapar man en struktur som kan tolkas genom en skärmläsare. För personer som navigerar med tangentbordet och/eller använder skärmläsare ger detta en möjlighet att hoppa till olika delar av innehållet. Metoden kan även ge en bättre sökbarhet på internet.

Några regler vid rubriksättning

• Använd nyckelord ur texten.
• Skriv de viktigaste orden först.
• Använd aktivt språk, gärna verb.
• Gör inte rubrikerna längre än 5-10 ord.

Ledtexter till formulär

För varje fält i ett formulär där användarna ska fylla i information, ska man skapa en tydlig etikett för fältet (vanligtvis elementet label) som förklarar fältets funktion. Genom att använda "label for" kan man koppla ihop fältet och texten vilket ökar den klickbara ytan och ökar tydligheten om fältetst syfte.

Utifrån det angivna språket på sidans rotelement anges förändringar till detta i löpande redaktionell text på sidorna.

Ange aktuellt språk med lang-attribut på omslutande element när är språket i ett element är ett annat än sidans huvudspråk.

För att användarna ska förstå hur webbplatsen fungerar är det viktigt att komponenter på sidor är likformigt utformade, både i utseende, funktionalitet och uppbyggnad.

Det betyder inte att alla sidor måste se likadana ut, men liknande uppgifter ska utföras på samma sätt oavsett var på webbplatsen man befinner sig. Detta underlättar främst för användare som memorerar strukturen på en webbplats, om den förändras blir det besvärligt för dessa. Använd därför även samma termer för återkommande funktioner som till exempel  knappar och ikoner, eftersom vissa användare saknar till exempel layout och formgivning som annars kan användas för orientering.