Avsnitt kategori: Word grund

WCAG 1.4.1 – Använd inte enbart färg för att förmedla information

För personer med färgblindhet kan det vara svårt att urskilja färger från varandra och därför vill vi komplettera information på fler sätt än att bara urskilja med färg.

I mitt dokument har jag ett diagram över en butiks morgonförsäljning där vi kan se hur mycket kaffe, te, fralla och juice som butiken säljer i procent. Men för en färgblind person kan det vara svårt att urskilja vilket block som hör till vilken produkt, eftersom de endast urskiljs med färg.

Det går att lösa på flera sätt, en enkel lösning är att skriva ut siffrorna bakom varje produkt. Kaffe har en morgonförsäljning på 43%, te har 11%, fralla 24% och juice 22%. Innan urskilde vi bara med färg, men nu har vi kompletterat med siffror. En väldigt enkel lösning för att även personer med färgblindhet ska kunna urskilja informationen.

I ett annat exempel har vi en fiktiv väder varning. Gul varning, orange varning och en röd varning. Alla tre vädervarningar består av en cirkel med respektive färg i. Och här är färgen det enda sättet att urskilja vilken varning som är i vilken stad och när. Om vi skulle ta bort färgerna och se i svartvitt så blir det genast väldigt tydligt att det är svårt att förstå.

Här vill vi också komplettera informationen med mer än bara färg. Antingen gör man som på förra lösningen, att komplettera med text. Och då skriva ut, gul, orange, röd varning.

Men annars kan man komplettera med form. Till exempel en triangel för oreange varning, fyrkant för röd varning. Och så har vi kvar cirkeln för den gula varningen. Om vi nu tar bort färgen igen och gör bilden svartvit så är det mycket tydligare vilken varning som gäller för respektive stad.

WCAG 1.4.11 – Använd tillräckliga kontraster i komponenter och grafik

Använd tillräckliga kontraster i komponenter och grafik liknar den förra riktlinjen, skillnaden är främst att den riktar sig mot grafik i stället för text. Det kan vara ett diagram, en ikon eller andra grafiska inslag som inte är dekorativa. Vad som också skiljer den här riktlinjen åt från den förra är att den är svårare för Words inbyggda tillgänglighetskontroll att testa.

För grafik är kontrastkravet minst 3, oavsett storlek på grafiken.

För att testa grafik kan det vara bra att använda olika verktyg. Till exempel Colour Contrast Analyser som är ett gratis verktyg för att testa kontraster. Vi går inte inte in på djupet av att testa kontraster i den här kursen men se gärna någon av våra andra kurser om att testa kontraster.

På sida sex står det ”följ oss på sociala medier”. Och efter har vi bilder på ikonerna. Vi börjar med att använda kontrastverktyget. Först väljer jag ut bakgrunden som är vit. Sen tar jag pipetten i kontrastverktyget och väljer ut den ljusblåfärgen i ikonerna. Vad som händer då är att verktyget testar kontrastvärdet mellan färgerna. Här kan jag se att kontrastvärdet är 2,6 och under ser jag också att jag får nedslag, det står fail och ger röda kryss som indikerar att färgerna inte fungerar mot varandra. Hade jag haft en godkänd färkombination, till exempel svart mot vit ser vi att det blir gröna bockar och står ”pass” i stället.

Så vi vet att färgerna inte klarar kontrastkraven men om vi tittar i Words tillgänglighetskontroll har vi inga nedslag i dokumentet.

Word kan ha svårt att testa alla färger så det kan vara bra att göra sig bekant med ett separat verktyg för att testa kontraster.

Användare med till exempel synnedsättning behöver kunna se innehållet och därför finns det kontrastkrav i WCAG. Alla ser olika bra men riktlinjerna tar upp minimumkrav för kontraster. Det innebär att kontrastkraven är minimum som är godkänt att använda. Men det går bra att använda högre kontraster är minimum.

Designen är bra att stämma av tidigt i processen, att ändra designen lägre fram kan ta en del extratid eller gör att du behöver backa några steg. Därför är det bra att se över val av färger tidigt.

Det finns tre riktlinjer som är bra att känna till när det kommer till färger.

WCAG 1.4.3 – Använd tillräcklig kontrast mellan text och bakgrund

