107 tryk: Regionerne fejler egen coronatest

Resume: Det tager absurd mange tabulatortryk at nå den nye corona-chatbot, der skal lette presset på sundhedsvæsenet. Ingen af regionerne har prioriteret testen, så den får hurtigt fokus for tastaturafhængige brugere.

Knappen til Regionernes Corona-selvtest. Knapteksten siger: Test her Coronavirus-sygdom
“Test her – Coronavirus-sygdom” Knapteksten er i sig selv en artikel værd. Men det bliver en anden gang.

Danske Regioner har udgivet en digital chatbot, som gør det muligt selv at undersøge, om man måske kan være smittet med Coronavirus.

Et fint initiativ der måske kan lette presset på landets hospitaler og de privatpraktiserende læger, som lige nu er superhårdt spændt for.

Desværre fejler regionerne stort, når det gælder implementeringen af tjenesten.

Tusindvis anvender tastaturet som navigation

For at forstå årsagen er vi nødt til at have baggrunden med: Det er nemlig langt fra alle borgere, som er i stand til at anvende en mus.

En mus er et præcisionsinstrument, som kræver en høj grad af finmotorik, for at fungere optimalt. Kan man ikke anvende en mus, er alternativet ofte at anvende tastaturet, typisk Tabulator-tasten, piletaster, mellemrumstasten og så videre.

Spektret af helt eller delvist tastaturafhængige brugere er faktisk ganske bredt. I flæng kan nævnes:

  • Blinde (cirka 25.000)
  • Bevægelseshandicappede (cirka 250.000)
  • Gigtramte (cirka 700.000)
  • Personer med tremor eller Parkinsons (cirka 100.000)

Og det er bare de grupper, jeg først kom i tanke om. Det er cirka 1 million danskere, som i større eller mindre grad er tastaturdominante.

Det er mange mennesker, og det er derfor, at WCAG 2.1 har en hel sektion, der udelukkende handler om tastaturbrug.

Retningslinje 2.1 Tilgængelig via tastatur

Alle funktionaliteter skal kunne benyttes via et tastatur.

107 tryk fra start til mål

Jeg tog et kig på, hvordan regionerne har implementeret knappen. Det viser sig, at det i gennemsnit tager 107 tryk at nå det link, der starter chatbotten.

Lad mig lige gentage: 107 tryk, i gennemsnit. Et Nul Syv!

Antal tryk til Selvtest-knappen:
Region Antal tryk
Hovedstaden 114
Sjælland 101
Nordjylland 174
Syddanmark 51
Midtjylland 98

Tallene er beregnet som antal tryk fra adressefeltet til browseren havde fokus på knappen.

Hvor der var skiplinks har jeg ikke aktiveret dem, ud fra det argument, at man som blind ikke har nogen chance for at vide, hvor på siden selvtesten befinder sig: Springer man navigationen over, kan man også risikere at springe linket til testen over. Man er derfor nødt til at tabulere sig gennem junglen af links og håbe på det bedste.

174 Tabulatorklik til Region Nordjyllands Coronatest-knap
Region Nordjylland sætter muligvis danmarksrekord for længst vej til et element. 174 tryk på TAB-tasten, inden man er fremme ved målet.

Skiplinks kan også kun gøre så meget, i den aktuelle situation. Tager man region Nordjylland kan man godt nok spare 99 klik ved at bruge skiplinket, javel. For nogle vil det naturligvis betyde noget. Men der er altså stadig 75 klik til målet, så vi er stort set lige vidt.

To nemme løsninger på problemet:

1: Flyt knappen op i toppen af koden

Alle regionerne har sat koden ind som det sidste element på siden. Det betyder, at hvis man ikke gør noget for at ændre det, så bliver det også det sidste element som får fokus, når man tabulerer.

Derfor bør knappen flyttes op i toppen af koden. Kan den ikke det, bør den rettes til, så det kan lade sig gøre at give den fokus som det første element i rækkefølgen.

2: Lav en rigtig knap, ikke et pænt link

Regionerne havde faktisk en sidste mulighed for at redde lidt af æren: Skærmlæsere er nemlig supergode til at identificere forskellige elementer og præsentere dem på genvejssider for nem adgang.

Det er for eksempel ikke nogen stor kunst at åbne en elementliste undersøge, om adgangen til coronatesten måske skulle foregå via en knap, og så gå til den den vej.

Visuelt fremstår knappen jo også som en knap. Men i virkeligheden er det bare et link, der er stylet som en knap.

Den letteste løsning er naturligvis at bruge <button>-elementet og så style det, så det ligner, hvad man nu gerne vil have det til at ligne.

Men kan man virkelig ikke komme uden om at anvende et link, så tilføjer man i det mindste en ARIA role=”button”. Det er desværre en grundlæggende tilgængelighedsfejl og jeg håber, at den snart forsvinder, for det er faktisk til at undgå.

ARIA-roller kan omdanne links til knapper i en skærmlæser
Hvad angår skærmlæsere, så fremstår linket til testen nu som en knap og kan derfor identificeres som en knap – og derfor hurtigt findes i skærmlæserens elemenliste. Klassisk tilgængelighed! Bemærk i øvrigt, den noget lamme tekst: Open Chatbot… Helt ærligt!

