EU-direktivet som gäller offentliga webbplatser och applikationer är i stora delar en vidareutveckling av de riktlinjer man inom offentlig sektor arbetat utifrån sedan början av 2000-talet. Genom att implementera och underhålla detta regelverk bygger man inte bara en applikation som är tillgänglig för alla, utan man värdesäkrar även sin investering genom att höja kvalitén på denna.

Nedanstående sammanställning är ett urval av krav som rör det redaktionella arbetet med en webbplats.
- 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.
- 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.
- 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.
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
- 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ä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.
- 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.
- Kontrollera ordningen utan pekdon.
- Kontrollera att fokus markeras på valt område
- Säkerställ en logisk ordning med tabindex.
- 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. Läs sammanställning av alla krav för att uppnå nivåerna A och AA (öppnas som PDF)
Här är en sammanställning av alla punkter av nivåer A och AA för att uppfylla minimikraven för webbdirektivet
Det här är en sammanställning av de punkter som finns under webbriktlinje.se med förklaringar till respektive regel som speciellt berör det redaktionella arbetet med en webb. Sammansättningen av regler innefattar arbetet både med design av en applikation, programmering och implementation av kod och senare redaktionellt arbete .
Läs sammanställning av alla krav som ska följas för att uppnå kraven i webbdirektivet