Guide Tillgänglighet
Tillgänglighet är ett av våra fokusområden och vi jobbar ständigt med att förbättra tillgängligheten i produkten. Vi har länge haft utökat tillgänglighetsstöd som kontrollerar bildbeskrivningstexter och tabellbeskrivningar. Stödet påminner om att undvika länkbeskrivning och i verktyget finns en tillgänglighetskontroll som körs vid publicering. Allt eftersom kraven höjs så utökar vi också Sitevisions funktionalitet.
Men vad innebär direktivet för dig som utvecklar en webbplats eller arbetar med dess innehåll? Här listas webbriktlinjerna och i vilka fall funktionen finns inbyggd i Sitevision, eller om det rör sig om något du själv måste ta ansvar för.
Nedanstående är hämtade från webbriktlinjer.se och dess checklista för tillgänglighet och fokuserar på WCAG 2.1 AA.
All funktionalitet ska kunna användas med tangentbordet
Se till att det går att hantera all funktionalitet med enbart tangentbord, eftersom många hjälpmedel i praktiken fungerar som tangentbord.
Det är upp till dig som beställare att ställa krav på detta när webbplatsen byggs. Standardmoduler stöjder tab-navigering, görs det anpassningar kan detta dock påverkas. Webbläsare beter sig också olika varför du bör testa i olika webbläsare.
För att till exempel skärmläsare ska kunna presentera innehållet korrekt bör du ange aktuellt språk i html-koden med hjälp av ett lang-attribut.
I Sitevision skrivs lang-attributet ut per automatik kopplat till vilket språk du ställt in webbplatsen till.
https://www.digg.se/webbriktlinjer/alla-webbriktlinjer/ange-sidans-sprak-i-koden
Ange språkförändringar i koden
För att skärmläsare och andra hjälpmedel ska kunna presentera innehållet korrekt bör språkkod och aktuellt språk (lang-attribut) anges i koden.
I SiteVision kan du markera delar av text som avviker från webbplatsens standardspråk och där ange vilket språk stycket är skrivet på. Detta skrivs sedan ut i html-koden som lang-attribut.
https://www.digg.se/webbriktlinjer/alla-webbriktlinjer/ange-sprakforandringar-i-koden
Ange syftet för formulärfält i koden
Du ska hjälpa dina besökare att fylla i inmatningsfält genom att ange vilken typ av innehåll som förväntas i koden. Webbläsare eller hjälpmedel kan då ibland automatiskt föreslå inmatning (baserat på till exempel tidigare inmatning i fält av samma typ) i vanliga formulärfält (till exempel namn, gatuadress eller mejl).
I Sitevisions formulärsmoduler kan du ange ifall ifyllnadsstöd ska användas och i så fall vilka fältnamn som ska gälla. Då hämtas informationen, förutsatt att den finns angiven sedan tidigare någonstans.
https://www.digg.se/webbriktlinjer/alla-webbriktlinjer/ange-syftet-for-formularfalt-i-koden
Använd inte enbart färg för att förmedla information
Använd gärna färger, men färgskillnader bör inte vara det enda sättet att urskilja information. Komplettera med exempelvis text, mönster eller andra visuella indikationer.
Du som redaktör ansvarar för att skapa skillnader i informationen med hjälp av färger, text, mönster eller någon annan visuell indikation. I Sitevision kan användaren skapa dekorationer för att på ett enkelt sätt lägga på visuell indikation.
Använd text, inte bilder, för att visa text
Användare behöver ibland kunna förstora, välja annat teckensnitt, ändra förgrund- eller bakgrundsfärg, linjeavstånd och liknande. Om texten ligger sparad i en bild saknas de möjligheterna.
Det är upp till dig som användare att säkra tillgängligheten när det kommer till text och bild i kombination. I bildmodulen kan du vid behov lägga till bildbeskrivning som visas som text direkt under bilden, du ska alltid lägga till alt-text. Med hjälp av egen CSS kan du placera text på bilden istället för att ha texten avbildad.
Använd tillräcklig kontrast mellan text och bakgrund
Bra kontrast mellan text och bakgrund är viktigt för läsbarheten, särskilt för personer med nedsatt synförmåga.
Det är på ditt ansvar att använda färger som uppfyller riktlinjen. I SiteVision kan färger läggas upp som sedan behörighetsstyrs, så att färger ämnade för exempelvis mallarna inte går nyttja kopplat till innehållet.
Använd tillräckliga kontraster i komponenter och grafik
Personer med nedsatt syn har ofta svårt att urskilja visuella kontraster mellan exempelvis en symbol och dess bakgrund, och riskerar därför att missa information.
När ni tar fram er grafiska profil och webbplats är det därför viktigt att ni säkrar färger och formatmallar så att kontrasterna är tillräckliga. Det är möjligt att sätta upp dekorationer och dekorationsmallar för att skapa ett gemensamt, konsekvent utseende på text och bakgrundsfärger. Kombinationen av färg och formatmallar bör därför tas fram med hänsyn tagen till tillgänglighet.
Beskriv med text allt innehåll som inte är text
Användare som är beroende av till exempel skärmläsare eller punktdisplay behöver beskrivningar av allt innehåll som inte är text.
Det är upp till dig att säkerställa att förklarande texter finns på innehåll som inte är text. I Sitevisions Bildmodul finns t.ex. möjlighet att lägga in alt-text, antingen egen eller en text som hämtas metadatat bildbeskrivning.
Erbjud alternativ till inspelningar som består av enbart ljud eller enbart video
Användare som inte kan ta del av ljud- eller videoinspelningar ska ha en möjlighet att komma åt innehållet med hjälp av en alternativ representation.
Detta löser du som kund genom att ta fram och erbjuda sådant alternativ.
Erbjud alternativ till komplexa finger- eller pekarrörelser
Alla personer kan inte hantera komplexa rörelser på en pekskärm, så kallade fingergester. Detta gäller till exempel att svajpa (swipe) och gester som kräver flera fingrar (multi-touch) såsom dra isär och nyp ihop.
I Sitevision ser vi alltid till att ha alternativ till komplexa finger- eller pekarrörelser. Du som kund behöver se till att funktioner ni bygger också följer detta.
Erbjud alternativ till rörelsestyrning
Se till att funktioner som aktiveras genom att användaren till exempel behöver skaka, vrida, röra vid eller vifta framför enheten går att stänga av.
I Sitevisions standardmoduler finns inga funktioner som är röreslestyrda. Därför är det viktigt att ni tänker på detta, i de fall ni tar fram sådana funktioner till er miljö.
https://www.digg.se/webbriktlinjer/alla-webbriktlinjer/erbjud-alternativ-till-rorelsestyrning
Erbjud flera sätt att navigera
Användare navigerar i digitala system på olika sätt. En person med synnedsättning kanske föredrar en sökfunktion, medan en person med en kognitiv funktionsnedsättning föredrar en innehållsförteckning eller ett alfabetiskt index.
Det finns en mängd standardmoduler som skapar goda förutsättningar att navigera. Menymodulen, innehållsförteckning, A-Ö meny och sök, för att nämna några.
https://www.digg.se/webbriktlinjer/alla-webbriktlinjer/erbjud-flera-satt-att-navigera
Erbjud möjlighet att hoppa förbi återkommande innehåll
För den som lyssnar igenom en sida med skärmläsare, eller som tabbar sig fram med tangentbord eller någon typ av hjälpmedel kan det ta lång tid att komma förbi till exempel en meny. Upprepas sedan samma innehåll på flera sidor ställs ännu högre krav på användaren. Därför ska det alltid finnas möjlighet att hoppa förbi sådant upprepat innehåll.
I Sitevision finns en rad moduler som exempelvis menymodulen, så att besökaren enklare kan hoppa över delar i strukturen. Sedan är det upp till dig som redaktör och utvecklare att använda dig av rätt rubriknivåer på sidan. I verktyget kan du även sätta ut rätt elementtyper och aria-roller på relvanta objekt. Formatmallarna (med möjlighet att lägga till beskrivning) gör det enklare att välja rätt rubrik. I Sitevision går det att använda WAI-ARIA och strukturelement (för den som använder HTML5).
Förmedla information, struktur och relationer i koden
Öka möjligheterna för att informationen presenteras korrekt oavsett besökarens verktyg, genom att använda html-element på rätt sätt.
I Sitevision finns stöd för elementtyper och aria-roller för att märka upp innehåll. Du som har gått mall- eller certifieringsutbildning hos oss har tillgång till delar på vår hjälpwebb med dokumentation av hur mallar och sidor ska byggas och struktureras för att informationen ska presenteras korrekt.
Ge förslag på hur fel kan rättas till
När fel upptäcks automatiskt bör förslag på korrekt inmatning presenteras för användaren om det går.
I Sitevision finns möjlighet att aktivera rättstavning och vid publicering görs en kvalitetskontroll som går igenom länkar, W3C-validering och en tillgänglighetskontroll. Standardsökmoduler kan erbjuda ordförslag. I formulär går det ange värden som förväntas (text, nummer, telefon, webbadress etc), det kallas ifyllnadsstöd och kopplas till olika fälttyper. Validering av värden går att aktivera för att säkra att olika värden följer ett visst mönster. Du kan även skriva ett eget reguljärt uttryck ifall valideringsalternativet du behöver saknas.
https://www.digg.se/webbriktlinjer/alla-webbriktlinjer/ge-forslag-pa-hur-fel-kan-rattas-till
Ge möjlighet att ångra, korrigera eller bekräfta vid viktiga transaktioner
Den som råkar göra något fel kan slippa mycket besvär om felet kan upptäckas och åtgärdas direkt.
Sitevision som plattform arbetar utifrån WYSIWYG, så som sidan ser ut kommer den också att presenteras för besökaren. Därför har du som redaktör goda möjligheter att tidigt upptäcka eventuella fel innan publicering. Du har också versionshanteringen som gör det möjligt att enkelt återställa sparade eller tidigare publicerade versioner. Systemet varnar användaren när den tar bort en sida, avpublicerar eller flyttar den i strukturen.
Gör det möjligt att justera tidsbegränsningar
Användare behöver ibland kunna justera tidsbegränsningar som finns inbyggda i systemet, till exempel i en beställningsfunktion.
I Sitevisions standardmoduler finns ingen tidsbegränsning att ställa in. Däremot är sessionstiden generöst tilltagen.
https://www.digg.se/webbriktlinjer/alla-webbriktlinjer/gor-det-mojligt-att-justera-tidsbegransningar
Gör det möjligt att pausa eller stänga av rörelser
Personer som tycker det är svårt att fokusera, läsa eller behålla koncentration behöver kunna pausa rörelser eller stänga av visuella distraktioner.
Inte många funktioner i Sitevision innefattar automatiserade rörelser, men modulen bildspel och nyhetslista går att pausa med pausknapp.
Gör det möjligt att pausa, stänga av eller sänka ljud
Det ska alltid gå att pausa, stoppa eller sänka sådant ljud som spelas upp automatiskt.
I Sitevisions standardmodul Video ges användaren möjlighet att pausa, stänga av eller sänka ljud.
Gör det möjligt att ångra klick
Den som använder pekskärm eller pekdon, exempelvis en mus, behöver kunna ångra sig om knappen eller trycket skedde av misstag. Erbjud därför minst en sådan möjlighet.
Mycket handlar om hur du programmerar funktionerna på webbplatsen, så här har du som utvecklare ett ansvar. I själva produkten Sitevision finns flera ångra-funktioner när användaren ändrar en inställning. "Innan up-eventet", dvs innan du som användare släpper markeringen kan du föra pekaren åt sidan och släppa för att undvika att genomföra aktiviteten. I gränssnittet får du dessutom dialogrutor som erbjuder"avbryt" de gånger valet faktiskt görs.
https://www.digg.se/webbriktlinjer/alla-webbriktlinjer/gor-det-mojligt-att-angra-klick
Gör det synligt vad som är i fokus
Den som navigerar med t.ex. tab-tangenten behöver få veta var fokus ligger. Standardmarkeringen är ofta en tunn linje som är svår att se.
Du kan göra markeringen tydligare med till exempel en CSS-regel.
https://www.digg.se/webbriktlinjer/alla-webbriktlinjer/gor-det-synligt-vad-som-ar-i-fokus
Gör inte instruktioner beroende av sensoriska kännetecken
Även den som inte kan uppfatta form, storlek eller kan relatera till höger eller vänster behöver kunna förstå hänvisningar till navigation och instruktioner.
Du som kund behöver se till att ni ger instruktioner som alla kan förstå och ta till sig.
Ha en meningsfull fokusordning
Testa tab-ordningen genom att granska en sida av varje sidtyp utan hjälp av tryckkänslig skärm, mus eller annat pekdon.
Som användare av Sitevision bör du därför alltid testa dina webbsidor och säkerställa att tab-ordningen stämmer.
https://www.digg.se/webbriktlinjer/alla-webbriktlinjer/ha-en-meningsfull-fokusordning
Ingen kontextförändring vid fokus
Om förändringar ska ske bör dessa förändringar uppstå när besökaren förväntar sig dem.
I Sitevision gör inte systemet några sådana förändringar automatiskt, utan ansvaret vilar på dig att inte ställa in några sådana funktioner.
https://www.digg.se/webbriktlinjer/alla-webbriktlinjer/ingen-kontextforandring-vid-fokus
Markören ska inte fastna vid tangentbordsnavigation. Det hindra besökare att använda webbplatsen eller vissa funktioner.
Du kan enkelt testa din webbplats genom att tabba dig genom sidan. Om det finns någon komponent eller något fönster där du inte kan ta dig ur när du navigerar med tabb-tangenten så har du stött på en tangentbordsfälla. Det kan till exempel vara en modal som saknar en stäng-funktion.
https://www.digg.se/webbriktlinjer/alla-webbriktlinjer/ingen-tangentbordsfalla
Innehåll som visas vid hover eller fokus
Innehåll, till exempel popup-rutor, som dyker upp vid tangentbordsfokus eller när användaren hovrar (för muspekaren) över ett visst objekt ska kunna uppfattas och hanteras av alla.
https://www.digg.se/webbriktlinjer/alla-webbriktlinjer/innehall-som-visas-vid-hover-eller-fokus
Konsekvent benämning av saker på hela webbplatsen underlättar för alla användare att känna igen sig och minskar onödig kognitiv belastning.
Var därför konsekvent när du beskriver och namnger samma funktionalitet på olika sidor och skärmar. Det innebär till exempel att rubriker, etiketter, ikoner och alternativtexter som ska heta samma sak på hela webbplatsen. Skicka-knapp är ett bra exempel. Döp den konsekvent, undvik Skicka på en sida och Sänd på en annan.
Dekorationer och CSS-ramverket Envision underlättar ett konsekvent användande av layout och formgivning i Sitevision. Metadata och etiketter gör det också enklare för redaktören att skapa en konsekvent webbplats. Du som användare har stort ansvar vad gäller sättet olika objekt döps, som att "sänd" i formulär konsekvent döps på det sättet, då knapptexten kontrolleras av användaren som sätter upp formuläret.
https://www.digg.se/webbriktlinjer/alla-webbriktlinjer/konsekvent-benamning
Orsaka inte epileptiska anfall genom blinkande
Personer med en viss kategori av epilepsi kan få krampanfall om de utsätts för snabbt blinkande “flimmer” som upptar en tillräckligt stor del av synfältet.
I Sitevision finns inte någon standardfunktion som blinkar.
Presentera innehållet i en meningsfull ordning
Utforma innehållet på ett sätt som bevarar den avsedda betydelsen för alla användare.
Det är ditt ansvar som redaktör att presentera innehållet i en meningsfull ordning. Staplingsordningen går justera i mallarna, om den inte stämmer, så här bör man testa innehållet i olika enheter.
Se till att innehållet anpassas efter skärmens riktning
Alla människor kan inte vrida på skärmen. Designa därför så att innehåll och funktioner är tillgängliga oavsett skärmens riktning. Då kan var och en välja det läge de föredrar.
I Sitevision är det WYSIWYG som gäller, what you see is what you get. Så som sidan ser ut för dig kommer den också att se ut för besökaren, så testa alltid.
Se till att det går att öka avstånd mellan tecken, rader, stycken och ord
Många användare, dyslektiker och personer med nedsatt syn exempelvis, behöver kunna påverka avståndet mellan stycken, rader, ord och tecken för att lättare kunna läsa. Därför ska du göra det möjligt för användaren att påverka avstånden utan att innehåll eller funktionalitet krockar eller gömmer sig bakom annat innehåll.
I Sitevision är responsiviteten inbyggd som standard och så länge du arbetar med relativa värden och standardnära funktioner är skalbarheten standard.
Se till att hjälpmedel kan presentera meddelanden som inte är i fokus
Se till att de som använder tekniska hjälpmedel som exempelvis skärmläsare och förstoringsprogram kan göras uppmärksamma på viktiga meddelanden även om de presenteras utanför det område på sidan som användaren har i fokus.
Här behöver du som utvecklare säkerställa att delar av webben som ändras vid input, till exempel ett sökresultat, är korrekt uppmärkt med aria-attribut. Det behövs för att förtydliga i kod vilket innehåll som ändrats på sidan som skärmläsaren ska göra användaren uppmärksam på.
Se till att er webbplats har sid- och stilmallar med en god kodkvalitet, som följer standarder. Det ökar chansen att alla användare kan komma åt informationen och tjänsterna på webbplatsen, oavsett vilka verktyg de använder.
I Sitevision finns en inbyggd valideringskontroll som körs varje gång sidan publiceras. Kontrollen görs utifrån W3C med anpassningar och den täcker grunderna i sin kontroll.
https://www.digg.se/webbriktlinjer/alla-webbriktlinjer/se-till-att-koden-validerar
Se till att skräddarsydda komponenter fungerar i hjälpmedel
Komponenter behöver exponera namn, roll och värde till operativsystemets tillgänglighets-API för att fungera med vissa hjälpmedel.
I Sitevision finns stöd för elementtyper och aria-roller. Om du som kund själv tar fram egna lösningar med exempelvis JavaScript behöver du säkerställa att detta fungerar.
https://www.digg.se/webbriktlinjer/alla-webbriktlinjer/se-till-att-komponenter-fungerar-i-hjalpmedel
Se till att text går att förstora
Det ska vara möjligt att förstora texten till åtminstone dubbel höjd och bredd utan att problem uppstår (till exempel att text hamnar bakom en bild eller krockar med annan text).
Sitevision ger användaren möjlighet att skapa mallar där texten går att förstora utan problem, responsiviteten är inbyggt. Det är upp till dig som användare att sätta upp mallarna på ett korrekt sätt och använda dig av relativa mått (t.ex. em, rem eller procent).
https://www.digg.se/webbriktlinjer/alla-webbriktlinjer/se-till-att-text-gar-att-forstora
Se till att text på knappar och kontroller överensstämmer med maskinläsbara namn
Se till att text som är synlig på knappar och andra gränssnittskontroller också finns i, och överensstämmer med, den maskinläsbara etikett som representerar kontrollen i exempelvis program för röststyrning.
I Sitevision är knapptexter "text", vilka även läses upp av en skärmläsare.
Skapa en flexibel layout som fungerar vid förstoring eller på liten skärm
Skapa en layout som fungerar på en 320 pixlar bred skärm utan att information eller funktionalitet går förlorad, utan scrollning i mer än en riktning.
Det finns inbyggt stöd för responsiv design i Sitevision och du kan alltid förhandsgranska ditt innehåll i olika storlekar i vår responsiva förhandsgranskning.
Skapa kortkommandon med varsamhet
Kortkommandon kan göra att det går snabbare att navigera på webbplatsen, men de bör användas med försiktighet.
Inga färdiga kortkommandon nyttjas i Sitevision som plattform. På webbplatsen går kortkommandon skapa via javascript. Detta bör skapas med varsamhet.
https://www.digg.se/webbriktlinjer/alla-webbriktlinjer/var-forsiktig-med-kortkommandon
Skapa tydliga fältetiketter och ledtexter
För varje fält i ett formulär där användarna ska fylla i information, ska du skapa en tydlig fältetikett (vanligtvis elementet label) som förklarar vilken funktion fältet har.
Detta finns färdigt i Sitevisions formulärsmoduler. Det är upp till dig som redaktörer att skriva tydliga och informativa fältetiketter. Rent kodmässigt kopplar Sitevision ihop fältetiketterna med inmatningsfälten i våra formulär.
https://www.digg.se/webbriktlinjer/alla-webbriktlinjer/skapa-tydliga-faltetiketter-ledtexter
Skriv beskrivande rubriker och ledtexter
Hjälp besökarna förstå en sidas innehåll och syfte med beskrivande rubriker, ledtexter och etiketter
Det är upp till dig som skapar innehåll att sätta beskrivande rubriker och etiketter. Vi rekommenderar att ni använder metadatat "sidans namn" i era mallar så att ni på så vis automatiskt skapar en rubrik.
https://www.digg.se/webbriktlinjer/alla-webbriktlinjer/skriv-beskrivande-rubriker-och-ledtexter
En bra beskrivande titel sammanfattar sidans ämne eller innehåll. Varje sida på en webbplats, liksom andra typer av dokument bör ha en unik titel.
Du som redaktörens ansvarar att skriva beskrivande titlar. I Sitevision blir sidans namn automatiskt också sidans titel. Detta är ett värde användaren själv kan ändra.
https://www.digg.se/webbriktlinjer/alla-webbriktlinjer/skriv-beskrivande-sidtitlar
Tydliga länkar underlättar för alla, men är särskilt viktigt för personer som använder vissa hjälpmedel.
Sitevision kan visa med ikon och dokumenttyp vilken länktyp det handlar om. Sedan är det upp till dig som redaktör att skriva en tydlig länktext och eventuell länkbeskrivning. På vår hjälpwebb, sidan Länktyper, finns bra tips på hur du skriver enkla och tillgängliga länkar. Den inbyggda tillgänglighetskontrollen varnar dessutom för "läs mer"-länkar och liknande.
https://www.digg.se/webbriktlinjer/alla-webbriktlinjer/skriv-tydliga-lankar
Syntolka eller erbjud alternativ till videoinspelningar
Ordna med syntolkning om det behövs för att personer med begränsad syn ska kunna ta del av videoinnehåll.
Här behöver du som innehållsansvarig se till att ni tillhandahåller syntolkning som komplement.
Den som inte kan ta del av det visuella innehållet i videoinspelningar, till exempel på grund av synnedsättning, ska kunna få motsvarande information antingen i form av syntolkning (ljudbeskrivning) eller presenterad som text.
Detta faller på ditt ansvar som redaktör att tillhandahålla kompletterande stöd till era videoinspelningar.
https://www.digg.se/webbriktlinjer/alla-webbriktlinjer/syntolka-videoinspelningar
Texta ljudet i inspelade filmer
Digital video ska ha undertexter och för annat ljud (till exempel poddar) bör en textversion erbjudas.
I Sitevision finns stöd för undertexter till redan existerande material. För direkttextning behöver ni hitta en strömningstjänst som har detta som inbyggt stöd.
Inspelad digital video ska ha undertexter och för ljudinspelningar (till exempel podcasts) ska en textversion erbjudas.
I Sitevisionmodulen Video kan du välja att använda egna undertexter.
https://www.digg.se/webbriktlinjer/alla-webbriktlinjer/texta-ljudet-i-inspelade-filmer
Utför inga oväntade förändringar vid inmatning
Utför ändringar endast när besökaren förväntar sig detta.
I Sitevision gör inte systemet några sådana förändringar, utan det vilar på ditt ansvar att välja att länkar öppnas i samma fönster etc.
Konsekvens är viktigt för att användarna ska förstå hur webbplatsen fungerar. Det betyder däremot inte att alla sidor måste se likadana ut. Det går säga att liknande uppgifter ska utföras på samma sätt oavsett var på webbplatsen man befinner sig.
Det är ditt ansvar som redaktör att skapa innehåll med en konsekvent struktur. Mallarna ska också vara utformade på att sånt sätt att navigaton, struktur och utformning håller en konsekvent linje.
https://www.digg.se/webbriktlinjer/alla-webbriktlinjer/var-konsekvent-i-navigation
Visa var ett fel uppstått och beskriv det tydligt
Hjälp dina användare när det blir fel. Det måste vara tydligt för användaren var felet finns och felet behöver beskrivas med text.
Vi har genomgående i produkten arbetat med felmeddelanden för att de ska vara lätta att förstå. Felmeddelanden är dessutom uppmärkta med wai-aria för att vara tillgängliga och lätta att ta till sig.
Skriv ut sida
help.sitevision.se hänvisar alltid till senaste versionen av Sitevision