Overholder regionerne så WCAG? Ja, teknisk set gør de jo. Man KAN jo godt nå linket med tastaturet. Man skal bare stå op i god tid og smøge ærmerne op. Og hey – vi har jo alligevel ikke andet at lave i disse dage.

Lær om webtilgængelighed

Guide: Angiv sidens sprog korrekt

Resume: Som webredaktør er det vigtigt at kunne skifte en sides sprog helt, eller delvist. Lær at overholde WCAG 3.1.1 og 3.1.2, og gør dit indhold tilgængeligt på alle sprog.

Når du udgiver indhold, der er i et andet sprog end sidens standardsprog, skal du huske at fortælle kompenserende teknologier som skærmlæsere og oplæsningssoftware, at her kommer noget tekst, som er i fremmedsprog.

Guide til at skifte sprog midt i en tekst

Du skifter sproget sådan her:

Find den tekst, der skal ændres og tilføj sproget således:

<p lang="en">This text will be read aloud in english</p>

Nu har du givet afsnittet, der er omkranset med <p>-koden et nyt sprog, og skærmlæsere kan tolke det korrekt.

Bonus: Egenskaben virker på alle koder.

Mere er der ikke i det, men hvis du virkelig vil, så kan du faktisk også skifte dialekt. For eksempel vil du kunne skifte til Britisk Engelsk med “en-GB” eller amerikansk engelsk med “en-US”.

Et forbehold: Du har nu gjort, hvad du kan og skal. Men det er ingen garanti for, at alle teknologier også forstår din hensigt: Jeg har personligt bøvlet en del med den nye oplæser i Microsoft Chromium Edge, og har stadig ikke fundet ud af, hvordan jeg får den til at skifte sprog frem og tilbage.

Hvorfor det er vigtigt at skifte sprog

Det sker kun sjældent, at websider kan slå folk ihjel, men vi har tidligere kigget på et eksempel fra Sundhedsstyrelsen, som i en periode havde angivet det forkerte sprog på siden om Coronavirus, og dermed gjort indholdet utilgængeligt for personer, der anvender skærmlæser.

I den aktuelle situation, kunne det få alvorlige konsekvenser for nogle borgere, og det vil vi som regel gerne undgå.

Det siger WCAG om sprog på siden

At undlade at angive en sides korrekte sprog er en overtrædelse af WCAG 3.1.1 (A), som siger:

3.1.1 Sproget på siden

Det menneskelige sprog, som er standard for hver webside, kan bestemmes programmeringsmæssigt.

Kildekoden til en webside, hvor sidens sprog er angivet til dansk
Sproget sættes en gang for alle i html-tagget. Det gøres med koden lang=”da” og er en triviel opgave for en webudvikler.

For at angive sidens globale sprog, anvender vi nøjagtig den samme egenskab, på nøjagtig samme måde. Den sidder bare på det yderste element i HTML-koden og gælder derfor på alt indhold, indtil det ændres.

Det er en teknisk ting og som webredaktør har du sjældent indflydelse på den del af koden.

Det har du der i mod på det indhold, du selv lægger op. Og derfor er det vigtigere for dig at kende WCAG succeskriteium 3.1.2 (AA):

3.1.2 Sprog, der anvendes til dele af indhold

Det menneskelige sprog, der anvendes i hver passage eller frase i indholdet, kan bestemmes programmeringsmæssigt. Undtaget herfra er egennavne, tekniske termer, ord med ubestemmelig sproglig baggrund samt ord eller vendinger, der er blevet en del af sprogbrugen i den tekst, de umiddelbart indgår i.

Nu ved du hvordan, du skal gøre det. Og hvorfor. Tillykke med det!

Lær om webtilgængelighed

Sundhedsstyrelsen udgiver utilgængelige råd om Coronavirus

Resume: To forkerte bogstaver, og hele websiden bliver umulig at tolke korrekt for tusindvis af borgere. Og når indholdet handler om Coronavirus, kan det få alvorlige konsekvenser. 

Artiklen er opdateret den 11. marts. Spring til opdateringen

Et af de vigtigste emner i starten af 2020 er uden tvivl Coronavirus. Sygdommen spreder sig gennem landet og myndighederne kæmper for at inddæmme smitten og undgå, at der bliver et egentligt udbrud i Danmark.

En vigtig brik i bekæmpelsen af Coronavirus er information om, hvilke forholdsregler man skal tage for at undgå smitte, og hvad man skal gøre, hvis man mistænker at være udsat for smitterisiko.

Sundhedsstyrelsen har derfor lavet en side med spørgsmål og svar om Coronavirus.

Og så langt, så godt.

Forkert kodning, forældede standarder

Desværre er siden kodet med forældede standarder, og er fra en tid, hvor kompenserende teknologier ikke var noget, man talte højt om.

Sproget er sat til engelsk, som givetvis er standardsprog i det CMS, som Sundhedsstyrelsen har valgt.

