Skip to main content

Tillgänglighet för innehållsskapare: Skriv och producera inkluderande innehåll

Tillgänglighet börjar inte med design och slutar med kod. Innehållsskapare — skribenter, redaktörer, marknadsförare och multimediaproducenter — har en direkt och betydande inverkan på om digitalt innehåll är användbart för alla. De ord du väljer, den struktur du skapar, de bilder du beskriver och den media du producerar avgör alla upplevelsen för användare med funktionsnedsättning.

De goda nyheterna är att skriva tillgängligt till stor del handlar om att skriva bra. Tydligt, strukturerat och beskrivande innehåll gynnar alla användare, inte bara de som använder hjälpmedel.

Skriv med tydligt språk

Tydligt, rakt på sak-skrivande är ett tillgänglighetskrav, inte bara en stilpreferens. Användare med kognitiva funktionsnedsättningar, inlärningssvårigheter som dyslexi, icke-modersmålstalare och användare som helt enkelt är upptagna eller distraherade gynnas alla av innehåll som är lätt att förstå.

Skriv i korta meningar med aktiv form. Använd vanliga ord snarare än jargong eller teknisk terminologi — och när specialiserade termer är nödvändiga, förklara dem. Dela upp långa stycken i kortare paragrafer med beskrivande underrubriker. Använd listor när du presenterar flera punkter eller steg. Undvik idiom, metaforer och kulturspecifika referenser som kanske inte översätts väl.

WCAG kräver att innehåll ska vara så läsbart som möjligt, och på nivå AAA, att kompletterande innehåll eller en alternativ version tillhandahålls när texten kräver en läsförmåga som är mer avancerad än grundskolenivå.

Alternativtext för bilder

Alternativtext är ett av de viktigaste innehållsansvaren. Varje bild som förmedlar information behöver ett textalternativ som kommunicerar samma information till användare som inte kan se bilden. Skärmläsare läser upp alt-texten högt, och den visas när bilder inte kan laddas.

Att skriva bra alt-text handlar om att kommunicera syfte, inte bara utseende. Fråga dig själv: vilken information förmedlar denna bild som en användare behöver veta? Ett foto av ett team i ett möte kan behöva alt-text som "Team samarbetar kring projektplaner runt ett konferensbord" snarare än "foto.jpg" eller ett vagt "teamfoto".

Olika typer av bilder kräver olika tillvägagångssätt:

Informativa bilder som förmedlar innehåll behöver beskrivande alt-text som kommunicerar informationen. Håll det koncist — vanligtvis under 125 tecken — men säkerställ att den väsentliga informationen finns med.

Funktionella bilder som ikoner som används som knappar behöver alt-text som beskriver funktionen, inte utseendet. En förstoringsglasikon i en sökknapp bör ha alt-texten "Sök", inte "förstoringsglas".

Dekorativa bilder som tillför visuellt intresse men ingen information bör ha tom alt-text (alt="") så att skärmläsare hoppar över dem helt. Stockfoton som används enbart i estetiskt syfte faller ofta in i denna kategori.

Komplexa bilder som diagram, grafer, infografik eller illustrationer behöver mer än ett kort alt-attribut. Ge en kort alt-text som identifierar bilden, och tillhandahåll sedan en detaljerad beskrivning i närheten — antingen som synlig text, en bildtext eller en länkad lång beskrivning.

Länktext

Länkar bör vara begripliga utanför sitt sammanhang. Skärmläsaranvändare navigerar ofta genom att ta fram en lista över alla länkar på en sida. Om varje länk säger "Läs mer" eller "Klicka här" är den listan värdelös.

Skriv länktext som beskriver vart länken leder eller vad den gör. Istället för "Klicka här för att ladda ner vår tillgänglighetsguide", skriv "Ladda ner vår tillgänglighetsguide". Istället för "Läs mer", skriv "Läs mer om WCAG-överensstämmelsenivåer".

Använd aldrig en rå URL som länktext om inte URL:en i sig är den information som kommuniceras. URL:er är svåra att läsa högt och ännu svårare att förstå när de hörs.

Rubriker och struktur

