Förenklad beskrivning av WCAG-kriteriet 1.1.1

Beskriv med text allt innehåll som inte är text

Användare som är beroende av till exempel skärmläsare och punktdisplay behöver beskrivningar av allt innehåll som inte är text. Det beskrivs i textalternativ eller alt-texter som det också kallas.

Det gäller till exempel:

  • Bilder (förutom sådana som endast används för dekoration)
  • Diagram
  • Animationer
  • Ljudsignaler

Se därför till att allt sådant innehåll beskrivs med hjälp av text, förutom i de undantagsfall som beskrivs i WCAG-kriteriet. Undantagen gäller framförallt sådana situationer där en beskrivande text skulle motverka innehållets syfte (till exempel när syftet med ett ljud är att testa användarens hörsel).

Använd text som är synlig för alla om det passar, eller html-attribut som till exempel alt och aria-label för kortfattade beskrivningar. När en textbeskrivning ligger separat kan du knyta id-attributet för det element som innehåller beskrivningen till det som beskrivs till exempel med hjälp av aria-labelledby eller aria-describedby. En fördel med separat textbeskrivning är att den – till skillnad från alt-attribut – kan formateras och innehålla länkar.


Rekommendationer för textalternativLänk hit

  • Välj detaljnivå efter användarens behov
  • Använd tomt textalternativ (alt=””) till dekorativa bilder
  • Anpassa textbeskrivningen efter eventuell synlig bildtext
  • Undvik upprepningar genom att provlyssna

Välj detaljnivå efter användarens behovLänk hit

Beskriv innehållet tillräckligt detaljerat för den som enbart uppfattar textbeskrivningen. Det är ofta bättre att sakligt och kortfattat beskriva innehållet än att ta upp varje detalj eller att ge subjektiva omdömen. Men det finns undantag. Ibland är det viktigt att beskriva känslan i en bild för att användaren ska få en förståelse för innehållet. Utgå från användarens behov och innehållets syfte.

Pictobild som föreställer en blomma. Bredvid står några olika exempel på dåliga textbeskrivningar (dsc20345.jpg, Foto; Jan Persson, Ange bildtext här, och mellanslag) och ett bra exempel: En vit blomma
Bra och dåliga exempel på textbeskrivning av bilder.

Ofta finns det möjlighet att kombinera en kort textbeskrivning genom att till exempel använda alt-attribut på en bild med en mer utförlig separat text för den som vill fördjupa sig. Använd då till exempel attributet aria-describedby för att relatera innehållet till en separat text.

Andra riktlinjer (R117 Texta inspelad rörlig media (video, ljud, animationer…) och R119. Texta direktsändningar) tar upp frågor om fullständig textversion av “tidsberoende media” det vill säga inspelningar och direktsändningar. Denna riktlinje innebär bara att det behöver finnas en sammanfattande text som beskriver sådant innehåll.


Därför är textpresentationer viktigaLänk hit

Med hjälp av digital teknik kan de flesta användare ta till sig en text. Den som ser kan läsa texten, den som hör kan få den uppläst, den kan presenteras som punktskrift för den som läser med hjälp av känseln. Text kan förstoras och presenteras med olika teckensnitt och färgskalor. Uppläsning med skärmläsare (talsyntes) kan ske med olika hastighet och röst. Ibland kan text till och med översättas automatiskt innan den presenteras för användaren.


Anpassa textbeskrivningen efter eventuell synlig bildtextLänk hit

Tanken med textalternativ (oftast attributet alt) är att det ska kunna ersätta bilden för den som inte ser. Textalternativ innebär oftast en kort beskrivning av motivet – eller av funktionen i de fall bilden används exempelvis som symbol på en knapp.