Når sproget er engelsk vil skærmlæsere naturligvis læse teksten op med engelsk stemme. I den følgende video kan du høre konsekvenserne af, ikke at gøre noget ved det. Videoen er tekstet, men jeg kan ikke garantere, at du bliver meget klogere…

Konkret overtræder Sundhedsstyrelsen WCAG 2.1, succeskriterium 3.1.1 “Sproget på siden”. Det virker som en lille ting, men to forkerte bogstaver, og indholdet er umuligt at forstå for tusindvis af borgere. I en krisetid kan det blive katastrofalt.

Skærmlæseren, jeg anvender i dette eksempel er NVDA v. 2019.3.1, men det ville være det samme for alle andre skærmlæsere. Læs min guide til at komme i gang med at forstå en skærmlæser.

Uddrag af kildekoden til Sundhedsstyrelsens side om Coronavirus. Sproget på siden er kodet til engelsk
Når sproget kodes til et andet sprog, end det der er tekstens sprog, kan skærmlæsere ikke gengive indholdet korrekt. Sundhedsstyrelsen har angivet sproget som engelsk, selv om teksten er på dansk.

Fejlen her er cirka lige så kikset, som når regeringen holder pressemøde om virussen – og faktisk husker at invitere en døvetolk med – men fjernsynet ikke viser tolken på skærmen, selv om vedkommende står lige op ad ministeren og simultantolker til landets cirka 4.000 døve borgere. (Og jo, det skete faktisk!).

Heldigvis, er det en fejl der kan rettes meget hurtigt, hvis man vil.

Sundhedsstyrelsens websted er generelt i meget dårlig forfatning, når det gælder webtilgængelighed. Men de har jo også til 23. september i år, inden de skal være færdige.

Vi må bare håbe, at der ikke kommer flere alvorlige sygdomsudbrud inden da.

Opdatering, 11. marts 2020

Nysgerrighed (og behov for en overspringshandling) fik mig til at kigge videre, og det viser sig, at der er en engelsk version af Sundhedsstyrelsens side om Coronavirus. Udmærket, så er der da håb.

Men her er det, at det bliver underligt, for siden er kodet med “lang=da”. Dermed er den engelske version af siden altså lige så uforståelig, som den danske.

Kildekoden til den engelske side viser, at sidens sprog er sat til dansk.
På den engelske informationsside om Coronavirus er sproget sat til dansk. Ikke videre hjælpsomt.

Jeg har hørt fra Sundhedsstyrelsen, og de siger, at de arbejder på sagen. Det lyder som en fin ide!

Lær om webtilgængelighed
Firmakursus: Lær om webtilgængelighed og WCAG 2.1 Afholdes hos jer og tilpasses jeres behov. Priser fra 15.400,- eks moms. Du kan også tage et åbent kursus i WCAG 2.1

 

Hvad er en skærmlæser?

Definition: En skærmlæser er et program, som hjælper blinde og svagtseende til at anvende en computers grænseflade. Ved hjælp af oplæsning kan skærmlæseren gøre det muligt for brugeren at løse de samme opgaver og nå de samme mål, som seende.

Vil du hurtigt i gang med at bruge en skærmlæser?

Webindhold er designet til at blive set

Selv om skærmlæsere er meget effektive værktøjer, så er de afhængige af kvaliteten af det indhold de skal forholde sig til.

En almindelig webbrowser er designet til at præsentere websider efter en nærmere bestemt, visuel logik, især bestemt af reglerne i webstedets CSS-ark.

En normalt seende bruger kan ved hjælp af synssansen få en mængde informationer, alene ud fra siden visuelle hierarki, altså den måde, indholdet præsenteres på med farve, form, størrelse og placering på siden.

Du kan for eksempel nemt se, at definitionen på en skærmlæser står øverst på siden og er markeret med fed. Du kan nemt genkende det næste element som en mellemrubrik, fordi du kan se forskellen i tekstens størrelse.

Skærmlæsere er afhængige af indholdets opmærkning

Skærmlæsere kan ikke formidle, hvad der er op og ned, højre og venstre. Skærmlæsere er lineære og kan ikke tolke andet end HTML-kodens struktur og tekst. Og ud fra det, skal landets cirka 50.000 blinde altså kunne orientere sig på nettet.

Hvis ikke elementerne på siden er mærket korrekt op, så det for eksempel er tydeligt, hvad der er navigation, overskrifter eller indhold, så kan skærmlæseren ikke formidle det korrekt til brugeren. Og så har vi balladen.

Kursus: Lær om webtilgængelighed og WCAG 2.1

I gang med NVDA: En guide for seende

Her er en guide til, hvordan du som seende hurtigt kommer i gang med at bruge skærmlæseren NVDA, så den fungerer bedst muligt for dig, der skal arbejde med webtilgængelighed.

Udgivet i anledning af Global Accessibility Awareness Day

Er du i tvivl om, hvad en skærmlæser er for en størrelse, så anbefaler jeg at læse min korte artikel: “Hvad er en skærmlæser?” først.

