Blogginlägg -
Tillgänglig e-handel för alla – Tips för att förbättra din sajt
I den avslutande delen i artikelserien om Tillgänglig e-handel för alla kommer vi att ge några sammanfattande tips för att förbättra din sajt. I de tidigare delarna har vi gått igenom kundernas behov och lagkrav, inkluderande design och strukturerade flöden, samt genomtänkt frontend och vägledande texter.
Struktur och navigering
Det är viktigt att användaren kan förstå hur sajten är uppbyggd och lätt kan hitta. Beroende på vad som passar bäst ska man kunna bläddra i kategorier, filtrera eller söka efter en produkt.
- Sidstruktur i koden. Det är viktigt att börja titta på sajtens HTML för att säkerställa att det finns en logisk struktur, det kommer även att hjälpa skärmläsare. Navigationsmenyerna kan placeras i början eller slutet av källkoden så att de kan hoppas över. Element som återkommer placeras med fördel på samma ställe på de olika sidorna så att användarna kan hitta lättare.
- Element och taggar. Var noggrann när koden skrivs så att element och taggar används på rätt sätt. Huvudinnehållet ska vara markerat som <main> och <footer> för sidfoten till exempel. Knappar ska kodas som <button> och inte <div>. Även rubrikanvändningen är viktig för att skapa struktur, som H1, H2 och H3.
Tangentbord och hjälpmedel
Allt man kan göra med en mus ska man kunna göra med ett tangentbord. Tänk särskilt på tabbordning om man ska hoppa mellan olika knappar och fält, annars kommer det att försvåra för de som är beroende av att använda tangentbordet.
- Synliga fokuspunkter. Gör det även tydligt var fokuspunkten är på sajten och att alla element som användaren kan interagera med går att fokusera på via tangentbordet. Anpassa gärna markeringen så att den passar sajtens färgtema.
- Dynamiskt innehåll. Om man visar nytt innehåll med aktivitet på tangentbordet, eller ett klick så är det bra att flytta fokus in i den dialogen eller menyn när den öppnas så att man inte fastnar i bakgrunden. Detsamma gäller när den stängs så att fokus flyttas tillbaka till där man var.
- ARIA-attribut. När du har information som inte finns i HTML så kan man använda ARIA-attribut för att ge mer information om elementets syfte och funktionalitet till hjälpmedel. Kontrollera sedan så att de fungerar som avsett med skärmläsare och andra tillgänglighetsverktyg.
- Testa med olika hjälpmedel. Testa gärna med olika former av hjälpmedel som skärmläsare. Pröva att bara använda en hand eller att bara använda tangentbordet för att se sådana saker som kan vara lätt att missa som kan öka konverteringen om de fixas till.
Kontrast och färger
Alla har vi väl någon gång mötts av för dålig kontrast på en webbsida som gör det svårläst även för de utan permanent eller tillfällig synnedsättning.
- Tillräcklig kontrast. Minimikraven är 3:1 för större rubriker samt grafik och 4,5:1 för brödtext i WCAG, men se gärna till att ha ännu mer kontrast där det är möjligt. Vissa användare behöver 7:1 för att tycka att det är bekvämt.
- Färgval. Undvik helst gul eller ljusgrå text på vit bakgrund, eller ljusa knappar. Det finns olika verktyg för att göra tillgänglighetskontroller, använd gärna de för att få ett mått på kontrast. Det som kan se ok ut för ditt öga behöver inte vara tillräckligt bra. Se även till att testa på olika skärmar och med olika belysning.
- Mönster och bakgrundsbilder. Behöver du lägga text ovanför en bakgrundsbild är det viktigt att tänka på att du troligtvis behöver använda någon skugga eller färgat skikt bakom texten. Tänk även här på färgvalet på texten så att det blir tillräcklig kontrast.
Bilder och media
För att förbättra tillgängligheten på webbplatsen är det viktigt att tänka på hur information presenteras visuellt, auditivt och interaktivt.
- Beskrivande ALT-texter. Det är värdefullt för tillgänglighet med beskrivande ALT-texter för bilder för att användaren ska få med sig det viktigaste. I stället för bara Klänning kan man som ALT-text skriva Svart kort sammetsklänning med smala axelband.
- Alternativ information. Om median inte kan visas av någon anledning är det viktigt att säkerställa att den viktigaste informationen går att ta del av på något annat sätt. Till exempel att produkttexten är fullt tillräcklig.
- Ljud och video. Se till att erbjuda text till allt tal som ni visar i videoklipp på sajten. Det är inte bara bra för hörselskadade, utan är bra för alla de som inte har ljud på. Ett alternativ att överväga är syntolkning som komplement om det även är viktig visuell information som visas i videon, men som inte förmedlas med tal. Har ni till exempel en podcast på sajten så se till att erbjuda en sammanfattning eller transkribering av innehållet.
- Zooma in bilder. Om ni har möjlighet för användaren att zooma in bilder så glöm inte att se till att det går att styra med tangentbordet. Se även till att förmedla instruktioner för hur man till exempel stänger fönstret om det är i helskärmsläge.
Läsbarhet och innehåll
Oavsett om det handlar om produktbeskrivningar eller villkor och ledtexter så är det viktigt att texterna är lätt att begripa för så många som möjligt. Jobba på att förbättra läsbarheten.
- Skriv koncist och enkelt. Tänk på att skriva så direkt som möjligt utan att utelämna något som är relevant. Skriv gärna med enkelt och klart språk för att inte tappa bort någon. Om man ställer sig frågan om något kan missförstås eller förenklas och börjar fundera i de banorna så är det läge att göra ett omtag på texten. Här använder sig en del av AI för att jobba med språkförbättringar. Men glöm inte att korrekturläsa allt för att se att allt stämmer med hur ni vill uppfattas och att all fakta blir rätt.
- Skriv konsekvent. Bestäm dig för en terminologi och se till att den används överallt på sajten, det gör det lättare för användaren att förstå att man hela tiden pratar om kundvagnen i stället för att blanda det med kundkorgen, varukorgen, kassen och liknande.
- Strukturera innehållet. Det blir lättare att läsa om man delar in längre texter i stycken och använder sig av underrubriker, punktlistor, fetstil och annat för att visa det som är viktigt. Glöm inte att även det visuella innehållet är tillgängligt via ALT-texter eller beskrivningar. Det är även viktigt att till exempel produktsidor byggs upp på liknande sätt för att användaren ska ha lättare att hitta.
Flöden och formulär
När man har formulär på sajten är det mycket användbart att både tydligt ange vilka fält som är obligatoriska och även ange ledtexter för att man ska fylla i rätt information direkt. Små förbättringar kan göra en stor skillnad, man hittar många brister på tillgänglighet i formulär.
- Ledtexter. <label> kan användas i koden för att till exempel visa i vilket format personnumret eller mobilnumret ska anges i. Om man i stället använder en placeholder i fältet som försvinner när man börjar skriva i fältet riskerar man att användaren glömmer vad som stod där och skriver in det i fel format.
- Obligatoriska fält. Var konsekvent när du markerar obligatoriska fält, vanligast är med en asterisk *, glöm inte att även ange vad det betyder. Tänk även igenom vilka fält som verkligen behövs. Ju fler fält, desto större hinder.
- Felmeddelanden. Oavsett hur mycket man försöker underlätta för användarna så kommer vissa inmatningar att bli fel. Tänk på att tydligt markera fältet som är fel, till exempel med en röd ram och en förklarande text. Helst även med en instruktion hur det ska åtgärdas. Använd aria-attribut och fokusering för att skärmläsare ska kunna uppfatta det också. Det är viktigt att få med texten också så att inte färgblinda missar uppmaningar som bara förmedlas med färg.
- Validera fält. Validera gärna vissa fält i realtid för att ge feedback, till exempel lösenordsstyrka, men här är det viktigt att göra det utan att det stör för mycket och att se till att feedbacken är lätt att förstå.
- Tydliga flöden. Det kan vara en bra idé att dela upp flöden så att det blir tydligt för användaren. Till exempel att förklara vilket steg man är i under köpprocessen, ”Steg 2 av 3 – Fraktalternativ”, det kommer att hjälpa konsumenterna att orientera sig. Tänk även på att inte spara alla avgifter och villkor till sist, utan visa dem så tidigt som möjligt i kassaflödet. Transparens ökar chanserna till konvertering. Säkerställ även att de betalmetoder ni erbjuder följer tillgänglighetskraven. Skulle konsumenten uppleva något problem att slutföra köpet är det viktigt att de lätt kan kontakta kundtjänst i samband med detta.
Enheter och responsivitet
Många av era användare besöker säkert onlinehandeln på mobiler eller surfplattor, det är nödvändigt att den fungerar som det är tänkt på olika enheter och skärmstorlekar och vid olika inzoomningar.
- Responsivitet. För att skapa sajter som anpassar sig efter olika skärmstorlekar har man länge byggt responsivt. Innehållet ordnas då på ett bra sätt oavsett om du sitter med en stor skärm på skrivbordet eller en liten mobiltelefon i handen. Viktigt att tänka på är att man helst ska undvika att användaren behöver scrolla åt sidan på en mobil för att läsa.
- Förstora och zooma. De som ser dåligt av någon anledning zoomar gärna in ordentligt, se till att sajten fungerar att zooma minst 200 % utan att något viktigt försvinner eller påverkar layouten negativt. Vissa undantag finns för till exempel kartor och diagram.
- Touchelelement. Där man har en touchskärm måste knappar och länkar vara tillräckligt åtskilda och stora för att man lätt ska kunna trycka på den.
- Orientering. Se till att innehållet och funktionerna behålls även om man roterar skärmen. Är det så att innehållet fungerar absolut bäst i ett visst läge så informera användaren tydligt om det då.
- Testa på flera enheter. Se hur e-handeln fungerar på olika enheter genom att göra fysiska tester också med olika webbläsare och enheter med olika skärmstorlek och inte bara simulerade tester.
Prioritera tillgänglighet i ert kontinuerliga arbeta med sajten – i alla team. Om det är något som både beställare, designers, utvecklare och redaktörer tänker på direkt så kommer det att bli en naturlig del av vidareutvecklingen. Tillgänglig e-handel är en investering som både är nödvändig och värdehöjande. Genom att jobba igenom områdena ovan kan ni framtidssäkra er e-handel inför de nya lagkraven samtidigt som ni skapar en bättre upplevelse för alla kunder.