Tanken med en bildtext (alltså text som presenteras visuellt i anslutning till bilden – oftast under den) är att komplettera bilden, på bland annat följande sätt:

  1. Ange kompletterande uppgifter om bilden (upphovsrätt, datering, länk till högupplöst version…)
  2. Förklara bildens innehåll och hur den knyter an till sidan.
  3. Ange en benämning på bilden (exempelvis ”Figur 13” eller ”Ansökningsprocessens fem steg”) som går att hänvisa till från brödtext. Detta är värdefullt inte minst för att slippa hänvisningar som ”den liggande bilden” och liknande (se Gör inte instruktioner beroende av sensoriska kännetecken).

Figure och figcaption

Bilder, men även kodfragment och annat innehåll som kompletterar eller illustrerar annat innehåll på en webbsida, kan med fördel ligga i html-elementet figure. Då kan nämligen HTML-elementet figcaption på ett standardiserat sätt koppla den synliga bildtexten till bilden.

Ibland kan en förklaring av bilden (punkt 2 ovan) innebära att figcaption i praktiken beskriver bilden. Då är det formellt okej att dölja bilden för hjälpmedel eftersom innehåll alltså beskrivs i ett element som semantiskt är kopplat till bilden. Men i praktiken blir detta ändå inte helt lyckat: Vissa skärmläsare anser nämligen att det inte finns någon mening med att presentera figcaption om bilden är dold. Det finns en viss logik i detta: Om bilden är dold skulle det kunna anses onödigt eller ologiskt att ha en benämning på den och diskutera dess innehåll. När figcaption används måste det därför finnas ett alt-attribut som antingen beskriver bildens motiv eller som anger exempelvis ”figurens innehåll beskrivs i bildtexten”.


Undvik upprepningar genom att provlyssnaLänk hit

Om det finns en bildtext eller annan brödtext som beskriver bildens innehåll bör inte den alternativa textbeskrivningen upprepa textens innehåll. Ett bra sätt att bedöma hur bra alternativa textbeskrivningar fungerar är att lyssna på webbplatsen med hjälp av en skärmläsare.


Utdrag från WCAG-standardenLänk hit

Riktlinje 1.1 Textalternativ: Tillhandahåll alternativ i form av text till allt icke-textbaserat innehåll så att det kan konverteras till format som användarna behöver, till exempel stor stil, punktskrift, tal, symboler eller enklare språk.

1.1.1 Innehåll som inte är text: Allt innehåll som inte är text, som presenteras för användaren har ett textalternativ med samma syfte, utom i de situationer som anges nedan. (Nivå A)

  • Navigeringsmetod/funktion, inmatning: Om innehåll som inte är text är en navigeringsmetod/funktion eller accepterar inmatning från användare så ska den ha ett namn som beskriver dess syfte. (Se Riktlinje 4.1 för ytterligare krav på navigeringsmetod/funktion och innehåll som accepterar inmatning från användare).
  • Tidsberoende media: Om innehåll som inte är text är tidsberoende media så ger ett textalternativ åtminstone en beskrivning av det innehåll som inte är text. (Se Riktlinje 1.2 för ytterligare krav på media).
  • Test: Om innehåll som inte är text är ett test eller en övning som inte skulle fungera om det visades som text, så ger ett textalternativ åtminstone en beskrivning av det innehåll som inte är text.
  • Sensorisk: Om innehåll som inte är text främst är avsett för att ge en specifik sensorisk upplevelse så ger ett textalternativ åtminstone en beskrivning av det innehåll som inte är text.
  • CAPTCHA: Om syftet med innehållet som inte är text är att bekräfta att en människa, snarare än en dator, försöker komma åt informationen så ska textalternativ som identifierar och beskriver syftet av innehållet tillhandahållas. Alternativa former av CAPTCHA, som använder sig av utmatningsmetoder för olika typer av sensorisk upplevelse, tillhandahålls för att tillgodose olika funktionsnedsättningar.
  • Dekoration, formatering, osynlig: Om innehåll som inte är text är rent dekorativt, bara används för visuell formatering eller inte presenteras för användare, så implementeras det på ett sätt så att det kan ignoreras av hjälpmedel.

TerminologiLänk hit