NVDA (Non-visual Desktop Access) er en populær skærmlæser til Windows. Ikke alene er den gratis, men har også den fordel, at du kan downloade og installere NVDA på en USB-stick, hvis du for eksempel ikke har lov til at installere programmer på din arbejdscomputer.

Skærmlæsere er effektive og omfattende stykker software. At komme i gang med at bruge dem kan godt være overvældende og til tider frustrerende.

Her er mine bedste tips og tricks til NVDA, og mine egne foretrukne indstillinger. Det er på ingen måde en komplet guide, men forhåbentlig, kan de sænke barrieren lidt.

Indholdsfortegnelse

Hent et genvejsark

NVDA er proppet med genveje til alle funktioner. Fremragende, for som tastaturafhængig bruger er det ikke en mulighed at navigere ved hjælp af en mus.

Mens du tester for tilgængelighed bør du kun anvende musen som en nødløsning, hvis du ikke kan bruge genveje til at komme gennem indholdet.

Desværre, er det svært at huske alle tastekombinationerne, så et genvejsark er løsningen.

Deque Systems (udtales: ”DQ Systems”) har lavet ”Quick Reference Guide: NVDA for Windows Keyboard Commands”.

Arket dækker vist alle genveje og er mere end værd at hente ned og laminere, så det altid ligger klar.

Jeg anbefaler, at du lærer dig en enkelt genvej eller to, hver gang du åbner NVDA.
Til indhold

Skift NVDA-funktionstasten til Caps Lock

NVDA startvindue. Brug Caps Lock som NVDA-tast er valgt
Så snart, du starter NVDA kan du vælge at bruge Caps Lock-tasten som den specielle NVDA-funktionstast

Mange funktioner i NVDA skal tilgås som tastekombinationer, præcis som du kender det fra Windows. Men fordi programmet ligger som et lag ovenpå Windows, så vil der hurtigt komme konflikter mellem NVDA-genveje og andre genveje. Derfor, benytter man en særlig tast til NVDA-kommandoer.

Som standard er Insert-tasten den særlige NVDA-tast. Det er for så vidt et godt valg, men upraktisk, fordi tasten ofte sidder isoleret fra det øvrige tastatur.

Tasten bruges sjældent til noget, så det tager længere tid at finde den på tastaturet, selv for rutinerede brugere.

Mange vælger derfor at skifte NVDA-tasten til Caps Lock, som alligevel ikke har nogen funktion, så længe du er i Gennemsynstilstand, hvor du læser og bladrer i indhold.

Den hurtigste måde at skifte NVDA-tasten til Caps Lock er fra åbningsdialogen, når programmet starter. Det er første flueben på listen.

Tip: En alternativ måde er at gå i Opsætning -> Indstillinger -> Tastatur -> “Vælg NVDA Funktionstaster” og så vælge Caps Lock derfra.
Tip: Du starter NVDA med Ctrl+Alt+N
Til indhold

Lær at bruge NVDA-tast + F7

Elementlisten er åbnet
Dialogvinduet Elementliste giver dig adgang til hurtigt at kunne navigere frem til den del af siden, som du har brug for.

En af de ting, som gør skærmlæsere så stærke, er deres evne til hurtigt at give brugeren et overblik over, hvad en given side består af.

Nok en af de vigtigste genveje i NVDA er den, der åbner dialogvinduet Elementliste, som giver dig direkte adgang til alle overskrifter, links, formularfelter, knapper og landmærker, som NVDA kan registrere på siden.

Brug NVDA-tast + F7. Du kan navigere i indholdet med Tabulator-tasten og piletasterne.
Til indhold

Stands automatisk oplæsning

Dialogvinduet NVDA-indstillinger er åbnet
NVDA starter automatisk oplæsning af siden, når den er læst ind. Det kan du forhindre ved at gå i opsætningen.

Når NVDA er installeret med standardindstillingerne, så begynder oplæsning af siden automatisk. Det er ikke altid, at du har lyst til det.

Gå i Opsætning -> Indstillinger -> Gennemsynstilstand og slå fluebenet fra ud for ”Automatisk Sig Alt efter indlæsning af side”, så starter oplæsningen først når du selv er klar.

Få NVDA til at tie stille: NVDA-tast + S

Især i begyndelsen, kan det være meget frustrerende, at NVDA bare bliver ved med at tale, mens du forsøger at koncentrere dig om, hvor skærmlæseren mon nu er henne på siden.

NVDA-tast + S stopper talestrømmen, indtil du slår den til igen.

Skærmlæseren er stadig aktiv, men uden lyd. Slå Talevisning til, så kan du arbejde videre med den.

Tip: Du kan huske denne genvej ved at tænke: S = ”Shut up!”

Har du brug for at standse oplæsningen helt, så brug Ctrl-tasten. Oplæsningen fortsætter, næste gang du foretager dig noget på siden.
Til indhold

Læs siden automatisk op: NVDA + Pil Ned

Ofte vil jeg gerne opleve, hvordan skærmlæseren tolker siden som helhed, inden jeg går i detaljer med indholdet. På den måde, er det lettere at identificere svage områder. Så jeg starter gerne med at få hele siden læst op.

