Jobba med tillgänglighet

Alt-texter

Syftet med alt-texter är att beskriva bilder för personer med nedsatt syn eller ingen syn alls. Beskrivningen ska vara kort och koncis. Användare med hjälpmedel kan få alt-texter upplästa för sig. Även de som surfar eller läser e-post utan bilder kan tillgodogöra sig informationen. En alt-text är inte detsamma som en bildtext.

En alt-text ska innehålla:

• En beskrivning av vad bilden föreställer.

En alt-text ska inte innehålla:

• Fotografens namn – ”Foto: Lisa Svensson.”
• Värderingar – ”En kvinna med snyggt hår.”
• Information om att det är en bild – ”En bild som föreställer…”
• Nyckelord i ett försök att ”boosta” sidan till sökmotorer (så kallad keyword stuffing eller spamdexing) – ”pannkaka pannkakor sylt frukost recept mat”

Exempel på alt-texter

Acceptabel alt-text: ”Man i en rulltrappa.”
Bättre alt-text: ”Man med ryggsäck går nerför en lång rulltrappa.”

Acceptabel alt-text: ”Två kvinnor vid en dator.”
Bättre alt-text: ”En kvinnlig lärare pekar på en elevs datorskärm.”

Kontexten spelar roll

Samma bild kan behöva ha olika alt-texter beroende helt på kontexten den förekommer i. Bedöm vad som är relevant och viktigt att förmedla till användaren.

Kontext: Ett fik med en meny.
Alt-text: ”En kopp cappuccino med mönster i mjölken.”
Innehållet i koppen är viktigast.

Kontext: En webbplats som säljer koppar och muggar.
Alt-text: ”Vit kopp med fat, i porslin. Ca 7 cm hög.”
Koppen är viktigast.

Tomma alt-texter

Det finns situationer där bilder inte ska ha en alt-text. Det innebär i praktiken att bilden döljs för hjälpmedel.

En bild kan vara rent dekorativ; det kan röra sig om grafiska mönster, eller ett montage av olika bilder och toningar. När bilden inte har en koppling till innehållet på sidans innehåll, då kan det vara lämpligt med en tom alt-text. 

Formatering i text

Var försiktig med två typer av formatering: understrykning och kursivering.

Understrykning

Stryk aldrig under text som inte är länkad. När en text är understruken signalerar det till användarna att den är klickbar.

Kursivering

Alla teckensnitt (fonter) är inte optimerade för att ha en god läsbarhet i digitala gränssnitt. Kursiv text kan alltså vara svårare att läsa, särskilt i hela stycken eller långa texter, till exempel bildtexter eller ingresser.

Kursiv text kan användas för att markera betoning av särskilda uttryck eller viktiga ord.

Om behovet är att skriva ut titlar på skrifter eller liknande är citattecken att föredra. 

Länktexter

Formulera länktexter som är tydliga, korta och begripliga. Försök, om det är möjligt, att skriva länktexten så att det går att förstå vart länken leder även om den är tagen ur sitt sammanhang.

Tydliga länkar underlättar för alla, men är särskilt viktigt för personer som använder vissa hjälpmedel. Skärmläsaranvändare kan till exempel välja att navigera genom att enbart läsa upp länkarna på en sida.

Ge ett löfte om vad som kommer att hända när användaren följer länken. Om länken går till en annan webbplats, skriv ut detta i länken.

Exempel:

• Visa lediga tider
• Så arbetar vi med hållbarhet
• Lagförslag, Riksdagens webbplats

Kända mindre bra länktexter

Alltför ofta ser vi länktexter som på inget sätt förklarar vad länken handlar om. Dessa nedanstående exempel är inte användarvänliga. De är dessutom också dåliga för SEO, då de inte innehåller några relevanta nyckelord för sökmotorer.

• Läs mer
• Klicka här
• OK
• Nästa

Öppna i samma fönster

De flesta CMS (webbpubliceringssystem) erbjuder möjlighet att öppna länkar i nytt fönster eller i ny flik.

