Innehållet i detta avsnitt: Textalternativ är väsentliga för tillgängliheten Textalternativ, alternativtext och alt-text – vad är de? Textalternativ hjälper dem som inte kan se bilden Textalternativ är inte en bildtext eller bildens rubrik Måste man alltid skriva en alt-text? Hur utarbetar man en alternativtext? Bilden är också en länk. Vad gör jag då? Exempel på alternativtexter för bilder Textalternativ är väsentliga för tillgängligheten Textalternativ för bilder förbättrar webbinnehållets tillgänglighet avsevärt. Riktlinjerna för tillgängligt webbinnehåll (WCAG) kräver att allt icke-textbaserat webbinnehåll ska förses med textmotsvarigheter. Med andra ord ska information i bilder, videor och ljud också visas som text på nätet. I det här avsnittet fokuserar vi på bilder, videorna och inspelningarna behandlas separat. Textalternativ, alternativtext och alt-text – vad är de? Termerna textalternativ, alternativtext och alt-text används ofta för att indikera att en text har lagts till bilden med en programvara. Olika verktygsprogram och applikationer använder olika termer vilket kan göra det svårt att veta var textalternativ ska skrivas. Textalternativ är en term som används i WCAG-riktlinjerna. (Obs! W3C:s officiella svenska översättningen av WCAG 2.0-kriterierna. Det finns fortfarande inte någon officiell översättning till svenska av WCAG 2.1.) Textalternativ är “text som är automatiskt associerad med innehåll som inte är text eller hänvisas från text som är automatiskt associerad med innehåll som inte är text. Automatiskt associerad text är text vars placering kan tydliggöras automatiskt utifrån innehållet som inte är text.” I praktiken innebär detta att Koden för en bild på en webbsida eller i en dokumentfil beskriver bildens innehåll som text. Texten visas inte, men ELLER Innehållet i bilden beskrivs i den synliga texten på webbplatsen eller i dokumentet, och bildkoden berättar var bilden beskrivs. Termerna alternativtext och alt-text används i applikationer såsom ordbehandlingsprogram eller html-redigeringsprogram. När man använder en bild innehåller webbsidornas innehållshanteringssystem ofta fältet Alternativtext (eller Alt-text), där du kan skriva en bildbeskrivning när bilden läggs till. I html-koden på en www-sida finns alternativtexten i img-elementet i alt-attributet. Skärmläsaren förmedlar innehållet i alt-attributet, det vill säga alternativtexten, till programmets användare. Alt-attributet visas inte som text på webbsidan, utan det är dolt i sidans HTML-kod. I dokumentfiler kan alternativtexten läggas till i bildkoden på motsvarande sätt. Textalternativ hjälper dem som inte kan se bilden Med hjälp av textalternativ förmedlas informationen i bilden till de personer som av någon anledning inte kan se bilden. Orsaken kan vara att personen har en synskada eller att bilderna inte har laddats ner eller att användaren inte vill ladda ner dem. Man får åtkomst till textalternativ med hjälp av ett skärmläsarprogram. Särskilt synskadade personer använder skärmläsare. Textalternativ kan bli synlig i webbläsaren om inställningarna förhindrar att bilder laddas ner. Då laddas alt-texten istället för bilderna ner. Textalternativ är inte en bildtext eller bildens rubrik Textalternativ är inte det samma som bildtexten eller bildens rubrik som i program kallas caption på engelska. Bildtexten är texten som alla kan se och som ofta är placerad under eller bredvid bilden. Skärmläsaren läser bildtexten samt alt-texten, om en sådan har angetts. Därför ska alt-texten inte upprepa bildtexten som den är, eftersom skärmläsaren läser båda innehållen. Observera att bildens titel (title på engelska) inte heller är ett textalternativ. I vissa innehållshanteringssystem kan man ge en bild ett titelattribut som visas när man hovrar över en bild med markören på en webbsida. Tillgänglighetskraven förutsätter att ett alt-attribut används, ett title-attribut behövs inte. Måste man alltid skriva en alt-text? Enligt tillgänglighetskraven ska bilder som används på webben ha ett textalternativ. Automatiska tillgänglighetskontroller rapporterar ett fel när de hittar en bild som saknar alt-attribut. Innehållet i alternativtexten kan dock definieras som tomt, vilket innebär att man inte alltid behöver skriva en alt-text. En så kallad tom alt-text är tekniskt sett alt=”” inuti ett img-element i html-koden. Ange dock inte ”” som en alt-text i webbsidornas redigeringsprogram. Då kan det nämligen hända att den som använder skärmläsaren får höra följande meddelande vid bilden: citattecken citattecken. Det är ofta möjligt att markera en bild som dekorativ i systemen för hantering av webbinnehåll. Då anges ingen alt-text. Bilden kan också ofta markeras som dekorativ i ordbehandlings- och presentationsprogram (såsom Word eller PowerPoint). När kan alt-texten vara tom eller en bild markeras som dekorativ? Om alt-texten är tom eller bilden är markerad som dekorativ agerar skärmläsaren som om hela bilden inte finns och förmedlar sålunda inte information till användaren om att det finns en bild på sidan. Detta är inte ett problem om bilden eller informationen i den inte är relevant för användaren eller om bildens innehåll och innebörd beskrivs i den övriga texten på webbsidan. Alternativtexten kan lämnas tom i följande fall: När det är fråga om en dekorativ bild eller innehållet i bilden är obetydligt för det övriga innehållet, det vill säga bilden illustrerar endast textinnehållet, eller innehållet i bilden beskrivs fullständigt i den omgivande texten; eller en synlig bildtext berättar det väsentliga om bilden. Med dekorativa bilder avses bilder som inte förmedlar någon information och har lagts till för att dekorera innehållet. Ett tydligt exempel på en dekorativ bild är fina mönster eller linjer som skapar mellanrum i texten. För sådana bilder är det bäst om alt-texten är tom. Webbsidor använder också ofta olika illustrationer för att pigga upp innehållet. I sådana fall lönar det sig att fundera på vad man vill kommunicera med illustrationen. Om man till exempel vill visa ett vackert landskap i hemkommunen kan man skriva in en kort text om platsen som alt-text, t.ex. ”Vackert sjölandskap vid stranden av Päijänne.” Alt-texten kan alltså förmedla stämningen som man vill att bilden skapar. Men om bilden bara är ett element som ökar visualiteten och bilden kunde tas bort, lönar det sig att använda en tom alt-text eller markera bilden som dekorativ. Skärmläsaren förmedlar alt-texten på den plats där bilden finns. En påtvingad alt-text i mitten av brödtexten kan störa användaren av skärmläsaren i onödan. Om innehållet i bilden i övrigt beskrivs i texten på webbsidan kan alt-texten lämnas tom eller markeras som dekorativ. Då är det dock viktigt att beakta om bilden nämns i brödtexten. Om texten till exempel beskriver statistik och bilden endast visualiserar den information som tillhandahålls som text, krävs ingen alt-text. Men om texten hänvisar till bilden, ska alt-texten berätta att bildens innehåll har förklarats i texten. Andra användare kanske också hänvisar till innehållet i bilden, så det är bra om skärmläsarens användare också vet att bilden finns. Hur utarbetar man en alternativtext? När du sätter ihop en alternativtext, fundera på svaret på följande frågor: Vilken information saknas, om man inte ser bilden? Vad är syftet med bilden på den plats där den finns? Berättar den omgivande texten om bildens innehåll? Textinnehållet bör tas i beaktande, eftersom det är onödigt att upprepa samma information i alternativtexten som läsaren ändå får. Om en bild till exempel har en bildtext kan alt-texten specificera eller förtydliga innehållet i bilden. Alt-texten får inte vara samma som bildtexten. Om texten hänvisar direkt till bildinnehållet, till exempel ”som bilden visar”, är det ytterst viktigt att informationen som ses i bilden tillhandahålls. Fokusera dock inte på att redogöra för visuella saker (till exempel färger) utan på vad som är mest relevant i bilden. Visar bilden till exempel att något är förändrat? Kontexten i bilden är relevant Det vore frestande att skriva en alt-text för bilder, till exempel i bildbanken. Vad som är en lämplig alternativtext beror dock på sammanhanget, och samma alternativtext fungerar nödvändigtvis inte med samma bild överallt. Det är viktigt att fundera på vad som är viktigt i bilden i det sammanhang där den används. Vilken roll har bilden? Ger bilden någon ytterligare information i förhållande till texten? Utarbeta en alternativtext som passar exakt det textinnehåll där bilden finns. Skriv så slående och tydligt som möjligt Använd korta meningar och tydligt språk. 1–2 meningar eller cirka 250 tecken är en bra längd. WCAG-kriterierna anger inte ett specifikt antal tecken, men det är bra att veta att i skärmläsaren kan användaren inte röra sig i alt-texten som i annan text, till exempel gå tillbaka till föregående mening, utan alt-texten ska antingen läsas helt eller hoppas över. Skärmläsare avbryter också långa alt-texter, vilket innebär att användaren meddelas om en ny bild mitt i alt-texten. Använd ett ordförråd och en stil som passar till den omgivande texten Använd ord och termer i alt-texten som är bekanta för läsaren, det vill säga samma ordförråd som i resten av texten. Även om en ny term är kort och beskrivande, ska du inte använda den för första gången i en alt-text. Avsluta alltid alternativtexten med en punkt Även om alternativtexten vore mycket kort och en ofullständig mening, ska du använda en punkt i slutet av texten. Denna punkt gör det lättare för de användare av skärmläsare som använder funktionen Text till tal. Vid punkten gör rösten i skärmläsaren en liten paus och gör alternativtexten mer distinkt från resten av texten. Du kan alltså till exempel ge en illustration redogörelsen alt=”Ett skogslandskap på vintern”. Börja inte alt-texten med ordet ”Bild” eller ”I bilden” Skärmläsaren meddelar användaren att det är en bild innan skärmläsaren förmedlar alternativtexten. Om du vill kan du berätta att detta är en illustration, en karta eller en annan typ av bild. Börja dock inte alternativtexten med: ”I bilden syns” eller ”Bilden visar”. Skriv en neutral beskrivning, undvik tolkning Gör inte en egen tolkning av bilden, utan skriv neutralt om innehållet i bilden. Detta är särskilt viktigt om du skapar en alternativtext för en bild som någon annan har valt. “Barnet ler” och “Barnet är lyckligt” är två olika saker. Det senare har tolkat barnets känslomässiga tillstånd av leendet. Det lönar sig att skriva texten i bilden i alt-texten Om bilden innehåller text som ger ytterligare information och innehållet på webbsidan inte innehåller samma text, kan du skriva texten i bilden som alt-text. Om det finns mycket text i en bild, till exempel i infografik, kan du ge en kort beskrivning av infografens viktigaste punkter i alt-texten. Det vore bra att skriva in en längre beskrivning i brödtexten. Det lönar sig att göra tabeller och förteckningar som äkta tabeller och förteckningar Om det är fråga om en bild som föreställer en tabell eller en lista ska du inte göra en alt-text utan istället ersätta bilden med tabellen och listan med en äkta tabell eller lista. På en webbsida gör du en äkta tabell eller lista semantiskt med lämpliga html-element (tabell, tr, th, td, ol, ul, li, osv.). I ordbehandlingsprogram används tabell- eller listverktyg. På detta sätt kan skärmläsarens användare röra sig i en tabell eller lista. Alt-text blir väldigt lång, vad kan jag göra? Hur kan man uppfylla kravet på tillhandahållandet av en textmotsvarighet om bildens alternativtext blir för lång och några meningar inte räcker för att redogöra för det som är relevant i bilden? Man kan göra en längre bildbeskrivning. Webbsidor har olika sätt att visa en längre redogörelse. Redogörelsen kan skrivas i brödtexten och i alt-texten nämner man att bilden beskrivs i texten. Men om man inte vill förlänga brödtexten kan man lägga till en länk i samband med bilden till en separat sida där man hittar den långa redogörelsen. Det är också möjligt att producera en del som öppnas och stängs på webbsidan och där man kan sätta in en lång utredning. Se Infografik för ett exempel på ett avsnitt som öppnas. Bilden är också en länk. Vad gör jag då? Bilder används också ofta som länkar – när du klickar på bilden för den dig till en annan webbsida eller öppnar till exempel ett formulär. Många webbsidor använder också bildknappar (t.ex. ”Beställ”, ”Sök”, ”Skicka”). Utifrån bildlänkens funktion och sammanhang kan du bestämma vilken typ av alt-text du vill skriva. Man bör i allmänhet ta i beaktande att länkar borde berätta för användaren om länkens objekt. Därför bör även seende användare undvika bildlänkar som inte innehåller information om objektet för en länk. Det säkraste är om det i samband med bilden även finns text som redogör för länkens objekt. På så sätt får alla användare veta var de hamnar när de klickar på bilden. Alternativtexter för bildlänkar diskuteras mer i detalj i artikeln Toiminnallisten kuvien alt-tekstit (Alt-texter för funktionella bilder). Följande är exempel på olika bilder och deras alternativa texter. Exempel på alternativtexter för bilder Illustrationer Illustrationer är bilder vars huvudsakliga uppgift är att göra en textsida lättare och färggrannare. Sådana illustrationer kanske inte behöver någon alternativtext; man kan alltså använda en tom alt-text: alt=””. Exempel 1: Alt-texten kan vara tom Exempel 1 är taget från undervisnings- och kulturministeriets sida som presenterar ministeriet. Det finns ett fotografi av ministeriets byggnad på sidan. Alt-texten för bilden är alt=”Undervisnings- och kulturministeriets byggnad på Sjötullsgatan.” Här kunde alt-texten också ha lämnats tom, eftersom bilden endast är en illustration på sidan, den ger inte någon viktig information. Källa: https://okm.fi/sv/ministeriet [15.5.2024] Exempel 2: Alt-text behövs På Vanda stads webbsida Stadsfullmäktige finns en illustration med en bildtext. Skärmläsaren förmedlar bildtexterna till användaren på samma sätt som andra synliga texter. Om bildtexten inte har en semantisk annotering (t.ex. figcaption i figure-elementet) kan skärmläsaren inte berätta att det är fråga om en bildtext. Därför är det bra att ge en alt-text till bilder som har en bildtext. Skärmläsarens användare får information om bilden och kan anta att texten i samband med bilden är en bildtext. Om alt-texten vore tom skulle bildtexten vara en lösryckt text bland brödtexten och kunde vara svår att förstå. I exemplet är bildtexten “Vanda stadsfullmäktige i november 2021.” Tyvärr är alt-texten för bilden detsamma: ”Vanda stadsfullmäktige i november 2021.” Detta innebär att skärmläsarens användare får höra samma text två gånger. Här skulle det vara bra att ge en kort alt-text som förmedlar stämningen i bilden, till exempel: ”En bild av en stor grupp människor tagen snett uppifrån. Människorna ler, några av dem vinkar, en del håller upp tummen.” Källa: https://www.vantaa.fi/sv/staden-och-beslutsfattandet/beslutsfattande/stadsfullmaktige [15.5.2024] Situationsbild med text En bildtext ger nödvändigtvis inte tillräckligt med information om bilden, särskilt om själva bilden innehåller text. Ett exempel i Wikipedias artikel om mellanöl (på finska): https://fi.wikipedia.org/wiki/Keskiolut. I avsnittet Historia (på finska) finns en bild med bildtexten: ”I december 1980 krävde folkrörelsen att försäljning av mellanöl tillåts i R-kiosker. Demonstration på Järnvägstorget i Helsingfors.” Bilden har ingen alt-text. Det vore bra att berätta mer detaljerat om slagorden i demonstranternas skyltar i bildens alternativtext. Foto: Harri Ahola, Helsingfors stadsmuseum (CC BY 4.0) Källa: https://www.finna.fi/Record/hkm.HKMS000005:km0000nqgi [5.4.2018] Fotografiet är från Finna.fi. Finna har följande beskrivning av bildens innehåll (på finska): ”Mellanöl till R-kioskerna – folkrörelsen samlades på Järnvägstorget. Demonstranter och skyltar med texterna (på finska): Öppna ölkranarna!, Öl till folket och Mellanöl till R-kioskerna!” Denna beskrivning skulle vara lämplig som en alternativ text. Men eftersom arten och platsen för händelsen redan nämns i bildtexten till Wikipedia-artikeln, kan alt-texten vara kortare: ”Demonstranterna har skyltar med texten Öppna ölkranarna!, Öl till folket och Mellanöl till R-kioskerna!” På så sätt skulle skärmläsarens användare få samma texter som en seende person kan läsa på bilden. Infografik Infografer innehåller ofta mycket text och det är svårt att göra en kort alt-text. Då vore det bäst att utarbeta en längre redogörelse och berätta i alt-texten var den längre redogörelsen finns. På sidan Karriär på regionförvaltningsverkets webbsida finns ett exempel på en komplex infograf, som beskrivs i text i ett avsnitt som öppnas på sidan. Ovanför bilden finns en punkt (knapp) som skiljer sig från brödtexten ”Information om vår personal” och ett plus-tecken. När du trycker på knappen öppnas en lång redogörelse. Infografens alt-text är ”En bild med nyckeltalen för regionförvaltningsverkens personal 2022. Ovanför bilden finns informationen i textformat.” Texten ovanför knappen anger också att informationen är tillgänglig i text- eller bildformat. Den här typen av implementering lämpar sig också väl för dem som har problem med att tolka infografik. Källa: https://avi.fi/sv/om-oss/karriar Visualisering av numeriska data Bilder som visualiserar numeriska data kan göra det lättare att till exempel förstå förändringar. Dessa bilder baserar sig ofta på en mängd siffror som skulle göra alt-texterna väldigt långa om alla siffror ska anges. Den relevanta informationen i bilderna borde dock också ges till användare av skärmläsare. Den viktigaste informationen i bilder med numeriska data beskrivs vanligtvis också i brödtexten. Detta kan beaktas i alt-texten. I bästa fall understryker brödtexten siffror som visas i bilden och alt-texten kan bara kort konstatera en sak som är lätt att se, till exempel att grafen visar tillväxten under en viss tidsperiod. Om bilden innehåller rikligt med synlig text och siffror är det en bra idé att utöver alt-texten, skapa en längre bildbeskrivning. En tabell är ofta ett bra sätt att presentera numeriska data. Den som använder ett skärmläsarprogram kan flytta runt i tabellen och granska och jämföra data. I den kanadensiska rapporten Print material accessibility in Canada, 2023 finns tre stapeldiagram. Innehållet i diagrammen förklaras i brödtexten och rubrikerna i bilderna har använts som alt-text för dem. Dessutom tillhandahålls diagrammens data i tabellformat med hjälp av ett detaljelement. Ett detaljelement kan öppnas och stängas, så när det är stängt visas endast texten Data table for Chart under bilden. Källa: Print Material Accessibility in Canada, 2023 [1.9.2024] Denna sida uppdaterades senast 28.10.2024.