NVDA + Pil Ned starter oplæsning. Hvis du lige har stoppet oplæsningen med Ctrl så fortsætter oplæsningen fra der, hvor du stoppede.

Tip: Hvis du finder den første overskrift med ‘H’-tasten og bruger NVDA + Pil Ned, starter oplæsningen fra første H1 (hvis den findes).

Tip: Brug Mellemrum til at stoppe oplæsningen, der hvor du er nået til.

Tip: Brug Ctrl + Pil ned for at læse et enkelt afsnit ad gangen.

Tip: Numerisk + starter oplæsningen fra toppen af siden. Godt at vide, hvis du mister overblikket!
Til indhold

Brug Talevisning og følg bedre med

Talevisning dialogvindue er åbnet og viser tekst fra en webside
Du mister hurtigt overblikket, når du bruger NVDA i starten. Talevisning kan hjælpe dig til bedre at forstå, hvordan skærmlæseren tolker det, du ser på.

Det kan være svært at orientere sig i indhold, hvor skærmlæserens logik er væsentlig forskellig fra den visuelle. Talevisning er en tekstet 1:1-version af det, som skærmlæseren læser op, og kan være en stor hjælp til at forstå, hvor vi er henne i teksten, især når det går hurtigt.

NVDA-menu -> Værktøjer -> Talevisning

Tip: Du kan zoome ind på teksten i Talevisningsvinduet med Ctrl + rullehjul på musen.
Til indhold

Få overblikket: Installer en udvidelse

Talevisning er fremragende, men dialogvinduet fylder meget på skærmen og er ikke altid nok til at forstå, hvor skærmlæseren er henne i teksten på et givent tidspunkt, især ikke når den kører med høj hastighed.

Heldigvis, findes der en række udvidelser, som kan hjælpe.

I NVDA-menuen gå til Værktøjer -> “Administrer tilføjelsesprogrammer…” Herfra kan du åbne NVDAs side med udvidelser og downloade Focus Highlight.

Focus Highlight sætter farvede kanter om de forskellige elementer på siden, når de bliver aktive eller læses op. Forvent ikke en æstetisk flot oplevelse, men det er i det mindste effektivt.

Du kan selv downloade udvidelsen her.

Tip: Vil du være fri for rammerne igen, kan du let deaktivere udvidelsen igen samme sted, som du installerede den.
Til indhold

Lær om webtilgængelighed
Firmakursus: Lær om webtilgængelighed og WCAG 2.1 Afholdes hos jer og tilpasses jeres behov. Priser fra 15.400,- eks moms. Du kan også tage et åbent kursus i WCAG 2.1

Hvor mange i Danmark har en funktionsnedsættelse?

Udgivet i anledning af Global Accessibility Awareness Day 2018

I Danmark fører vi ikke registre over personer med funktionsnedsættelser, så tallene her stammer fra undersøgelser og interesseorganisationer.

  • Flere end 2/3 over 18 år bruger synshjælpemidler,
  • 700.000 har gigt,
  • 600.000 har tinnitus,
  • 400.000 har læsevanskeligheder,
  • 320.000 har diabetes
  • 300.000+ er erkendte ordblinde,
  • 250.000 har et bevægelseshandicap,
  • 120.000 har hjerneskade,
  • 80.000+ har demens,
  • 58.000 har autisme,
  • 55.000 har epilepsi,
  • 50.000 er synshandicappede,
  • 25.000 er blinde,
  • 4.000 er døve.

Listen repræsenterer jo bare et meget lille udsnit af alle de forskellige typer funktionsnedsættelser, som i princippet kan ramme alle og enhver.

Du kan bruge den internationale tilgængelighedsdag, i dag den 17. maj 2018, på at reflektere over, hvad de forskellige typer funktionsnedsættelser betyder i forhold til at anvende digitalt indhold. (Tip: De har allesammen indflydelse!)

Vil I gerne i gang med at gøre jeres indhold tilgængeligt for så mange som muligt, så start med min omfattende side med ressourcer og værktøjer om tilgængelighed.

Vil du vide, hvorfor jeg bruger begrebet ‘funktionsnedsættelse’ og ikke ‘handicap’? Så læs min artikel om handicaps og funktionsnedsættelser: “Hvad er et handicap?”.

Lær tilgængelighed på nettet
Netvenlig laver kurser og workshops om digital tilgængelighed for alle, der arbejder med indhold til nettet. Læs om jeres muligheder, eller kontakt mig på telefon 40 93 21 98 / lmsoren@netvenlig.dk

Tilgængelighed på nettet: De bedste ressourcer at komme i gang på

Webtilgængelighed er et stort emne at tage hul på. Men er I et offentlig websted så er det nu, I skal komme i gang. 23. september 2018 vedtager Folketinget den nye tilgængelighedslov. Fra 23. september 2019, skal alt nyt webindhold overholde loven.

Her er min liste over de bedste ressourcer og værktøjer til at komme op i hastighed med. Står I foran et større projekt, er det måske en ide at kontakte mig og høre om mulighederne for jeres eget tilgængelighedskursus eller workshop, frem for at lære det på den hårde måde.

