När en snygg hemsida ändå är svår att använda
En sida kan se bra ut men skapa problem så fort någon försöker använda den på ett annat sätt än designern tänkt. Text kanske har för låg kontrast, fokusmarkeringen för tangentbord kanske inte syns eller ett formulär kan sakna tydliga etiketter.
Sådana problem påverkar personer med funktionsnedsättningar särskilt mycket, men ofta också andra besökare. Tydlig text hjälper även någon som står utomhus med mobilen, stora klickytor hjälper den som använder telefonen med en hand och begripliga formulär hjälper alla. Tillgänglighet är därför nära kopplat till vanlig användbarhet.
Vad är WCAG?
WCAG, Web Content Accessibility Guidelines, är internationella riktlinjer för hur digitalt innehåll kan göras mer tillgängligt. Riktlinjerna handlar bland annat om att innehåll ska gå att uppfatta, använda och förstå med olika förutsättningar och hjälpmedel.
I praktiken berör det exempelvis färgkontrast, text och rubrikstruktur, tangentbordsnavigering, fokusmarkeringar, länkar, knappar, bilder, alt-texter, formulär och semantisk HTML. Designvalvet använder WCAG-principer som en del av design- och utvecklingsarbetet, men det ska inte tolkas som juridisk rådgivning eller en generell garanti om full regelefterlevnad.
Vissa företag omfattas också av särskilda krav enligt tillgänglighetslagen. Läs mer om vilka företag som omfattas och vad lagen innebär för en hemsida
Vad innebär tillgänglighet i praktiken?
Struktur som går att förstå
Rubriker ska visa hur sidan är organiserad och inte bara användas för att göra text större. Semantisk HTML hjälper webbläsare och hjälpmedel att förstå vad som är navigation, huvudrubrik, innehåll, formulär och knappar.
Tangentbordsnavigering
Viktiga funktioner bör kunna användas utan mus. En användare ska exempelvis kunna tabba mellan länkar, formulärfält och knappar och hela tiden se vilket element som är aktivt.
Kontrast och typografi
Text behöver vara tydlig mot bakgrunden. Även textstorlek, radavstånd och radlängd påverkar hur lätt innehållet är att läsa, och samma sak gäller knappar och andra interaktiva element.
Bilder och alt-texter
En informativ bild kan behöva en alternativ text som förklarar dess relevanta innehåll för den som inte ser bilden. En rent dekorativ bild behöver däremot inte få en onödig beskrivning. Alt-text ska därför skrivas utifrån bildens funktion och inte som ett SEO-fält som måste fyllas med sökord.
Formulär och kontaktvägar
Formulär ska ha tydliga etiketter och begripliga felmeddelanden. Det ska också vara lätt att förstå vad som händer när formuläret skickas och vilka uppgifter som behöver fyllas i.
Så hjälper Designvalvet
Vi bygger en tydlig semantisk struktur
Vi använder HTML-element och rubriker på ett sätt som beskriver innehållets funktion, vilket ger en bättre grund både för tillgänglighet och teknisk kvalitet.
Vi granskar kontrast och typografi
Färgkombinationer, textstorlekar och visuella tillstånd behöver fungera i praktiken och inte bara se fina ut i en designfil.
Vi tänker på tangentbord och fokus
Interaktiva element byggs så att användaren kan se var fokus befinner sig och navigera utan att vara beroende av mus.
Vi bygger responsivt
Tillgänglighet och mobilanpassning överlappar ofta. Tydliga knappar, rimliga avstånd, läsbar text och fungerande navigation är viktiga på små skärmar oavsett vem användaren är.
Vi gör formulär och länkar begripliga
Knappar och länkar ska förklara vad som händer när man använder dem. Formulär ska vara tydliga och enkla att följa.
Vad får företaget ut av bättre tillgänglighet?
Framför allt en webbplats som fungerar bättre för fler människor. Många förbättringar som gör en webbplats mer tillgänglig förbättrar samtidigt den generella användarupplevelsen.
Tydligare rubriker gör sidan lättare att skumma, bättre kontrast gör innehållet enklare att läsa och begripliga knappar gör nästa steg tydligare. Tillgänglighet behöver därför inte stå i konflikt med en genomarbetad design – tvärtom kan tydliga ramar leda till bättre designbeslut.
Vem passar tjänsten för?
- Företag som ska bygga en ny hemsida och vill få en bättre grund från början.
- Företag med problem kring kontrast eller läsbarhet.
- Webbplatser där formulär eller navigation är svåra att använda.
- Företag som vill förbättra mobilupplevelsen.
- Verksamheter som riktar sig till en bred målgrupp.
- Företag som vill skapa en mer genomtänkt webbplats för fler användare.
Vanliga frågor om webbtillgänglighet
Vad betyder webbtillgänglighet?
Webbtillgänglighet innebär att webbplatser och digitalt innehåll utformas så att fler människor kan använda dem, även personer med olika funktionsnedsättningar. Det kan beröra allt från kontrast och textstorlek till tangentbordsnavigering, formulär och semantisk kod.
Vad är WCAG?
WCAG är internationella riktlinjer för webbtillgänglighet. De beskriver principer och kriterier för exempelvis kontrast, navigation, text, formulär och teknisk struktur och används som grund i många typer av tillgänglighetsarbete.
Gör tillgänglighet hemsidan mindre snygg?
Nej. Tillgänglighet sätter vissa ramar för exempelvis kontrast, läsbarhet och interaktion, men det finns fortfarande stora möjligheter att skapa en tydlig och visuellt stark design. God tillgänglighet och god design kan stödja varandra.
Varför är tangentbordsnavigering viktig?
Alla använder inte mus. Därför bör länkar, knappar och formulär kunna nås med tangentbord och ha en tydlig fokusmarkering. Det gör samtidigt webbplatsens interaktion mer strukturerad.
Behöver alla bilder alt-text?
Nej. Bilder som förmedlar relevant information kan behöva alt-text, medan rent dekorativa bilder normalt bör kunna ignoreras av skärmläsare. Alt-texten ska beskriva bildens funktion och relevanta innehåll i sammanhanget.
Kan Designvalvet garantera att en webbplats uppfyller alla juridiska krav?
Nej. Vilka juridiska krav som gäller kan bero på organisation och användningsområde. Designvalvet kan arbeta med tillgänglighet och WCAG-principer i design och utveckling, men det är inte samma sak som juridisk rådgivning eller en generell compliance-garanti.