Tilgængelighed
Som offentlig instittution er DTU omfattet af Lov om webtilgængelighed. Det indebærer, at alle DTU’s websteder og apps skal være tilgængelige for alle – også borgere med handicap.
Webtilgængelighed handler om de principper og teknikker, man skal følge, når man udvikler websteder, mobilapplikationer og andre tekniske løsninger, så de kan bruges af alle, herunder brugere med handicap.
Hvad kan du gøre som redaktør
En del af principperne omhandler CMS’et (Sitecore), og den måde det er kodet på. Den del er AKM og AIT i fællesskab ansvarlig for, og der bliver løbende arbejdet på at forbedre tilgængeligheden.
Der er dog også en række ting, du som redaktør kan gøre for at sikre, at din hjemmeside lever op til lovens krav. De vigtigste ting, du skal være opmærksom på, er:
- Alternativ tekst på billeder
- Tilstrækkelig kontrast mellem forgrund og baggrund
- Forklarende tekst på links
- Forklarende tekst på knapper
- Pdf’er og word-dokumenter
- Struktur og overskrifter
- Tabeller
Alternativ tekst på billeder
Webtilgængelighedsloven kræver, at indhold som har betydning, men som ikke er tekst, skal have et tekstalternativ til blinde og svagtseende. Kravet omfatter bl.a. billeder og grafik. Bruger du fx et billede af en graf, der indeholder information, som ikke er angivet i teksten, er det vigtigt med en alternativ beskrivelse, der med ord fortæller, hvad grafen viser. Den alternative tekst eller ’alt-teksten’ bliver læst op af en skærmlæser.
Sådan gør du: Den alternative tekst/’Alt-teksten’ udfyldes Sitecore, i Mediebiblioteket. Gør det til en vane, at udfylde ’Alt’-feltet, hver gang du lægger et nyt billede i Mediebiblioteket.
Få tips til den alternative tekst
Tilstrækkelig kontrast mellem forgrund og baggrund
Sørg for et tilstrækkelig kontrastforhold mellem forgrund og baggrund, så tekster, knapper eller anden grafik står tydeligt frem i forhold til baggrunden. Det gælder fx, hvis du bruger tekst på en anden baggrundsfarve end hvid eller tekst oven på billeder, eller hvis du indsætter knapper eller anden grafik i en farvet boks.
Ifølge webtilgængelighedsloven skal den visuelle præsentation af tekst og billeder have følgende kontrastforhold
- Almindelig størrelse skrift: mindst 4,5:1
- Stor størrelse skrift (18 punkt eller 14 punkt fed skrift) mindst 3:1.
(Kontrastforhold kan spænde fra 1-21 – jo højere tal, jo større kontrast.)
Sådan gør du: Der findes forskellige online værktøjer, hvor du kan teste kontrastforholdet ved at indtaste farvekoder for hhv. forgrunds- og baggrundsfarve. Fx: https://webaim.org/resources/contrastchecker/
NB: Der pågår et større udviklingsarbejde på Sitecore-platformen, som skal sikre, at de indbyggede standardfarver og farvekombinationer i systemet lever op til kravene for tilgængelighed.
Forklarende tekst på links
Alle links skal have en forklarende tekst, der beskriver linkets formål, altså det resultat man opnår ved at aktivere linket.
Sådan gør du: Skriv en linktekst, som tydeligt forklarer, hvad der sker, når man klikker på det. Fx: ’Læs mere om, hvordan du søger SPS på DTU’. Sørg for at bruge nøgleord i linkteksten, og undgå links som "Her" og "Læs mere". Sørg også for, at lave præcise links, som kan adskilles fra hinanden, hvis der er flere links på samme side.
Forklarende tekst på knapper
Knapper på hjemmesiden skal have en forklarende tekst, som fortæller skærmlæseren, hvad knappens funktion er. Farve og form må ikke være den eneste indikator på at der er tale om knap.
Sådan gør du: Hvis du lægger en knap på din hjemmeside i form at et billede med et link på, så sørg for at give knappen/billedet en forklarende alt-tekst, ligesom på andre billeder. (se ’Alternativ tekst på billeder’.)
Hvis du bruger de indbyggede knapper i Sitecore, så husk at sætte en ’Alt-tekst’ på knappens link.
Når du opretter links i Sitecores moduler, skal du også huske, enten at give linket en forklarende linktekst eller skrive en ’Alt-tekst’ på linket.
I et Hero-modul sætter du en alt-tekst på sådan her:
- Vælg Indsæt link i feltet ’Call to action’.
- Indtast en forklarende tekst i feltet ’Alternativ tekst’.
På øvrige moduler sætter du alt-tekst på links sådan her:
- Åbn modulet i redigerings-mode og klik på ’Indsæt link’ i feltet ’Link på banner’ (i slidermoduler hedder feltet ’Slidelink’
- Indtast en forklarende tekst i feltet ’Alternativ tekst’ og vælg ’Indsæt’
Pdf’er og word-dokumenter
Det er et krav, at synshandicappede skal kunne tilgå et dokument på en hjemmeside (fx pdf eller worddokument) og få læst det op med en skærmlæser. Kravet omfatter dog kun dokumenter, der er publiceret på hjemmesiden efter den 23. september 2018 og dokumenter publiceret før denne dato, hvis de er ”nødvendige for aktive administrative processer”.
Sådan gør du: Undgå, hvis det er muligt, at bruge pdf’er og word-filer, og skriv i stedet informationen direkte ind på din hjemmeside.
Alternativt skal du sørge for, at de dokumenter, du lægger på din hjemmeside, er bygget op og formateret, så de overholder de gældende standarder.
Læs mere om tilgængelige dokumenter
Struktur og overskrifter
Hvis en skærmlæser skal kunne læse en meningsfuld tekst op for brugeren, skal den have hjælp til at finde rundt på siden og til at læse sidens elementer op i den rigtige rækkefølge med pauser på relevante steder. Det hjælper en logisk struktur og en korrekt markering af overskrifter med til.
Sådan gør du: Del din tekst ind i afsnit, og brug de indbyggede overskriftsformater til at markere overskrifter og underoverskrifter: H2, H3 osv. Det giver indholdet på din side en struktur, som letter skærmlæserens arbejde med at læse siden op.
Du finder overskriftsformaterne i tekst-editoren i Sitecore:
Ved at bruge de indbyggede overskriftsformater hjælper du også søgemaskiner med at finde relevant indhold på din side. Den effekt opnår du ikke, hvis du i stedet selv vælger skriftstørrelse og fx fed tekst.
Tabeller
Tabeller er vanskeligere at gøre tilgængelige for en skærmlæser end tekst. Derfor bør tabeller så vidt muligt undgås.
Hvis du bruger tabeller, så sørg for, at de er så simple som muligt, dvs. med få rækker og kolonner. Sørg også for at bruge Sitecores indbyggede overskriftsformater til overskrifter både i rækker og i kolonner.