Att skriva tillgängligt
”Det enda som egentligen har någon betydelse är att människor förstår”.
God tillgänglighet kan vara helt avgörande. 20 procent av befolkningen har någon form av funktions-nedsättning, till exempel nedsatt syn eller rörelse-förmåga. De har inget val, ibland måste de använda en offentlig webbplats för att utföra ett ärende.
Då är de till exempel beroende av möjlighet till uppläsning, att kunna tabba på tangentbord istället för mus och att få text förstärkt med bilder, filmer och andra illustrationer.
Samtidigt blir tillgängliga sajter något alla användare får nytta av, eftersom de både blir snabbare och enklare att använda.
1 januari 2019 kom lagen om tillgänglighet till offentlig digital service för nya webbplatser.
Från 23 september 2020 ska våra befintliga sajter och sociala medier vara tillgängliga.
Lagen innebär att våra webbplatser och appar ska leva upp till de krav som ställs i den internationella standarden för webbtillgänglighet, WCAG 2.1, nivå AA.
Enligt lagen ska vår digitala service vara:
- möjlig att uppfatta
- hanterbar
- begriplig
- robust
Med digital offentlig service menas information och tjänster som tillhandahålls på webbplatser och i mobila applikationer av en offentlig aktör.
- Undvik korta ”syltburks-etikett”-rubriker (dessa passar bättre för meny-rubriker.) Välj istället en längre beskrivande rubrik som ger mer information. Det blir tydligare.
- Dock inte mer än 5-10 ord.
- Skriv konkret.
- Använd gärna nyckelord.
- Använd aktiva verb (se flik 3 här ovanför).
Beskrivande rubriker hjälper läsarna att i förväg förstå sidans innehåll och syfte.
Beskrivande rubriker är bra för alla. Och framförallt för personer med lässvårigheter, försämrat korttidsminne samt personer med synnedsättning som navigerar genom tangentbordet och/eller använder skärmläsare. Där ger beskrivande rubriker möjlighet att förutse vad inlägget innehåller och hjälp i beslutet om de ska läsa vidare.
Text-exempel
Rubriken ”Dans” blir mer informativ med ”Gemensam fredagsdans för alla”
”Information om idrott” blir mer informativt med ”Viktig information från idrottslärarna inför nästa vecka”.
”Läs-strategier” blir mer informativt med ”Här kommer våra fem läs-strategier som vi tränar på”.
Bild-exempel
Aktiva verb slutar ofta på s, till exempel dansades, tränades, skrevs och blir opersonliga.
Skriv hellre ”Vi tränade på …” – istället för ”Det tränades på …”.
Skriv hellre ”Eleverna dansade … ” istället för ”Det dansades …”
Gör bilder läsbara med alternativ-text
Bilder på webben klarar sig inte utan text. Vi behöver alltid skriva ett textalternativ, så kallad alt-text, så att bilden, diagrammet eller animationen kan förstås även av personer som inte läser med ögonen. Till exempel personer som är blinda eller har en synnedsättning och som lyssnar på texten.
Om du inte använder alternativ-text får de bara reda på att de nått fram till en bild, men inte vad den innehåller. I värsta fall har bilden kvar ett filnamn från kameran som läses upp.
Alternativ-texten beskriver vad bilden föreställer och hörs alltså bara för de som får texten uppläst. Den kallas även text-alternativ eller alt-text.
Hur du lägger till alternativ-text
Ofta går det att lägga till alternativ-text till en bild när du lägger till den eller redigerar den.
Hur du skriver alternativ-text
- Tänk dig att du beskriver en bild objektivt och neutralt för någon i telefon. Den beskrivning du då ger är en bra startpunkt för att formulera alternativ-texten.
- Du behöver inte börja med ”Bilden visar …” eftersom skärmläsaren själv berättar att det är en bild.
- Använd alltid punkt. Då gör skärmläsaren ett uppehåll och det blir lättare för läsaren att särskilja vad som hör till vad.
- Vid dekorativa bilder som inte säger något lämnar du tomt, det vill säga skriv alt=””
- Vid diagram, beskriv det diagrammet förmedlar. Blir det för mycket information kan du hänvisa till en tabell.
- Om bilden är viktig för texten, skriv hellre en dålig alternativ-text än ingen alls.
- Testa själv uppläsning av bilden.
Exempel på alternativ-text
”Skrattande barn gungar i den nya gungan på skolgården.”
”En vägg fylld med hjärtan av olika storlekar, former och mönster. Framför bilden står glada barn”
”En elev skyddar sig vid en kemilaboration med förkläde och skyddsglasögon.”
Gör bilden begriplig med bildtext
En bildtext står ofta bredvid eller under en bild och syns för alla. Bildtexten förklarar och förstärker bilden. Den hjälper läsaren att få ut så mycket som möjligt av bilden.
Hur du lägger till bildtext
Ofta går det att lägga till bild-text när du lägger till bilden eller redigerar den.
Hur du skriver en bildtext
- Skriv inte samma bild-text som alternativ-text. Det blir bara upprepning för de som använder skärmläsning. Kan du kanske ta bort alternativ-texten?
- Avsluta med punkt. Då gör skärmläsaren en naturlig paus, vilket hjälper de som får bilden uppläst.
Exempel
- Ett förtydligande av färgerna i ett diagram (som inte kan ses av en färgblind person).
- En tydligare beskrivning av vad bilden föreställer, till exempel vem, vad, hur, varför och när.
- Bildens upphovsperson om bilden är lånad.
Bilden behöver kunna förstoras
För personer med synnedsättningar underlättar det att kunna förstora bilderna för att se dem tydligare. Det går att zooma in mycket med moderna webbläsare.
Text i bilder ska finnas som just text, för att kunna läsas upp. Men finns text ändå i bilden av någon anledning, ska den helst framgå i bildtexten.
Testa själv att zooma in bilden. Finns det innehåll som inte blir tillräckligt tydligt genom att zooma, så behöver du länka bilden till mediafil. Då förstoras bilden när den klickas på.
Hur du länkar till mediafil
- Klicka på bilden och pennan som dyker upp i redigeringsläget (bild 1)
- Välj ”Länk till Mediafil” så förstoras bilden när du klickar på den (bild 2)
Bilden öppnas i samma flik. Läsare behöver använda bakåtknappen för att komma tillbaka till inlägget.
Ska bilden leda någonstans om du klickar på den?
- Klicka på bilden och pennan som dyker upp i redigeringsläget (bild 1)
- Välj ”Länk till” och ”Anpassad URL” och klistra in adressen du vill att den ska gå till. (bild 2)
OBS! Du behöver ange vart bilden leder i alternativtext eller bildtext.
Använd inte bilder, för att visa text (bild 1). För text används text.
Om bild med text ändå ska användas, så skriv samma alternativtext som det som står i bilden (bild 2).
Förutom dina egna bilder, så finns det en mängd fria bilder att använda. Här nedan är några förslag där du kan få tag i bilder.
InPrint och Ikoner är symboler. Resterande sidor är foton, fria att använda.
- InPrint (widgit-symboler, finns i Software Center på din dator) Kom ihåg att först klistra in bilden i Word/PPT och där spara som bild.
- Ikoner i PowerPoint/Word (symboler, fotografier, figurer och dekaler). Kom ihåg att först klistra in dem i Word/PPT och där spara som bild.
- Unsplash
- Pixabay
- Pexels
- Stocksnap
- Wikimedia Commons
- Negative Space
- Picjumbo
- Gratisography
- Kaboompics
Ps! Var uppmärksam på att några av sidorna ovanför har med betalbilder som reklam under eller ovanför de fria bilderna. Ds.
Visa gärna din uppskattning genom att i bildtexten beskriva vem som tog den, var den finns och licens. Eller bara licens. Se bild-exempel nedan.
Ingressen hjälper läsaren avgöra om texten ska läsas.
Ingressen är en kort sammanfattning direkt efter huvudrubriken. Tillsammans med en bild ger den en snabb ledtråd till vad inlägget handlar om. Forskning visar att nästan alla läsare tar till sig ingressens innehåll.
Gör så här
- Skriv en kort sammanfattning som kan locka till vidare läsning.
- Summera det viktigaste – ingen bakgrund här!
- Använd nyckelord.
- Försök att få ingressen att svara på frågorna: Vad, var, när, hur, varför, vem.
- Inte alltför lång. Om den måste vara väldigt lång för att summera innehållet på sidan, är det troligen så att innehållet behöver delas upp på flera sidor
All information ska skrivas på begriplig svenska.
Målet är att så många personer som möjligt ska kunna förstå innehållet, även personer med funktionsnedsättningar och personer med svenska som andraspråk.
Tips
- Skriv lättförståeligt.
- Förklara ord och uttryck som inte är självklart begripliga för alla, i en parentes direkt efter ordet. Du kan även ha en liten ordlista sist i inlägget, om det gäller flera ord.
- Kolla gärna med de som läser inlägget, om de förstår dina inlägg.
Krångligare mening
Nästkommande fredag har vi planerat att ägna mestadels av tiden före rasten till att repetera diktering på våra enheter.
Mer begriplig mening
Nästa svenska-lektion ska vi fortsätta lära oss att diktera (att låta iPaden skriva ner det vi säger).
Lättläst svenska är anpassad efter läsaren.
Den som har lässvårigheter eller är ovana läsare kan ha svårt att förstå texter, även om de är skrivna på ett klart och begripligt språk. Därför kan vi ibland behöva ge information på lättläst svenska. Lättläst svenska är anpassad efter läsaren. Språket är enklare och texterna kortare, men all viktig information ska ändå finnas med. Även layout och bilder bör anpassas till läsaren.
Checklista för lättläst text
- Använd ord och uttryck som läsaren förstår och själv använder. ”Skriv som folk pratar”.
- Använd korta meningar.
- Använd en röd tråd. Låt meningarna hänga ihop.
- Tydliggör det som behövs. Utgå från läsarens förförståelse.
- Försök fånga läsaren direkt.
- Ta bort allt som inte behöver vara med. Flera gånger :-).
- Skriv ut förkortningar.
- Använd svenska ord och svensk stavning. ”Återkoppling” istället för ”feedback”, ”mejl”/”epost” istället för ”mail”.
- Använd direkt-tilltal och undvik det opersonliga ”man”.
- Tänk efter vad läsaren vill veta och vad hen vill veta först
- Först det viktigaste, sedan detaljer och sist bakgrunden. Texten ska kunna kortas bakifrån, få läser hela texten.
- Använd den journalistiska arbetsmetoden: Vad? Var? När? Varför? Hur? Vem?
- Siffror: 1-12 skrivs med bokstäver. Exempel ett, två, tre osv.
- Datum: 22 februari 2016, inte 160222.
- Skriv inkluderande och jämställt. Använd till exempel ordet ”paus” istället för ”bensträckare”.
Om det är ett inlägg som läsaren kan vilja hitta tillbaks till senare, är det bra att lägga till några etiketter (sökord) till ditt inlägg. Ta med alla sök-ord som personer kan tänkas använda när de söker efter innehållet i inlägget.
Exempel
Inlägg: ”Här kommer de fem lässtrategier vi tränar på”
Skriver du ofta din text löpande i ett enda stycke?
Det kan bli svårläst för många.
Här nedan kommer därför lite tips på saker du kan göra för att ge din text struktur och göra den mer lättläst.
Genom att dela upp din text i stycken blir den mer lättläst.
- Ny tanke innebär nytt stycke.
- Max 5 rader i ett stycke
Lägg till mellanrubriker. De:
- ger översikt över textens innehåll.
- underlättar skumläsning.
- hjälper läsaren att hitta rätt. Speciellt personer som använder skärmläsare. De använder rubrik-nivåer för att navigera i texten.
OBS! Följ rubrik-nivåerna konsekvent. Personer med skärmläsare använder dem för att förflytta sig i en text.
När saker listas kan en punktlista göra texten lättare att uppfatta. Använd:
- onumrerad punktlista om du inte har skäl att numrera
- helst inte fler än 5-7 punkter.
Utan punktlista
Vi samlas på skolans parkering kl.08.00. Bussen går 08.30. Viktigt att alla är i tid. Kom ihåg att skicka med badkläder om ditt barn har tänkt att bada och berätta om ditt barn inte har tillräckliga simfärdigheter. Vi kommer bland annat att stanna till för ett besök på ett slott, få uppleva spännande konst i ett stort interaktivt konstmuseum, göra ett studiebesök på en båtfabrik, besöka ett nöjesfält, få en inblick i regeringsbyggnaden och träffa en politiker.
Med punktlista
Vi samlas på skolans parkering kl.08.00. Bussen går 08.30, så det är viktigt att alla är i tid. Kom ihåg att skicka med badkläder om ditt barn har tänkt att bada och berätta även om ditt barn inte har tillräckliga simfärdigheter.
Vi kommer på vår resa bland annat att
- stanna till för ett besök på ett slott
- uppleva spännande konst i ett stort interaktivt konstmuseum
- göra ett studiebesök på en båtfabrik
- få en inblick i regeringsbyggnaden och träffa en politiker
- besöka ett nöjesfält.
Om det finns en citat-formatering att använda, så använd gärna den. Den lyfter fram citatet och bidrar till struktur.
En jämförande tabell kan ge en översikt och sammanhang. Här kan du infoga både bilder och text. Använd gärna färg och rubrik-formatering för ökad tydlighet. Tabeller är dock krångliga att få upplästa av skärmläsare, så använd med måtta och komplettera gärna med en sammanfattning.
- Infoga tabell
- Fixa till strukturen genom fliken Tabell. Markera cell/celler och välj cell – tabellcellsegenskaper för att justera cellernas färg.
Enligt direktivet ska vi kombinera skriven text med ljud, bild och film för att göra vår information mer tillgänglig och lättare för alla att förstå. Särskilt viktigt är detta för personer med olika typer av lässvårigheter
Det är alltså en stor fördel om du kan lägga till ljudklipp, filmklipp och animationer, tabeller, diagram eller andra illustrationer till din text.
Genom att erbjuda din läsare fler sätt att ta till sig din text, så ökar chansen att du når fram till fler. Förutom att lägga till bilder och arbeta med textens innehåll och struktur kan du till exempel infoga något eller några av följande:
- film
- ljud
- animationer
- länkar
Hur du infogar en film från Youtube
- Gå till filmen som du vill dela och klicka på ”Dela” under filmen (bild 1).
- Oftast räcker det att kopiera länken till filmen (bild 2).
- Gå till inlägget och klistra in länken. De flesta filmer från Youtube dyker upp inbäddade av sig själva när dela-länken klistras in.
- Bäddas inte filmen in (om det bara blir en länk), så gå till klippet och välj istället klippets ”bädda in”-kod (bild 3).
- Gå till inlägget och ”Infoga media”. Antingen genom Infoga-fliken eller genom att utöka verktygsrad (bild 4 och 5).
- Vill du dela från ett specifikt ställe i filmen? Gå till det stället, klicka på ”Dela” och bocka i rutan ”Dela från” (bild 6).
Välj om möjligt filmer med undertexter
Beskriv med text allt innehåll som inte är text. Det är för att personer som inte kan höra, ska kunna följa med i filmen. Välj därför om möjligt en film som har textning (bild 7).
Lägga till egna undertexter
Har ni/du gjort en egen film, så går det att lägga till undertexter själv på Youtube.
- Klicka på din profilbild längst upp i högra hörnet. Välj ”Din kanal” (bild 8).
- Gå till ”Videor”-fliken och hitta din film. (bild 9)
- Redigera (10) -> Undertexter (11) -> ”Lägg till språk” (12) -> ”Lägg till” (undertext) (13)
- Välj att lägga till text manuellt om du inte har en textfil (14). Bocka gärna i rutan ”Pausa när jag skriver”.
- Publicera.
Du kan även erbjuda textmanus till filmen eller erbjuda en innehålls-förteckning med tidsangivelser om det är en längre film.
Allt som kan förtydliga texten och ge kompletterande information som komplement till texten underlättar för personer med svårigheter att läsa själva texten.
Vill du infoga ljudklipp, väljer du kod om det finns. Annars laddar du bara upp ljudfilen. det är bra om det finns en kompletterande text eller sammanfattning för personer som inte hör.
Allt som kan förtydliga texten och ge visuell information som komplement till texten underlättar för personer med svårigheter att läsa själva texten.
Tänk på att beskriva innehållet i till exempel bildtexten för de som inte kan se eller inte kan se färger. Till exempel om ett diagram presenterar information genom färger.
En länk leder läsaren någonstans. Till exempel Webbriktlinjer för tillgänglighet
- Skriv tydligt beskrivna länkar (kan vara sju till tolv ord). Du ska kunna läsa bara länk-texten och ändå förstå var den leder.
- Länkar ska vara understrukna eller bli understruken när man för musen över. OBS! Stryk aldrig under text som inte är en länk.
- Låt länkar öppnas i samma fönster. (Detta gör de automatiskt om du inte väljer att de ska öppnas i en ny flik.)
- Enskilda webb-länkar kan infogas i texten. Har du flera länkar kan de istället samlas i en länklista längst ner.
- Testa länkarna.
Exempel på beskrivande länkar som kan förstås utan övrig text
Webbriktlinjer för tillgänglighetAnteckningar från föräldramötet 16 september 2020Fler nyheter
Exempel på länkar som inte talar om vart de leder.
https://webbriktlinjer.se/wcag/Läs mer härKlicka här för att komma till …Gå till …För mer information om …
| Skriv hellre | Istället för |
| Webbriktlinjer för tillgänglighet Anteckningar från föräldramötet 16 september 2020 Fler nyheter | https://webbriktlinjer.se/wcag/ Läs mer här Klicka här för att komma till … Gå till … För mer information om … |
Webbsidor öppnas som standard i samma fönster om du inte aktivt väljer att öppna den i annan flik. Detta görs för att bevara tillbaka-knappen för navigering och hjälpmedel.
| Rekommenderas | Rekommenderas ej |
| Det bästa är att lägga informationen direkt på en webbsida. Dessutom fungerar det mycket bättre i mobilen. | Bifoga ett dokument. |
| Låt dokumentet öppnas i ett nytt fönster. | Infoga inte skannade dokument som blivit en bild. Bilder kan inte läsas upp. |
| Ladda helst inte upp egna blanketter – länka till de som finns på karlstad.se under e-tjänster och blanketter för att undvika dubbletter och gamla versioner. karlstad.se/e-tjanster. |
Om du ändå bifogar ett dokument
- Om du ändå bifogar ett dokument, ska de vara i PDF-format och tillgängliga. Använd kommunens mallar, då får du en hel del tillgänglighet på köpet. Se bild 1 och 2 längre ner.
- Lägg dem sist i inlägget och låt dem öppnas i nya fönster.
- Ge dokumentet ett namn som beskriver innehållet i dokumentet. Exempel: Riktlinjer för förskoleplats.pdf.
- OBS! Filformatet behöver även finnas med i namnet för att Windows ska kunna öppna dokumentet.
- Filens storlek bör framgå av länktexten. Då kan besökarna lättare avgöra hur lång tid det tar att ladda ner dokumentet.
- Undvik specialtecken, mellanslag och understreck i filnamn, annars kan ”%20” uppstå. Bokstäverna ÅÄÖ går bra att använda i dokumentnamn.
- Använd kommunens mallar så får du med en del tillgänglighet på köpet. Du hittar dem i Word, PowerPoint mm (bild 1 och 2).
Testa gärna hur tillgänglig din text är.
För personer med synnedsättning
Läs- och skrivsvårigheter
Möjlig att översätta till sitt modersmål
Här finns en sammanfattning.
- Rubrikerna är beskrivande med ca 5-10 ord.
- Text kompletteras med bilder som matchar innehållet.
- Längre texter har en ingress (kort sammanfattning först).
- Det viktigaste står först i texten.
- Det finns inte onödigt krångliga eller långa meningar med.
- Texten är skriven med vardagliga ord.
- Ord som kan vara obekanta och nya har en förklaring i parentes efter ordet.
- Överflödiga ord och meningar är borttagna.
- Texten står ej i löpande text utan innehåller stycken och mellanrubriker för att bli lättare att hitta i.
- Texten är om det är möjligt förstärkt med illustrationer, bilder, ljudfiler, filmer eller animationer.
- Bilder med information som inte finns i texten kan läsas upp med alternativtext och förstoras.
- Där bilden behöver förklaras och tydliggöras finns bildtext, till exempel diagram?
- Länkar är understrukna och har ett unikt namn som beskriver tydligt var den leder, istället för ”läs mer här” eller en krånglig lång länkadress.
- Instruktioner går att förstå även för de som är färgblinda och inte kan höger och vänster.
- Diagram går att tolka även för de som inte ser färger.
- Nyheter är tidsbegränsade och försvinner när de inte är aktuella.
- Jag har testat att få inlägget uppläst (till exempel med programmet ClaroRead)
- Jag har testat länkarna så att de leder rätt.
I början tar det mer tid, men det blir lättare och går snabbare för varje gång vi gör det. Tillslut ”sitter det i ryggmärgen” (vi gör det utan att tänka). Och alla som använder webben och inte ser eller hör eller har nedsatt syn eller hörsel kommer att kunna ta till sig vårt innehåll.
Tillgänglig webb, redaktörens checklista på Solsidan
Skrivregler för Karlstads kommun
Språk och skrivregler på Solsidan