Tillgänglighet - ett tekniskt perspektiv ...och ett mänskligt

Formellt så är det EU-standarden ”EN301549” som ligger som grund till kraven. Standarden baseras i stora delar på W3Cs rekommendationer i standarden WCAG version 2.1. Dessa dokument finns fint sammanfattade hos DIGG. Vi rekommenderar dock att ni även tittar igenom nyheterna i WCAG 2.2 som troligen kommer bli EU-standard framöver. I den här artikeln har vi lyft fram det som vi tycker är viktigast och (förhoppningsvis) lättast att åtgärda.

Hjälpmedel och standarder

För personer som behöver stöd finns det både inbyggda hjälpmedel i operativsystem och webbläsare samt externa hjälpmedel som kan integreras med datorn. För att dessa ska fungera så bra som möjligt ska er sajt följa gällande webbstandarder. Om HTML-koden är korrekt blir det lättare för en skärmläsare att läsa upp innehållet för besökaren. Det kan till exempel vara bättre att använda <header> istället för <div class=”header”> och att se till att sajtens huvudnavigation ligger i ett <nav>-element. Se till att alla länkar faktiskt är länkar (<a>-element) och inte knappar som navigerar med Javascript. Små förändringar som gör det lättare för ett hjälpmedel att förmedla rätt information till användaren. Se också till att rubriker på en sida kommer i rätt ordning då det hjälper användaren att navigera i texten. Kom ihåg att allt innehåll på sajten ska vara läsbar av en skärmläsare. Text i bilder är sällan en bra idé och om ni har video eller ljudklipp på sajten ska det finnas en textversion av innehållet som ett alternativ.

Utseende och zoom

Även CSS-koden behöver skrivas korrekt för att skapa en inkluderande sajt. Personer som har sämre syn väljer ofta att zooma sajten för att göra text och bilder större. Se därför till att er sajt fungerar med en högre zoom-nivå. Standardstorleken för text i en webbläsare är oftast 16 pixlar men det kan en användare ändra. Se då till att er sajt följer detta istället för att tvinga användaren att zooma varje gång. Glöm inte heller bort användare med nedsatt färgseende. Se till det finns annat än bara färg som särskiljer olika element och att det är en tydlig kontrast mellan text och bakgrund.

Formulär och modaler

Om det är något som skapar problem med tillgänglighet mer än något annat så är det olika typer av formulär. I teorin är det ganska enkelt att bygga tillgängliga formulär, det finns mängder av inmatningsfält av olika sorter i HTML-standarden. Problemet är att de inte alltid passar med annan önskad funktionalitet eller grafisk design. Istället byggs smarta funktioner som stjälper istället för hjälper. – På kreditkort grupperas siffrorna i grupper om fyra. Då är det inte ovanligt att en e-handelssajts inmatningsfält ”hjälper till” med att slänga in ett mellanslag efter fyra tecken. Att då trycka på bakåttangenten för att rätta ett fel kan bli helt omöjligt. Sådana misstag är irriterande för de flesta men kan göra tjänsten helt oanvändbar för de som behöver extra stöd.

Använd standardfunktionalitet så kommer det bli lättare för alla som använder tjänsten.

• Använd rätt typ av inmatningsfält för den information som efterfrågas.
• Hjälp användaren direkt när fel information fylls i, vänta inte tills formuläret ska skickas.
• Varje inmatningsfält bör ha en label, lita inte på endast placeholder.
• Gruppera formulärets fält i logiska delar. Använd gärna fieldset och legend för olika grupper.

Modaler är en annan vanlig källa till frustration. Information som döljs i en modal kan vara svår att hitta och när modalen väl öppnats kan det vara ganska klurigt att stänga den igen. Se till att det är tydligt i koden att en modal kommer att öppnas och att det finns en stängknapp i modalen som är lätt att hitta (Esc-knappen får gärna stänga modalen). När modalen öppnas bör användarens fokus flyttas till modalens första interaktionselement (gärna en stängknapp) och när den stängs bör fokus gå tillbaka till där det var innan modalen öppnades.

Tangentbord

Hela sajten bör vara tillgänglig genom att endast använda tangentbordet. Hoppa mellan interaktiva element med tab, gör val med mellanslag och skicka in formulär med enter. Allt detta är standard och med korrekt HTML kommer tangentbordet fungera utan problem.

För att underlätta finns attribut som tabindex som kan användas för att ändra ordningen på hur fokus flyttas när användaren trycker på tab (element som normalt skulle få fokus kan också ignoreras). Se till att inte låsa in tangentbordsanvändare när modaler öppnas eller liknande. Skriv inte över vanliga tangentbordskombinationer med egen funktionalitet. Ge möjlighet att stänga av sajtens egna kombinationer. Kom ihåg att information som endast visas vid hover eller klick kan vara svår att hitta för tangentbordsanvändare.

ARIA-attribut

För att underlätta för skärmläsare och andra hjälpmedel finns det ARIA-attribut för olika HTML-element. ARIA-attribut kan användas som ett komplement till HTML-kod för att göra sidans innehåll tydligare för användaren. Ikoner och andra rent visuella element kan ignoreras av skärmläsare genom att lägga till attributet aria-hidden=”true”. Hjälptexter och felmeddelanden kan lyftas fram med attributet role=”alert”. Ikoner som är interaktiva kan bli läsbara med attributet aria-label=”Öppna meny”. Det ska dock påpekas att aria-attribut är komplement som inte ersätter korrekt HTML-kod. Det är t ex bättre att använda <label> än att slänga på aria-label på ett inmatningsfält. Felaktigt användande av ARIA-attribut kan skapa mer problem än att inte ha dem alls, så använd dem gärna men bara där de verkligen gör nytta.

Testa användbarhet

Det finns mängder av system som kan gå igenom en sajt och analysera koden för att hitta möjliga problem med tillgänglighet. Kanske är det ingen dum idé att schemalägga ett jobb som körs på sajten innan en uppdatering går live? Det bästa sättet är förstås att testa sajten är dock att försöka själv.

• Försök nå alla sajtens funktioner endast med tangentbordet – Gick det?
• Navigera sajten endast i gråskala – Syns allt som behöver synas?
• Starta en skärmläsare och blunda – Förstår du vad som händer på sajten?

Sammanfattningsvis handlar tillgänglighet från ett tekniskt perspektiv främst om att inte bygga in svårigheter i onödan. De standarder och hjälpmedel som finns idag är framtagna med grundläggande webbteknik i åtanke. Följer ni de råd som finns kommer er sajt att fungera utmärkt.