Attributet alt

Termerna alt-text och alt-texter används ofta för textbeskrivning av bilder. De kommer av att textbeskrivningar av bild-element på webben (img) oftast anges i attributet alt. Det går även att använda attributen aria-label och aria-labelledby, men alt är säkrast eftersom det funnits så länge.

Attributet longdesc

Ibland förekommer attributet longdesc, som kan användas för att hänvisa till beskrivningar på annan plats i dokumentet, eller på någon annan sida. Stödet i webbläsare för longdesc är dock begränsat, och idag är det bättre att använda aria-describedby.

CAPTCHA

CAPTCHA är en förkortning av ”Completely Automated Public Turing test to tell Computers and Humans Apart” vilket innebär att det är ett sätt att avgöra om användaren är en människa eller ett datorprogram (ibland kallad ”bot” i detta sammanhang). Framförallt används CAPTCHAs för att förhindra skräppost och annat missbruk av digitala tjänster, som ofta sker med hjälp av program. Tyvärr finns risk för att även användare som faktiskt är människor har problem att ta sig förbi testet, eftersom det kan ställa mycket höga krav på syn, kognition eller hörsel. Erbjud sätt att komma förbi CAPTCHA som fungerar oavsett eventuell funktionsnedsättning.

Kommentarer till denna riktlinje

Kommentarer (4)

  • Erika Cassman skriver:

    En fråga, är det så smart att beskriva bilder med färger? Jag tänker att personer som inte ser kan ju inte relatera till färger. Eller tänker jag fel här?

    • Tommy Olsson skriver:

      Vissa personer med synnedsättning har tidigare kunnat se, och för dem kan information om färger vara fullt användbar. Man bör förstås undvika att förlita sig på färger i sitt textalternativ.

      • Will skriver:

        Kan det vara smart att beskriva bilder med färger av anledningen att en som inte ser ska kunna kommunicera med en annan som ser? Det vill säga att en bild mycket väl kan beskrivas med orden ”en blå blomma” för att de två personerna ska kunna hänvisa till den med det, och förstå om de menar samma blom-bild. Typ ”Menar du den blå blomman där eller den röda här?”

        • Ilias Bennani skriver:

          Hej Will.
          Det är svårt att ge ett konkret svar utan att varken ha sett bilderna eller känna till det sammanhang i vilket bilderna ska publiceras. Jag ska dock göra ett försök.

          ALT-texten ska beskriva bildens syfte, inte exakt vad bilden innehåller. Om sidan innehåller flera bilder på blommor där vissa bilder visar blå blommor och andra bilder visar röda blommor så är det mycket bra att denna skillnad även framgår av ALT-texten.

          Är bilderna informativa, dvs bilderna t.ex. används för att visa hur just den här blå blomman ser ut, då är det ännu viktigare att färgen framgår av ALT-texten.
          Är bilderna däremot bara dekorativa, dvs om det lika gärna går att ta bort bilderna utan att viktig information försvinner, då ska bilden ha en tom ALT-text eller döljas helt för skärmläsare.

          Jag vill dock vara tydlig med att det är svårt att klart definiera vad som är en informativ eller dekorativ bild, det måste den som publicerar sidan själv avgöra från fall till fall.


Om denna riktlinje

Den är relevant för DOS-lagen.

Status på vår webbplats


(Då uppdateras status i checklistorna.)

Om WCAG

WCAG (Web Content Accessibility Guidelines) är den standard som bland annat webbdirektivet och DOS-lagen bygger på. Se sidan Följ standarder för tillgänglighet.

WCAG 2.1 saknar ännu svensk översättning, men för de formuleringar som är identiska i version 2.0 och 2.1 citeras den officiella översättningen av version 2.0. Utdraget kan dock innehålla fel. Den version som är mest giltig vid uttolkning är det engelskspråkiga originalet på W3C:s webbplats.

Där finns även de officiella förklaringarna och lösningsförslag till riktlinjen (på engelska).