Bakåt-knappen är en av de mest använda funktionerna i en webbläsare och ska fungera i alla situationer, vilket den oftast inte gör om sidan öppnats i ett nytt fönster eller ny flik.

Webbplatser ska vara förutsägbara. Länkar som plötsligt öppnas i nytt fönster (eller flik) kan ses räknas som en oväntad förändring.

Inte alla hinner uppfatta att en ny flik öppnades. Användningstester visar att risken är stor att användaren på en sådan webbplats blandar ihop bakåt- och stängknapparna och råkar stänga ursprungsfönstret när hen egentligen bara vill backa.

Om du som redaktör bedömer att länken ska öppnas i nytt fönster eller ny flik, låt användaren förstå det i förväg. Det får inte komma som en överraskning.

Exempel: Ansök nu (öppnas i ny flik)

Pdf-filer

Om ni lägger ut information i exempelvis pdf- eller wordformat blir den svårare att söka och komma åt för era användare. Publicera därför i första hand dokument, till exempel rapporter och utredningar, i webbplatsens standardformat (html).

Låt användarna komma åt er information utan att använda en viss datorplattform, eller ett program som kostar pengar, till exempel Microsoft Word. Användarna bör inte behöva skaffa en viss produkt för att kunna kommunicera med er.

Sammanfattning av dokumentet

Om ni har dokument i andra format än html, sammanfatta dem i html, så att användarna kan bedöma innehållet utan att ladda ner det.

Tillgängliga pdf-filer

Om ni använder pdf:er, se till att de skapas så att de blir tillgängliga. Det är möjligt att skapa tillgängliga pdf:er, men det krävs kunskaper. Gör så mycket som möjligt i originaldokumentet: rubriker, texter och bilder ska vara korrekt uppmärkta. Efter konvertering kan såväl innehåll som metadata behöva justeras i pdf-filen.

Inscannade dokument

Pdf-filen ska inte bestå av ett dokument som har scannats in eller fotats med mobilkameran:

• Texten är pixlar och kan därför inte uttydas som text av hjälpmedel.
• Det blir det suddigt om man zoomar in.
• Texten är inte sökbar.
• Innehållet är inte strukturellt uppmärkt med taggar för rubriker, listor, tabeller, bilder och så vidare.
• Bilder har inga alt-texter.

Tänk på att

Det är enkelt att ladda upp en pdf-fil till ett webbpubliceringssystem, men användarnas behov av att ha informationen tillgänglig är fortfarande desamma, oavsett om det är webbsidor, pdf-filer eller andra dokument.

Inifrån-och-ut

Var försiktig med att låta det interna perspektivet speglas ut på webbplatsen. De interna behoven och benämningarna är inte alltid desamma som användarnas behov och benämningar.

När interna ord och begrepp används på webbplatsen blir de svårbegripliga för utomstående. De kan skapa förvirring och bli ett hinder. Användarna kan känna en tveksamhet, de vågar inte klicka på länkar och knappar, och i värsta fall blir de frustrerade och lämnar webbplatsen.

Bygg webbplatsen och skapa innehåll utefter användaren. Använd ett språk som hen förstår. Förklara svåra men nödvändiga termer. Våga vara tydliga.

Undvik: ”När du bekräftat objektet i Oden skapas en PPSP3 som ska godkännas före SOP.”

• Vad är ett objekt?
• Vad är Oden?
• Vad är PPSP3 och SOP?

Skriv hellre: ”När du har skickat din beställning bygger vi en prototyp som ska godkännas före produktionsstart.”

Rubrikstruktur

Att använda rubriker korrekt bidrar till att

• sidorna på webbplatsen blir enhetliga
• sökmotorer hittar relevant information på sidorna
• webbläsare och hjälpmedel kan skapa en innehållsförteckning.

Hjälpmedel behöver en korrekt rubrikhierarki för att kunna beskriva innehållsträdet för användaren. Användare med skärmläsare kan navigera mellan rubrikerna – vilket gör att de också fungerar som en slags navigation.

Korrekt rubrikhierarki

Rubriker märks upp i html med <H>. H står för heading.