WCAG-standarden og støttedokumenter

Værktøjer til bedre tilgængelighed

The A11y project
Et brugerdrevet community, der har fokus på tilgængelighed. Masser af “How to”-artikler og muligheder for praktisk læring.

Web Accessibility Initiative (WAI)
WAI er et W3C-projekt og der er virkelig, virkelig mange ressourcer på sitet. Faktisk vil jeg sige, det er en lille smule overvældende at finde rundt i. Men du kan for eksempel prøve om Easy Checks er noget for jer. Eller måske der det store WCAG-EM Report Tool?

Microsoft: Inclusive Design
Omfattende ressource med håndbog, aktiviteter til workshops og videoer (synstolkede – WCAG 1.2.5), produceret med henblik på at skabe empati blandt designere, projektfolk og udviklere. Absolut anbefalet! Grafikken til denne artikel er taget fra dette værktøj.

IBM Accessibility Handbook
Håndbogen gennemgår på 32 sider principperne for tilgængelighed i IBMs produkter.

Principperne spiller godt sammen med WCAG 2.0.

Indeholder forskellige designaktiviteter, som har til formål at hjælpe designere og udviklere forstå, hvad det vil sige at være ramt af et handicap.

Contrast Ratio: Easily Calculate Color Contrast Ratio
Hurtig og overskuelig side at beregne kontrastforhold mellem to farver.

Colour Contrast Analyser
Godt værktøj til at analysere tekstfarver og -størrelser for tilgængelighedsproblemer.

Programmet kan vise, hvordan websider fremstår for farveblinde og svagtseende.

Kan afvikles på computer og fra en USB-stick. Gratis og kan downloades til Windows og Mac.

Color Safe: Accessible Web Color Combinations
Især god til tekstfarver på hvid baggrund. Giver en palette med farver, der opfylder WCAG AA og AAA.

NVDA Screen Reader
Skærmlæser til blinde og svagtseende. Gratis og fungerer fint, men som meget andet software har den ikke dansk tale som standard. Installer den på en maskine eller en brugerkonto, du ikke skal bruge, da den overtager alle funktioner, også i styresystemet.

Chris Pedericks Web Developer:
Med denne udvidelse kan du slå stylesheets fra, skjule billeder, analysere alt-tekster og meget, meget mere. Et virkelig godt værktøj i kassen!

WAVE Evaluation Tool: Dette tilgængelighedsplugin er udviklet af WebAIM, en førende non-profit-organisation, der også står bag WCAG Checklist, som du kan downloade længere oppe.

Artikler om tilgængelighed

SI Digital: Designing for Colour Blindness
Hurtige tips til at sikre, at indholdet kan ses af farveblinde

Jon Yablonski: Design Principles for Reducing Cognitive Load
Alle har prøvet at være kognitivt belastet. Det er ikke rart. Og endnu mindre, hvis det er en permanent tilstand. Læs om, hvordan man undgår at stresse sine læsere.

GOV.UK: How to create content that works well with screen readers
Sådan fungerer en skærmlæser, og gode råd om at skrive til blinde og svagtseende.

Lars Michael Sørensen: Hvad er et handicap?
Handicapbegrebet forklaret. En artikel fra Netvenlig.

Lars Michael Sørensen: Tilgængelighed – principper og retningslinjer
En oversigt over WCAG 2.0 og de vigtigste principper for hver retningslinje. Del den med dine kolleger og gør dem klogere på, hvad tilgængelighed er.

Lars Michael Sørensen: Hvor mange i Danmark har en funktionsnedsættelse?
Liste. Flere end 2/3 af alle over 18 år bruger synshjælpemidler som læsebriller, kontaktlinser eller forstørrelsesglas. Hver 10. dansker har Tinnitus.

Blogs og nyhedsbreve

GOV.UK Accessibility Blog
Det engelske svar på Digitaliseringsstyrelsen. Deres blogs om User Experience og tilgængelighed er absolut værd at følge!

Ability.net
Britisk interesseorganisation, med formål at gøre det lettere for handicappede og ældre at bruge nettet på arbejdet og i hjemmet. Udgiver artikler af ganske høj kvalitet.

Bøger om tilgængelighed

Jeg linker ofte til Amazon.co.uk, fordi det er nemt. I flere tilfælde vil Saxo.com nemt kunne matche prisen, så se dig for, før du køber. Og nej, jeg får ikke avance for at linke 🙂

Jeff Johnson: Designing User Interfaces for an Aging Population
Min personlige favoritbog om tilgængelighed. Fordi bogen sigter mod at gøre indhold lettere for ældre mennesker, kommer den automatisk til at inkludere mange flere, uden at fokusere specielt meget på andet end de ‘naturlige’ funktionsnedsættelser som rammer de fleste, fra de passerer 55+.

Kel Smith: Digital Outcasts
“Those of us without disabilities forget that everyone has the desire to celebrate their humanity: the thrill of competitive sport, a creative pursuit involving music or art, or simply having the means to tell another person: ”I’m fine, and I hope you are too.” Citatet fra bogen her, gik rent ind, da jeg læste det og var med til, at jeg besluttede mig for at blive rigtig god til det der tilgængelighed!