Använd rubriker för att skapa en meningsfull innehållshierarki, inte för visuell styling. Skärmläsaranvändare navigerar via rubriker för att skanna innehåll och hoppa till intressanta avsnitt. Rubriker måste följa en logisk ordning — H1 för sidtiteln, H2 för huvudsektioner, H3 för undersektioner inom dessa sektioner — utan att hoppa över nivåer.

Varje sida bör ha exakt en H1. Underrubriker bör vara tillräckligt beskrivande för att en användare ska kunna förstå avsnittets innehåll enbart utifrån rubriken.

Tabeller

Använd tabeller för tabelldata — information som har meningsfulla samband mellan rader och kolumner. Använd aldrig tabeller för visuell layout. När du använder tabeller, inkludera korrekta rubrikceller med <th>-element med scope-attribut som anger om de är rad- eller kolumnrubriker. För komplexa tabeller med flera rubriknivåer, använd id- och headers-attribut för att explicit koppla dataceller till sina rubriker.

Tillhandahåll en bildtext eller sammanfattning som beskriver tabellens syfte, särskilt för komplexa datatabeller.

Listor

När du presenterar en grupp relaterade objekt, använd faktiska HTML-listor — ordnade listor (<ol>) för sekventiella objekt och oordnade listor (<ul>) för icke-sekventiella objekt. Skapa inte falska listor med radbrytningar och bindestreck eller punkttecken. Korrekt listmarkup talar om för skärmläsare hur många objekt som finns i listan och var användaren befinner sig i den.

Video- och ljudinnehåll

Multimediainnehåll har specifika tillgänglighetskrav:

Textning måste tillhandahållas för all förinspelade video med ljud. Textningen måste inkludera all talad dialog, identifiera vem som talar när det inte är visuellt uppenbart, och inkludera meningsfulla ljudeffekter. Textningen bör vara synkroniserad med ljudet och tillgänglig som undertexter som användare kan slå av och på.

Transkriptioner måste tillhandahållas för förinspelade enbart-ljud-innehåll som podcaster. Transkriptioner bör inkludera allt talat innehåll, identifiera talare och beskriva relevanta icke-talljud.

Syntolkning måste tillhandahållas för förinspelade videor där viktig visuell information inte förmedlas genom ljudspåret. Syntolkning berättar om betydande visuella element — handlingar, scenbyten, text på skärmen — under naturliga pauser i dialogen.

Automatiskt spelat ljud måste kunna undvikas. Om ljud spelas automatiskt i mer än tre sekunder, tillhandahåll en mekanism för att pausa, stoppa eller kontrollera volymen oberoende av systemvolymen.

Tillgängliga dokument

PDF-filer och andra nedladdningsbara dokument måste också vara tillgängliga. Det innebär att de behöver korrekt taggstruktur (rubriker, listor, tabeller), en logisk läsordning, alternativtext för bilder, definierat dokumentspråk och bokmärken för navigation i längre dokument.

När det är möjligt, tillhandahåll viktig information som webbinnehåll snarare än nedladdningsbara dokument. Webbinnehåll är i grunden mer flexibelt och lättare att göra tillgängligt än PDF.

Innehåll i sociala medier

Tillgänglighet sträcker sig till sociala medier. Lägg till alt-text till bilder som publiceras på sociala medieplattformar — de flesta större plattformar stöder nu detta. Använd CamelCase i hashtaggar så att skärmläsare kan tolka dem korrekt (t.ex. #WebAccessibility snarare än #webaccessibility). Undvik att förmedla information enbart genom bilder eller video utan textalternativ.

Sensoriska egenskaper

Ge aldrig instruktioner som enbart förlitar sig på sensoriska egenskaper som form, färg, storlek, visuell placering, orientering eller ljud. Istället för "klicka på den gröna knappen" eller "se sidofältet till höger", ge ytterligare kontext: "klicka på knappen Skicka" eller "se avsnittet Relaterade artiklar".

Är din webbplats tillgänglig?

Skanna din webbplats gratis och få din WCAG-poäng på några minuter.

Skanna din webbplats gratis