• H1 ska finnas på alla sidor. H1 beskriver vad sidan handlar om. Vanligtvis har man en H1 per sida, inte flera.
• H2 används för att enskilda avdelningar i texten.
• H3 är en underrubrik till H2.
• H4 är en underrubrik till H3.
• Och så vidare.

Exempel:

<H1> Våra simhallar
<H2> Priser
<P> Det kostar 100 kr att simma.
<H3> Rabatterade priser
<P> För seniorer och studenter kostar det 50 kr.

Kom ihåg

• Välj rätt rubriknivå utefter textens struktur.
• Välj inte rubriknivå utefter vad du tycker passar in visuellt.

Så ändrar du rubriknivå på folkhögskola.nu

Hänvisning till färg eller placering

Även de som har svårigheter att uppfatta färg eller form, eller saknar möjlighet att relatera till höger eller vänster behöver kunna förstå hänvisningar till navigation eller instruktioner.

Använd gärna sensoriska kännetecken (färg, form) – men ge alla användare möjlighet att förstå de instruktioner som ges.

Undvik:

• Klicka på knappen till höger.
• Läs texten i den gula rutan.

Komplettera med ytterligare information. Skriv hellre:

• Klicka på knappen ”Skicka”.
• Läs texten i den gula rutan ”Gör så här”.

Hjälpmedel

Tekniska hjälpmedel kommunicerar inte färg på sidans komponenter, inte heller visuell placering. Därför blir 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”.

Responsiv design

Det som ligger till vänster eller höger på en dator, hamnar ofta under eller ovanför på en mobiltelefon, vilket gör att instruktionen blir felaktig och omöjlig att förstå för alla användare.

Text som bild

Använd text, inte bilder, för att visa text. Försök att undvika att tillverka grafik där texten är en integrerad del av bilden.

Användare behöver då och då anpassa texten bland annat genom att förstora text, ändra färgschema eller radavstånd. Om texten utgör en del av en bild saknas ofta de möjligheterna.

En bild med integrerad text är inte heller responsiv vad gäller radbrytningar i mindre skärmar, och texten kan ibland bli väldigt liten och svårläst som följd.

Om bilden dessutom inte har en förklarande alt-text försvinner innehållet helt från innehållsträdet och blir omöjlig att tillgodogöra sig för personer som använder hjälpmedel.

Logotyper är undantagna.

Tillgänglighet i film

Video underlättar för den som har svårt att läsa, svårt att förstå eller svårt att fokusera. Många gånger kan det vara lättare att ta till sig innehåll i en video än om motsvarande information skulle finnas i en längre text.

Undertexter

Personer som av olika skäl inte tydligt kan uppfatta eller förstå ljud kan i många fall tillgodogöra sig innehållet om det finns i textformat.

Många tittar på videoinnehåll med ljudet avslaget, till exempel för att de inte vill störa personer i omgivningen eller saknar fungerande högtalare eller hörlurar.

Undertexter behöver inte vara helt ordagranna, men det är viktigt att de förmedlar samma information.

Syntolkning

Syntolkning är en talad röst som beskriver viktig visuell information som inte framgår av ordinarie ljud.

Ordna med syntolkning om det behövs för att personer med begränsad syn ska kunna ta del av innehållet.

Listor

Det finns olika typer av listor.

Oordnad lista (punktlista)

En oordnad lista innehåller punkter som presenteras utan inbördes ordning.

Exempel:

• Mjöl
• Bakpulver
• Ägg
• Mjölk
• Smör

Ordnad lista (numrerad lista)

I en ordnad lista är ordningen viktig.

Exempel:

1. Blanda mjöl och bakpulver.
2. Tillsätt ägg och mjölk.
3. Vispa till en jämn smet.
4. Grädda i våffeljärn.
5. Servera med grädde och sylt.

Tänk på att

Listor skapas genom att använda de verktyg som finns i mjukvaran. Skriv inte punkter, bindestreck eller siffror manuellt för att konstruera listor.

Hjälpmedel behöver korrekt kodade listor för att kunna kommunicera till användaren att en lista är just en lista. Längden på listan kommuniceras också.