Sarah Horton, Whitney Quesenbery: A Web for Everyone
Omfattende og velskrevet bog. Tager delvist udgangspunkt i et antal modelbrugere (personas) med funktionsnedsættelser. Er tydeligvis skrevet med WCAG 2.0 i tankerne, men refererer ikke som sådan til standarden før i appendix’et. Kan læses hurtigt, hvis du allerede er fortrolig med usability og user experience. Bogen har sin egen podcast

Laura Kalbag: Accessibility for Everyone
Har du gået på mit kursus i tilgængelighed, har du nok allerede have læst bogen. En kort og hurtigt læst introduktion til tilgængelighed. Er nem at læse flere gange og god at have i nærheden. Vil især være god at dele med kolleger og chefer, som har brug for at komme hurtigt i gang med emnet, uden at få for mange detaljer i hovedet.

Geri Coady: Color Accessibility Workflows
En fin og hurtig introduktion til at arbejde med farver og tilgængelighed. Især for udviklere og grafiske designere, men også for andre som behøver vide noget om tilgængelighed generelt.

Lær tilgængelighed på nettet
Netvenlig laver kurser og workshops om digital tilgængelighed for alle, der arbejder med indhold til nettet. Læs om jeres muligheder, eller kontakt mig på telefon 40 93 21 98 / lmsoren@netvenlig.dk

Mobile websider: Danske sider er blandt de langsommeste

Resume: Danske mobilsider ligger i bund, når det gælder indlæsningstider. Det er ikke godt, i en tid hvor tålmodigheden er mindre end nogensinde. I kan selv gøre noget for at optimere hastigheden. (opdateret 4. december 2017 med en ekstra graf)

3 sekunder. Så lang tid har I til at få noget på skærmen, når kunder eller brugere går på mobilen for at løse en opgave. Går der længere tid, så forlader de jer med stor sandsynlighed igen.

Det er de barske tal. Hvordan er virkeligheden så? Nedslående.

Danske mobilsider har faktisk nogle af de langsommeste indlæsningstider i Europa, viser en analyse fra Google.

En oversigt over indlæsningtider i Europa. Danske mobilsider er i gennemsnit 9,5 sekunder om at læse ind.
Danmark har nogle af de langsommeste mobilsider i Europa, viser en analyse fra Google.

Langsomme mobilsider frastøder folk

Når indlæsningstiden overstiger 3 sekunder, er der 53 procent sandsynlighed for, at en bruger forlader sitet.

5 sekunder og sandsynligheden stiger til 90 procent. You do the math.

Konverteringsraten stiger, når indlæsningstiden holder sig under 3 sekunder. Derefter falder den drastisk i takt med, at folk opgiver at vente på, at sitet skal læse ind.
Indlæsningstiden har stor betydning for hvor længe besøgende holder ud at vente på jer. Allerede ved 3 sekunder er konverteringsraten for nedadgående. Det betyder færre kunder i butikken, færre læsere eller flere opkald til supportlinjen. Grafik: LukeW.com

Og læg så oven i, at vi i stigende grad anvender mobilen til at gå på nettet med. Både derhjemme, på arbejde og i forretningerne. Så har vi en seriøs udfordring.

Optimer jeres indhold til mobil, teknisk og indholdsmæssigt

Hvis indlæsningstiden skal ned kræver det sandsynligvis en tur til teknikeren, da en del af processen vil involvere optimering af html, css og javascript-filer.

En overhaling af htmlkoden er som regel aldrig forkert. Mange hjemmesider er bygget efter forældede metoder med unødig meget kode. Det skal væk.

Hvis teknikerne pludselig begynder at snakke om at “gzippe”, “minificere” og “sprites”, så skal I ikke gå i panik. Det betyder nok bare, at de ved, hvad de taler om

I vil også gerne høre dem tale om Progressive Web Apps (PWA) og Accelerated Mobile Pages (AMP), men få det lige forklaret ordentligt.

Komprimer billeder og illustrationer

Der er heldigvis rigtig meget, I selv kan gøre for at komme i gang.

Komprimer jeres billeder så meget, det er muligt. Der er forskel på at downloade 700 kb eller 140 kb, især på en langsom forbindelse.

Derfor må I at vælge det mest optimale billedformat.

Om det skal være JPEG, GIF eller PNG afhænger af flere ting. GIF bruger I udelukkende til grafik og lignende, men om et foto er mest optimalt i JPG eller PNG er ikke altid til at gennemskue på overfladen.

Content Delivery Network (CDN): Send indholdet fra en server tæt på

Hvis jeres website er hostet i udlandet, eller I henvender jer til et internationalt publikum, så få et Content Delivery Network – CDN.

Et CDN kopierer webindhold ud til flere webservere, spredt over hele internettet. Når en webside kaldes, får brugeren altid den version, som er tættest på, hvor man er. Det vil nedsætte indlæsningstiden væsentligt, især hvis I har indhold, som fylder meget.