Tillräcklig kontrast mellan text och bakgrund gäller för stor text, som rubriker, och vanlig text. Då gäller det att kontrastvärdet mellan texten och bakgrunden som texten ligger på ska ha tillräcklig kontrast.

Till exempel är texten på en ljusorange bakgrund är enklare att se om texten är mörk, och svårare att se om texten är ljus. Många färgkombinationer är godkända att använda och med tillgänglighetskontrollen i Word är det enkelt att se om du får nedslag på några färgkombinationer.

Kraven som gäller är minst 3 i kontrast för stor text. Text som räknas som stor är minst 18pt eller 24px. Om texten är fetad behöver texten vara minst 14pt eller 18,5px.

Är texten mindre än så räknas den som liten. Då gäller i stället 4,5 i kontrast.

Om kontrasten är mindre än 3 eller 4,5, beroende på om texten är stor eller liten kommer du få nedslag i tillgänglighetskontrollen. Om du ändrar färg på texten så den blir godkänd försvinner nedslaget i kontrollen.

Just nu har vi åtta nedslag på kontraster i tillgänglighetskontrollen. Rubriken får nedslag, texten under. Jag får nedslag på flera ställen i tabellen, och sen har jag ett nedslag på text där bakgrunden och texten inte har tillräcklig kontrast mellan varandra.

Det är väldigt enkelt att se när text inte klarar kontrastkraven i Word, vi kan börja uppifrån och öka färgen på rubriken. När jag nu ändrade färg försvann nedslaget i kontrollen. Jag gör samma sak på texten. På tabellen är det rubrikerna jag får nedslag på, antingen kan man göra texten mörkare. Men jag gör bakgrunden i tabellen ljusare i stället. Den sista texten gör jag mörkare. Nu har vi inga fel på riktlinjen kontrast mellan text och bakgrund.

Det går att skapa innehåll på två sätt – manuellt eller via formatmallar. När jag säger manuellt menar jag att du kan få en text att se ut som en rubrik, till exempel genom att göra texten större, kanske fetmarkerad eller ändra teckensnitt på texten. Men texten kommer bara visuellt att se ut som en rubrik. Den kommer inte att få med taggarna som gör att en skärmläsare förstår att det är en rubrik.

På samma sätt kan du manuellt göra bindestreck framför text så det ser ut som en lista. Men det blir samma problem här – taggarna blir inte rätt i pdf:en. Listan kommer inte få med listtaggar och rubriken kommer inte få med en rubriktagg. Taggarna gör att skärmläsare kan läsa dokumentet så det vill vi självklart ha med.

Formatmall – bra för tillgänglighet och för att få rätt utseende

Vad vi i stället vill göra är att använda formatmallen. Formatmallen har färdiginställda format för både utseende och funktioner, så använder du formatmallen så följer också taggarna med vid export till pdf. En annan sak som är bra med att använda formatmallen är att dokumentet får ett enhetligt utseende. Rubriker, text, tabeller och citat får ett sammanhängande utseende och följer en grafisk profil. Så även om ni är flera personer som skapar dokument i en organisation så kan ni ändå få samma känsla och design i dokumenten.

Det bästa är om element som: rubriker, text, listor i mallen har förinställda formateringar. Vi kan öppna upp formatmallen via den lilla pilen under ”Format”. Då visas alla förinställda formateringar som finns i mallen. Om jag ställer mig på huvudrubriken i mitt dokument så ser vi att det är en ”Rubrik 1”. I pdf kommer rubriken få taggen H1. Om jag trycker på rubriken ”Butiken” ser vi att det är ”Rubrik 2” vilket blir H2 i pdf. Texten i stycket under har formatet ”Innehåll” och kommer få taggen <p>.

På sida 6 har vi två rubriker som har samma utseende och båda vill jag ska ha taggen H2 i pdf. När jag ställer mig på den första ser jag att det är ”Rubrik 2”, men på den andra ser jag att formatet är ”Innehåll” i stället. Här har jag manuellt ändrat utseendet på rubriken, utan att få med rubriktaggen. Jag har bara ändrat teckensnittet, gjort texten större och fetmarkerad. Det rätta sättet är i stället att markera texten och välja ”Rubrik 2” i formatlistan, då får du med taggen och det går dessutom mycket snabbare.

