Genomgång av webbdirektivet
Introduktion till webbdirektivet
Sedan 2016 står det klart att alla EU-länder ska få lagar som syftar till ökad digital tillgänglighet för alla användare, inklusive personer med funktionsnedsättning.
De aktörer som omfattas ska, i stora drag:
1. Utforma sina webbplatser, appar och dokument som sprids via dessa så att de är möjliga att uppfatta, hanterbara, begripliga och robusta.
Detta gäller så långt det är möjligt även innehåll som sprids via tredje part, exempelvis sociala medier.
Med möjligt att uppfatta - menar vi allt som vi ser – bilder och färger ska vara tydliga och beskrivas i text.
Med hanterbart menar vi att rubriker ska vara beskrivande, länkar ska vara tydliga - vi ska veta vad länken leder till innan vi klickar.
Med begripligt menar vi att vi ska vara konsekventa - alltid menyer på samma plats, alltid i bokstavsordning på samma sätt. Beskriv era "funktioner" på samma sätt oavsett vilka sidor de används på.
Med robust menar vi att HTML-koden ska vara korrekt så att webbplatsen fungerar i olika enheter och webbläsare. SiteVision har en inbyggd funktion för detta. Vi har en viktig roll för vi ska kravställa att koden blir korrekt men i slutändan ligger ansvaret på utvecklarna.
2. Erbjuda användare möjlighet att påtala tillgänglighetsbrister och begära att få
dem åtgärdade, och möjlighet att begära ut information som saknas, t.ex. film som inte är textad.
3. Regelbundet publicera ett tillgänglighetsutlåtande som redovisar hur vi uppfyller de 4 områdena och som innehåller länk till kommentarsfunktionen, samt länk till den instans som har tillsynsansvar (myndigheten för digital förvaltning, DIGG).
Kallas också ibland för tillgänglighetsredogörelse.
När en webbplats eller app ska uppfylla kraven så gäller det även dokument som inte är webbsidor (exempelvis PDF-filer) som distribueras via denna. Äldre dokument (som offentliggjorts innan den 23 september 2018) undantas från kraven, om de inte ”behövs för att genomföra de aktiva administrativa förfaranden som följer av den berörda myndighetens uppgifter” (exempelvis blanketter som fortfarande används).
När börjar kraven gälla?
Webbplatser som offentliggjorts innan 23 september 2018, samt film, podd med mera berörs från och med den 23 september 2020.
Publika appar berörs från och med den 23 juni 2021. Vi har inga sådana i dagsläget.
Argument för att öka tillgängligheten
Nästan alla har en funktionsnedsättning någon gång i livet, cirka en av fem har det permanent. Det finns många olika funktionsnedsättningar, de kan vara tillfälliga eller bestående.
Exempel på tillfällig respektive bestående funktionsnedsättning
• Någon som nyss har gjort en laseroperation, mer ljuskänslig under några månader.
• En person som är blind för livet har en bestående funktionsnedsättning.
Många av funktionsnedsättningarna, till exempel dyslexi och färgblindhet, märker
omgivningen vanligtvis ingenting av.
Exempel på funktionsnedsättningar och åtgärder som underlättar för personer med de funktionsnedsättningarna
• Paulina, synskadad sedan födseln. Använder skärmläsare, ett program som läser upp text från datorskärmar med konstgjort tal (talsyntes). Används för webbsidor, e-post och andra dokument. Hon kan inte läsa text eller se bilder själv. Exempel på åtgärder för Paulina:
o Tillhandahåll alternativ i form av text till allt icke-textbaserat innehåll (till exempel bild och film)
o Skriv tydliga länkar (så att besökaren förstår var hen kommer hamna när hen klickar på länken)
o Skapa rubriker med h-element (så att besökaren kan tabba sig fram till ”rätt del” av sidan)
• Ninni, inte datorvan. Exempel på åtgärder:
o Säkerställ att webbsidor presenteras och fungerar på ett förutsägbart sätt.
Till exempel konsekvent navigation och placering av olika element (kan vara puffar, nyheter och så vidare).
Exempel på konsekvent placering av puffar:
Katedralskolan: Katedralskolan - Vaxjo.se Växjö växer: Växjö växer - Vaxjo.se
o Ge all information på begriplig svenska. Förklara svåra ord och ge tydliga sammanfattningar. Vad behöver läsaren veta?
Fler argument för att öka tillgängligheten
• Vi når fler. Tillgängliga webbplatser säkerställer att så många som möjligt kan ta del av digitalt innehåll, och gör att fler hittar dit (bland annat eftersom
sökmotorer ger bättre ranking när det finns textalternativ).
• Färre avbrutna ärenden: Det finns många anledningar till att besök avbryts, och en av dem är att det kan finnas trösklar som skapar funktionshinder. Till exempel att väsentlig information inte hörs för den som använder skärmläsare. Exempel på bild med text: Modell kompetensrådet_arbete o välfärd.jpg (390×308) (vaxjo.se)
• Bättre användarupplevelser och ökad effektivitet: Många åtgärder som är nödvändiga för en viss grupp av användare på grund av till exempel
funktionsnedsättning är smidiga och sparar tid för alla användare. På det digitala området är textning av video ett tydligt exempel. Textremsan är bra för fler än de som har en hörselskada. Klarspråk är ett annat exempel på något som är
nödvändigt för några men sparar tid och frustration för andra.
Praktiska arbetsområden
De praktiska arbetsområden som vi behöver börja jobba med är indelade i:
• Design och logik
• Rörlig bild och ljudinspelningar
• Kontrast och färg
• Bilder och grafik
• Länkar och navigation
Är det rätt hierarkisk ordning på rubriker?
I sidans huvudrubrik används rubriknivå 1 (i SiteVision kallas den Rubrik 1). Det är viktigt att huvudrubriken (h1) är beskrivande och tydlig för sidans ämne och innehåll. Rubrik 1 kan bara användas en gång per sida.
Nästa rubriknivå är 2 (Rubrik 2 i SiteVision), som kan följas av en underrubrik av nivå 3 (Rubrik 3 i SiteVision), som i sin tur kan följas av en rubriknivå 4 (Rubrik 4 i SiteVision).
Rubriknivåerna 2, 3 och 4 kan användas flera gånger på samma sida, i rätt hierarkisk ordning. Användaren kan få en överblick, även om hen inte ser sidan, vissa webbläsare kan skapa en innehållsförteckning automatiskt. Då måste det vara rätt hierarkisk ordning på rubrikerna.
Om redaktören hoppar över rubriknivåer undrar användare med skärmläsare var föregående rubriknivå tagit vägen, eller om hen har missat information på sidan.
Är rubrikerna så tydliga att hen förstår vad sidan handlar om utan att behöva läsa?
Huvudrubriken bör vara så tydlig och så unik som möjligt utan att bli för lång. Besökaren ska förstå vad sidan handlar om, utan att behöva läsa innehållet.
Exempel:
• Kontakt
• Kontakta Växjö kommun
• Kontakta Katedralskolan
• Hjälp och stöd
• Hjälp och stöd för anhöriga till äldre
Även viktigt ur ett sökoptimeringsperspektiv. Besökaren söker troligtvis på ”kontakta Växjö kommun” och då har hen större chans att få rätt träff direkt.
Är rubrikerna i rubrik-format?
Rubriker ska alltid vara i rubrik-format, det vill säga Rubrik 1, rubrik 2, rubrik 3 och så vidare – inte i fetstilt, kursiv eller understruken brödtext. Det är viktigt för besökare som lyssnar på webbplatsen. Ofta söker besökaren något särskilt på webbplatsen och vill tabba sig fram till rätt del av sidan med hjälp av att lyssna på rubrikerna. Om rubriken till exempel är i fetstilt brödtext kommer besökaren inte kunna tabba sig mellan rubrikerna.
Istället får besökaren hela högermenyn uppläst, därefter innehållet på sidan. Det blir mer effektivt för besökaren att kunna tabba sig fram.
Rubriker i rubrik-format gör också att sökmotorer hittar relevant information på sidorna. Ord i h1- eller h2-element (rubrik 1 eller rubrik 2) anses ha högre relevans än ord i brödtext.
Sidtitel
Det är sidtitelns jobb att se till att besökaren kan identifiera sidan och få en uppfattning om vad innehållet handlar om. Vi får en sidtitel automatiskt enligt principen Sidans namn – webbplatsens namn.
Sidtitel är inte samma sak som rubrik. Sidtitel visas framför allt utanför själva sidan, till exempel i webbläsarens ram:
Rubriker visas på själva webbsidan:
Titeln representerar sidan när den sparas som bokmärke/favorit (om inte besökaren själv döper om bokmärket).
Titeln representerar sidan i webbläsarens historiklista.
Har likvärdiga funktioner samma namn på hela webbplatsen?
Använd samma termer för återkommande funktioner såsom knappar och ikoner, eftersom vissa användare saknar till exempel layout och formgivning som annars kan användas för orientering.
Exempel:
Skicka-knappen i formulär ska alltid heta Skicka. Idag heter den Skicka, Skicka beställning, Skicka anmälan et cetera.
Beställ betyg - Vaxjo.se
Ansök om att bli kontaktperson eller kontaktfamilj - Vaxjo.se
Används punktlistor endast till sådant som ska listas?
Ange rätt html-element när vi gör listor. Använd inte listrelaterade html-element för sådant som inte är listor.
Exempel:
Vi har idag något på www.vaxjo.se som kallas för stylad punktlista. Den har använts för att lyfta fram länkar. Den ska endast användas för punktlistor.
Stylad punktlista - Vaxjo.se
Finns det textalternativ till alla video- och ljudklipp, samt animationer?
Om ni väljer att ha video- eller ljudklipp så måste all information som finns däri vara tillgänglig i textformat, antingen som manus (som är anpassat efter videons faktiska innehåll, och inte bara ett originalmanus) eller transkribering. För videoinspelningar utan ljud är en ljudinspelning ett godtagbart alternativ.
Är video och animation textad och syntolkad?
Alla filmklipp och animationer ska vara textade och syntolkade. Undertexterna ska vara stängda, då får användaren själv bestämma om de ska visas. De ska beskriva relevanta ljud som exempelvis "en telefon ringer".
Syntolkning av videoinspelningar:
Personer med begränsad syn ska kunna ta del av innehållet. Då kan användaren välja ett ljudspår där en röst återger det visuella innehåll som inte framgår av dialog och
miljöljud. Syntolkning är viktigt eftersom personer behöver förstå sammanhang där visuell information är nödvändig
Informerar ni om att det finns en syntolkad version eller att filmen är textad?
Informera alltid användaren om att det finns en syntolkad version eller om filmen är textad. Den nya lagen kräver att innehåll som distribueras via tredje part, till exempel sociala medier, ska tillgänglighetsanpassas "så långt det är möjligt". Det innebär
åtminstone undertextning och syntolkning, men även bra kontraster i textplattor med mera. Men på den egna webbplatsen ska tillgänglighetskraven uppfyllas helt.
Direktsändningar:
Det krävs inte undertextning och syntolkning på direktsändningar.
Direktsändningar får inte ligga kvar längre än 14 dagar på webbplatsen. Efter 14 dagar övergår direktsändningen till att bli en inspelning. Ska den ligga kvar måste filmen ha undertextning och syntolkning.
Teckenspråkstolkning:
Den nya lagen ställer inga krav på att man ska erbjuda teckenspråkstolkning, men man ska överväga det. Vi inom offentlig sektor har ett särskilt ansvar, via språklagen, att
skydda och arbeta för teckenspråket.
Har rubriker, brödtext och bilder tillräcklig kontrast mot bakgrunden?
Bra kontrast mellan text och bakgrund är viktigt för läsbarheten, särskilt för personer med nedsatt synförmåga.
Förmedlas information med både text och bild/färg, och inte enbart bild eller färg?
Tänk på att vissa är färgblinda eller har nedsatt synförmåga och inte kan uppfatta
information som bara förmedlas med färg och form. Komplettera därför alltid bilder och färger med text. Tänk på att det är viktigt att även skriva vad du menar om du illustrerar något med en färg.
Exempel:
Fotbollsplaner - Vaxjo.se
På denna sida finns önskemål om att de planer som har status ”öppen” ska markeras med grönt, de som har status ”stängd” ska markeras med rött. Det är okej så länge det står i text också om det är öppet eller stängt.
Finns det bilder av text?
Använd så långt det är möjligt text för att presentera information i stället för text i form av en bild.
Inga texter får förekomma i bilder, förutom i logotyper och andra bilder där den visuella presentationen av text är avgörande för att uppnå syftet med bilden. Det kan till
exempel gälla skärmdumpar till instruktioner. Det beror på två saker:
• Texter i bilder funkar inte med skärmläsare.
• Många användare behöver anpassa texten bland annat genom att förstora eller välja ett annat teckensnitt, ändra förgrund- och bakgrundsfärger eller
linjeavstånd. Vanligtvis kan användare kontrollera hur digital text presenteras.
Men när texten utgör en del av en bild saknas ofta de möjligheterna. Då blir
bilden och texten pixlig om den förstoras och det är svårt eller omöjligt att byta teckensnitt eller färger.
Exempel på bild med text:
Statistik och nyckeltal för Videum AB och Videum Science Park
Finns det bild- och filmtexter till alla bilder och filmer?
Användare som är beroende av till exempel skärmläsare behöver beskrivningar av allt innehåll som inte är text. Det gäller till exempel:
• Bilder (förutom sådana som endast används för dekoration)
• Diagram
• Animationer
Beskriv allt innehåll som inte är text med text. Beskriv varför bilden finns här och kort vad den beskriver.
Det räcker inte med Foto: www.mjfoto.se.
Finns det alt-text till alla bilder, film- och ljudinspelningar?
Alla bilder, videos och ljudinspelningar ska beskrivas i text. Det innebär att vi ska skriva alt-text till knappar, logotyper, skärmdumpar och diagram. Alt-texten ska förmedla samma information som bilden och vara mer djupgående än bildtexten.
Är länkens destination tydlig i länkens formulering?
Det ska gå att förstå vart länken leder även om den är tagen ur sitt sammanhang. Länka aldrig ordet "här" eller "läs mer om" eller "gå till". Användare vet att det går att klicka på länkar, det behöver vi inte tala om.
Eftersom länkarna ska vara unika ska vi inte ha flera länkar med samma länknamn på samma sida.
Exempel:
En del av din vardag - Växjö Energi (veab.se)
Samma länknamn används två gånger på en sida:
Det blir problematiskt för personer med skärmläsare att tabba sig mellan länkar om det bara står ”läs mer”.
Exempel på länkar som uppfyller kraven:
• Ansök om förskoleplats
• Integrationsplan för Växjö kommunkoncern
• Frågor och svar om löneöversyn
• Instruktion för elektrisk handbroms och alkolås
• Skapa profil hos Sydresor
• Lagar för arbetsmiljön på www.arbetsmiljöverket.se
Är navigation, struktur och layout konsekvent på hela webbplatsen?
Navigation, struktur och layout ska vara konsekvent på hela webbplatsen. Det innebär att varje sida i största möjliga mån bör ha samma upplägg.
• Använd alltid högermeny
• Låt alla sidor vara synliga i menyn
• Återkommande sidelement (till exempel snabblänkar och puffar) ska placeras på samma plats på alla sidor ska bete sig likadant.
Vi ska inte länka till undersidorna genom länkar direkt på sidan eller puffar, i stället för genom högermenyn.
Finns det instruktioner med sensoriska tecken?
Även den som inte kan uppfatta form, storlek eller har möjlighet att relatera till höger eller vänster behöver kunna förstå hänvisningar. Ta bort instruktioner som "klicka i menyn till höger" eller ”klicka på den runda knappen”. Detta beror dels på att personer med exempelvis skärmläsare får svårt att förstå instruktionen, dels för att hänvisningar till höger eller vänster oftast inte gäller när besökaren använder mobiltelefon. Det som ligger till höger/vänster på en dator hamnar ofta under eller över i mobiltelefonen.
Dessutom ska dessa åtgärder vidtas
Tillgänglighetsutlåtande/tillgänglighetsredogörelse
Regelbundet publicera ett tillgänglighetsutlåtande som redovisar hur vi uppfyller tillgänglighetskraven. I tillgänglighetsutlåtandet ska det också finnas en förklaring hur användare kan påtala hinder, samt hänvisa till DIGG som följer upp direktivet.
Möjlighet att påtala tillgänglighetsbrister
Erbjuda användare möjlighet att påtala tillgänglighetsbrister och begära att få det åtgärdat. Brister kan påtalas via mejl, e-tjänst eller formulär.
Tillgängliga dokument
Även dokument ska alltså göras tillgängliga.
Det innebär bland annat:
• Använd formatmall med rubriker, ingresser, brödtext rätt uppmärkt
• Alt-text till bilder
• Innehållsförteckning
• Se till att kopiering av dokumentet är tillåtet
• Det viktigaste när man konverterar till PDF är att texten verkligen är text och inte text som har skannats in som en bild.
Tips
Använd er av SiteVisions tillgänglighetskontroll.
Den kontrollerar bland annat:
• Rubriknivåer
• Om alt och title används på text och bilder
• Om vi har länkat ordet ”här”
Tänk på att lägga in “tidigare adress” när ni döper om sidor/ändrar rubrik 1, så att vi inte får brutna länkar. Att man omdirigerar en adress innebär att om en besökare går in på den gamla adressen så skickas besökaren automatiskt vidare till den nya adressen.