Der findes masser af udbydere og prisen er som regel ganske rimelig.

Bruger I WordPress, er det oplagt at undersøge WordPress.com’s gratis CDN, som man forbinder til gennem Jetpack.

Brug html fremfor andre teknologier

Nettet er hypertekst. Det fungerer mest effektivt når indholdet er i html. Undgå så vidt det overhovedet er muligt at lægge jeres indhold ud som PDF.

PDF er dårligt på så mange måder, men især på mobil, fordi et PDF-dokument som regel er optimeret til print og ikke til små skærme.

Så lad være med at falde for fristelsen, brug html.

Skriv til nettet – og til små skærme

Optimer jeres indhold til modtagerne. Har I mange mobile brugere, så skal I naturligvis skrive, så det kan læses på små skærme. Overhold de grundlæggende regler for godt netindhold: Skriv kort, skriv skanbart og undgå unødigheder.

Jeg kan lære jer at skrive til nettet.

Test din egen mobilhastighed

Google har et fint værktøj til at undersøge jeres indlæsningshastighed.

Du indtaster din webadresse og får en grafik som nedenstående. Men er du som de fleste, når pilen altså op i det røde område.

Netvenlig.dk kan læses ind på 3 sekunder
Indlæsningstiden for Netvenlig.dk er 3 sekunder. Det er væsentligt lavere end andre sider i it- og teleindustrien og resten af Danmark. Artikler på Netvenlig.dk indlæses via Google AMP-projekt og kan ses næsten øjeblikkeligt, når de søges i Google.

Webdesign: Anvendeligt slår pænt

Skal vi vælge mellem et webdesign, der er “let at finde rundt i” eller “smukt”, så er valget let.

En undersøgelse fra CRM-tjenesten Hubspot viser, at 3 ud af 4 adspurgte foretrækker nem adgang til det, de kommer efter. Kun 10 procent prioriterer “et smukt udtryk” og lidt færre vil hellere have “en topmoderne, interaktiv oplevelse”.

Tre ud af fire forbrugere vil hellere have et webdesign, der er let at finde rundt i, end et lækkert og moderne webdesign. Kilde: Hubspot
“Websitet skal gøre det let for mig at finde det, jeg leder efter” siger tre ud af fire forbrugere. Kun hver 5. vil hellere have et smukt og moderne webdesign.

Heldigvis, er det sjældent at vi står over for det valg, og forhåbentlig bliver det aldrig nødvendigt med et ‘enten eller’: Attraktivt webdesign er nemlig en vigtig faktor, når det gælder om at bedømme websitets troværdighed, og ikke mindst så gør attraktivt webdesign også noget godt for den måde vi opfatter brugervenligheden på. Smukt er nogle gange bedre.

Men tallene giver dog fin mening. Funktionalitet har altid slået glimmer på nettet. Også dengang, et godt webdesign inkluderede mindst 1 roterende logo og lignende.

Vi går ikke på nettet for at “opleve” og se på lækkert design eller nye måder at lave navigation på.

Vi går på nettet for at få noget gjort: Få svar på et spørgsmål, løse et problem, holde 5 minutters pause eller lære noget nyt.

At finde ud af hvordan et website hænger sammen, er noget af det, vi har mindst lyst til at bruge vores tid på.

Vi vil bare løse det vi kommer for, og bagefter vil vi gerne videre med vores liv.

Du har for eksempel fået opfyldt dit informationsbehov nu. Om lidt finder du på noget andet at lave.

Hvis I forsvandt i morgen, hvem ville så savne jer?

Her er lidt at tænke over:

60 procent af alt indhold der produceres har ingen tydelig værdi for modtagerne.

Problemet har været kendt i årevis. Alle mine kursister og studerende er blevet tudet ørerne fulde med det her. Men her ser vi så resultatet dokumenteret, sort rødt på hvidt.

Ingen ville bekymre sig over det, hvis tre fjerdedele af virksomhederne verden over, forsvandt i morgen. Vi savner virksomheder og organisationer, der er vedkommende og enagerende og vi savner især relevant indhold med høj kvalitet. Kilde: Havas Group.

Det er en af mange årsager til, at vi ikke læser særlig meget på nettet: Vi starter med en forventning om, at det her møde nok ikke kommer til at gå særlig godt, allerede inden vi har taget det første skridt. Derfor vil vi også gerne have det overstået hurtigt, så vi kan komme videre.

Forbrugere leder efter engagement og vedkommende indhold. Virksomheder og brands, som kan gøre en positiv forskel i vores liv. Og hvad får vi? Marketing og hype.

Ikke underligt, at de færreste ville savne jer, hvis I forsvandt i morgen.

Her er tre spørgsmål, I kan stille jer selv:

  • Hvor godt kender I egentlig jeres kunder/læsere/modtagere?
  • Hvor meget arbejdstid bruger I på at skabe indhold uden værdi?
  • Hvis I fik al den tid til overs, hvad ville I så bruge den til i stedet?

Undersøgelsen er foretaget af Havas Group blandt 300.000 mennesker i 33 lande.