Samma sak gäller för andra element. För listor ska man undvika att skriva bindestreck framför, men det går bra att använda de numrerade och onumrerade listfunktionerna. Finns det förinställda listformat ska du använda dem för att även få rätt utseende.

Om du vill att något innehåll ska ha samma tagg, men olika utseende går det att göra. Börja med att märka upp innehållet via formatmallen, som båda mina rubriker vill jag ska ha taggen H2. Nu när de har rätt uppmärkning kan jag ändra färg, eller storlek på en av rubrikerna. Nu har de olika utseende men vid export till pdf kommer båda ha taggen H2.

Arbeta med formatmallen så mycket som möjligt och kontrollera att innehåll får rätt taggar vid export till pdf.

Vi ska börja med att titta på den inbyggda tillgänglighetskontrollen i Word. Vi kommer återkomma till tillgänglighetskontrollen flera gånger under kursen så det kan vara bra att känna till den från början. Words inbyggda tillgänglighetskontroll är ett bra stöd för att se om vi har några problem i dokumentet och hur vi kan förbättra tillgängligheten. Den finns under Granska, Kontrollera tillgänglighet, Kontrollera tillgänglighet. Då dyker det upp en ruta på höger sida av skärmen där man kan se dokumentets nedslag.

Tillgänglighet redan från start

Ett tips är att ha tillgänglighetskontrollen i gång medan du jobbar. Då kan du upptäcka nedslagen direkt, i stället för att du har nedslag som du upptäcker i slutet och behöver göra ändringar när du nästan är klar. Om du inte redan set tillgänglighetskontrollen i fältet längst ner kan du Högerklicka i fältet. Där ser du en lista på saker som kan visas i fältet. I listan finns tillgänglighetskontrollen som går att välja. Nu ser du att kontrollen är fäst i fältet längst ner. Just nu står det ”utforska” i mitt dokument, vilket betyder att jag har nedslag som jag borde rätta till. När du arbetar kommer du se att statusen för kontrollen ändras beroende på om det finns problem eller inte, mellan ”utforska” och ”klart”. Det går också trycka på tillgänglighet för att komma till samma ruta som vi gjorde via Granska innan, men nu är det ett knapptryck i stället för flera. I rutan till höger kommer listan med brister att visas precis som innan.

Korrigera brister

I mitt dokument har jag några brister som jag behöver rätta till. Bland annat får jag nedslag på alternativtext. Genom att klicka på bilderna i listan kommer jag till direkt till bilden i dokumentet som jag får nedslag på. Det kommer också fram en hjälptext där det står varför detta ska korrigeras, för att personer som inte kan se bilden också kan förstå bilden om den finns beskriven i alternativtexten. Under står det också hur detta ska korrigeras. Jag ska högerklicka på objektet och sen välja ”redigera alternativtext”. Det går också att fälla ut pilen på sidan för att få information eller rätta till felen.

Jag fäller in ”Alternativtext” och öppnar nästa problem där det står ”Ingen rubrikrad”. När jag trycker här kommer jag direkt till tabellen som jag får nedslag på, så om du har ett dokument på många sidor så är det enkelt att hitta rätt i dokumentet. Vad som också händer är att hjälptexten uppdateras. Nu står det om tabellrubrikrader, varför det är viktigt och hur det går att korrigera. Hjälptexten uppdateras beroende på vilket nedslag det gäller.

Ett annat nedslag är bild eller objekt som inte är i nivå, bilder som inte är i nivå har ingen fast plats i dokumentet och det kan då vara svårt för hjälpmedel att veta var objektet är i förhållande till texten. Här finns också en hjälptext, vi ska kika närmre på bilder lite längre fram. Vi fortsätter rätta till brister tills ”Utforska” i fältet längst ner har ändrats till ”Klart”.

Automatisk kontroll är en bra start!

Ett automatiskt verktyg kan inte testa hela dokumentet och missar en del riktlinjer, men det är en bra start att inte ha några fel i kontrollen. När det står klart så har vi inga problem som den automatiska kontrollen kan upptäcka. Och vi är på god väg att skapa ett tillgängligt Worddokument som alla användare kan läsa.