AAU logo

Webtilgængelighed

Kort fortalt handler webtilgængelighedsloven om at offentlige websites og apps skal være tilgængelige for folk med diverse handicaps. Websites skal eksempelvis kunne læses af en skærmlæser. Da Aalborg Universitet er en offentlig uddannelsesinstitution, er alle websites og apps herunder omfattet af lovgivningen. 

Ikrafttrædelse  

Loven trådte i kraft 23. september 2018.  

  • Sites oprettet efter den 23. september 2018 skal overholde lovgivningen fra 23. september 2019 
  • Ældre sites (fra før september 2018), hvor der ikke er sket væsentlige ændringer, skal overholde lovgivningen fra d. 23. september 2020
  • Apps skal overholde lovgivningen fra 23. september 2021 

Intranet og Ekstranet

Indhold på ekstranet og intranet, som er offentliggjort inden den 23. september 2019, er først omfattet af lovens bestemmelser, når disse websteder undergår en væsentlig revision. Ved en væsentlig revision skal forstås eksisterende websteder, der nyudvikles eller undergår markante ændringer for hele webstedets design, interaktion, funktionalitet eller formål.

webredaktørernes rolle

Som webredaktør for et eller flere AAU sites er du indholdsansvarlig for sitet og skal dermed sørge for at dit/dine sites lever op til lovgivningen. Hvis du er i gang med at bygge et site, eller er ansvarlig for et eksisterende site, er det vigtigt, du gennemgår sitet med de listede punkter in mente og udbedrer eventuelle mangler. Ændringerne vil også have den positive sideeffekt at dit site bliver mere brugervenligt og søgemaskineoptimeret.

Vi har i nedenstående grupperet lovgivningen i seks områder for at gøre det let og overskueligt for dig. Har du spørgsmål bedes du skrive til support@its.aau.dk. Skriv "InfoGlue webtilgængelighed" i emnefeltet, så svarer vi dig hurtigst muligt.

  • +

    Layout

    Main colour vs. hover colour

    Ift. webtilgængelighed skal du sørge for at vælge en 'hover colour' der som minimum har en farvekontrast ratio på 4:5 ift. den valgte 'main colour'. Du skal også sørge for at den valgte main colour, har en høj nok kontrast til tekst farven i de farvede bokse. Du kan anvende værktøjes: http://contrast-finder.tanaguru.com til at tjekke om dit farvevalg lever op til reglerne. I systemet er foreground colour = 'hover colour' og background colour = 'main colour'.

    Til Info overholder den standard AAU blå og dertilhørende hover colour den påkrævede farvekontrast ratio.

    Main colour vs. Hvide bokse

    Når du vælger 'main colour' skal du også være opmærksom på at farvekontrasten mellen 'main colour' og hvid (#FFFFFF). Farvekontrasten skal også her være på 4:5, da main colour udover at give farven på bokse også giver farven på overskrifter i hvide bokse.

    Gå til guiden over mulige main- og hovercolur kombinationer der overholder den påkrævede farvekonstrast ratio.

    Baggrundsbillede vs. Hvide og farvede bokse, samt hvidt logo og headlinekomponent

    Du skal sørge for at baggrundsbilledet som minimum har en farvekonstrast ratio på 4:5 ift. sitets valgte 'main colour' altså farven på boksene, samt ift. det hvide logo og headline komponent øverst på sitet. Du kan anvende dette værktøj: http://contrast-finder.tanaguru.com til at tjekke, om dit farvevalg lever op til reglerne.

    På billeder med motiver anbefales det, at man kigger på den del af baggrundsbilledet, der er tættest på de farvede bokse på sitet samt logo og hvidt headline komponent. 

    Tekst på billeder

    Vælger du at have tekst på billeder, skal du ligeledes være opmærksom på, at der er farvekonstrast ratio på 4:5 ift. tekstfarven og billedetsbaggrundsfarve eller motiv. Derudover skal du også være opmærksom på mouse-over-tekst m.m.. Læs mere om dette under punktet med billeder.

    Tabeller

    Det frarådes at anvende tabeller på, da disse ikke er kompatible med en skærmlæser. Har du indhold i tabeller anbefaler vi at  du vælger et andet layout til indholdet i denne.

  • +

    Navigering

    Menu, knapper og links

    Vær konsistente ift. hvordan brugeren har mulighed for at navigere sig rundt på tværs af dit site. Navigationen skal være genkendelig for brugeren.

    Komponenter

    Vær konsistent ift. hvordan du anvender de forskellige komponenter på tværs af dit site. Anvendelsen af komponenterne skal være genkendelig for brugeren på tværs af sitet.

    knapper/ikoner

    Som nævnt under tekst og billeder, skal der være tekst på alle knapper og har I selv indsat knapper eller ikoner i form af billeder eller lignende på sitet, skal de minimum have en størrelse på 44*44 pixels, medmindre de er tilgængelig i tekst andet sted på sitet.

  • +

    Tekst

    Overskrifter

    Du skal sørge for at overskrifterne er gode og sigende, eksempelvis kunne det være "Samarbejde med Institut for Byggeri og Anlæg" fremfor "Samarbejde" eller "Samarbejde med instituttet". Undgå generiske overskrifter som eksempelvis "Flere informationer" eller "Godt at vide" - lav i stedet en overskrift, der konkret fortæller, hvad man kan få informationer om - eksempelvis "Sådan søger du om praktikplads i udlandet".

    overskrifter i Artiklens brødtekst

    Generelt er det en rigtig god idé at opdele artiklens brødtekst i relevante og sigende overskrifter og underoverskrifter. Indholdet fremstår dermed mere overskueligt, så brugeren nemmere kan orientere sig på dit site.

    Ift. søgeoptimering og webtilgængelighed er det vigtigt at anvende overskriftstyperne i naturlig rækkefølge, dette er et krav ift. webtilgængelighed og hjælper ift. søgeoptimering. Spring således ikke fra en H2 til H4, men brug dem i den rækkefølge, de kommer (H2, H3, osv).

    Sidens headline

    Sidens headline skal i modsætning til overskrifter i artikler rumme alt indhold på den givne side. Headline-komponenten er placeret over sidens øvrige komponenter og skal gøre det nemmere for brugeren at få overblik over, hvad siden indeholder. 

    Headline vs. overskrift i artikler 

    Vi anbefaler, at der kun benyttes en H1-overskrift per side. Headline-komponenten og title-feltet i artikler er begge H1-overskrifter, så hvis du har en headline-komponent på din side, bør du ikke benytte artiklens title-felt, medmindre artiklen komponentets style er compact, da overskriften således automatisk er H2-overskrift. Er artikel kompentets style derimod sat til medium eller full, brug i stedet en H2-overskrift i brødteksten i din artikel. Se nedenstående illustrationer::

    Du bør tilmed undgå "dobbeltoverskrifter" på dine sider - artiklens overskrift bør ikke være den samme som sidens headline.​

    Forkortelser

    Forkortelser skal være beskrevet første gang de anvendes eks. Det Humanistike faktultet (HUM).

    Link tekster

    Indsæt gerne links på dit website de steder, hvor det er relevant. Gode linktekster resulterer i bedre overblik og nemmere navigation.

    Navngivning

    Det er vigtigt, at dine links navngives med en sigende og beskrivende titel, så både brugere og søgemaskiner nemmere kan vurdere, hvad der gemmer sig bag linket. Linktekster som "Klik her", "Download", "Instituttet" eller "skema" er som oftest ikke gode linktekster. Det er langt bedre med tekster som "Institut for Byggeri og Anlæg" eller "Skema for Informatik 6. semester efterår 2013".

    Knapper

    I forlængelse heraf er det vigtgt, at alle knapper har linktekst på sig, eks. small buttons i artikler.

     

  • +

    Billeder

    Knapper og ikoner

    Har I selv indsat knapper eller ikoner i form af billeder eller lignende på sitet skal de minimum have en størrelse på 44*44 pixels, medmindre de er tilgængelige i tekst andet sted på sitet.

    Navngivning, responsive billeder og mouse over tekst

    Billeder skal have sigende navngivning ift. hvad billedet viser  

    Billeder skal være reponsive forstået således, at de tilpasser sig den skærmstørrelse brugeren anvender.
    Er billeder i full text uploaded før 15/08/2019 er de ikke automatisk responsiv, hvis de uploaded før skal man ind på billedet og fjerne 'style'. Derudover skal billeder også have insat alternativ tekst og advisory titel således de kan læses af skærmlæsere. Det er lettest at ordne alle 3 ting i samme rettelse (trin 10, 11 og 12 i nedenstående):

    NB: Advisory titel er kun nødvendigt at indsætte på billeder, der har betydning for forståelsen af en given tekst eller område den er relateret til. Har billeder kun et dekorativt formål behøves der ikke at blive tilføjet en advisory titel der beskriver billedets indhold

    1. Stå i fanebladet "Content"
    2. Find den artikel, hvori du vil indsætte et billede
    3. Placer markøren på det sted i din tekst, hvor du vil indsætte billedet
    4. Klik på ikonet "image" i værktøjslinjen, som vist herunder:  
       

       
    5. Et nyt vindue, "Image Properties", åbner. Klik på knappen "Browse Server"
    6. Et nyt vindue, "Choose file to use" åbner. Klik på knappen "Upload new file" i midten, nederst i vinduet
    7. Vinduet "Upload file" åbner. Klik på "Vælg fil / gennemse"
    8. Find og vælg et billede på din computer. Klik herefter på "Save and exit"
    9. Klik på billedet og vælg "Use marked"
    10. I feltet 'Alternative Text' giver du billedet en beskrivende titel. Det er vigtigt, at denne titel beskriver, hvad der ses på billedet:
       

    11. I feltet "Advisory Title" (under fanen "Advanced") skal du indsætte den samme beskrivende titel. "Advisory Title" popper op ved mouseover - det vil sige, at man kan se denne titel, når man holder musen henover billedet.*
       

       
    12. Fjern alt teksten i feltet "Style". Dette vil medføre at billedet beholder sit format, når browservinduet ændrer størrelse.*
    13. Klik på "OK". Billedet er nu indsat i teksten
    14. Klik på "Save" for at gemme det indsatte billede og husk at publicere ændringerne

    Tekst på billeder

    I forlængelse heraf er tekst på billeder er ikke hensigtsmæssig, men har man det, er førnævnte endnu mere vigtigt. 

    Featured image

    Ift. Feature image, husk også at indsætte alternativ text, samt adisory titel på disse (trin 8, 10 og 11 i nedenstående).

    1. Stå i fanebladet "Content"
    2. Klik på artiklen, hvori du vil indsætte et featured image
    3. Klik på "Upload file" i den vandrette menu øverst på siden, som vist nedenfor:

    1. Vinduet "Upload file" åbner. Klik på "Vælg fil" for at hente et billede fra din computer
    2. I rullemenuen under "state a key for this attachment if needed" vælger du "featured image":

    1. Klik herefter på "Save and exit" og klik nu på "Save".
    2. Oven for feltet "Title" er der et nyt faneblad, der hedder "FeaturedImage", som vist på billedet nedenfor. Tryk på fanebladet


       
    3. Der er nu tre felter. Den øverste "Featured Image URL" betyder, at du kan indsætte en hvilken som helst URL (vær opmærksom på, at URL'en skal indholde "http://www."). Når der trykkes på pågældende featured image i livevisningen, føres brugeren videre til den angivne URL

    4. Feltet "FeaturedImageAlt" er en alternativ tekst til featured image

    5. Feltet "AdvisoryTitle" er den tekst, der kommer frem, når musen føres over billedet

    6. Husk at trykke på "Save" og publicere dine ændringer

    7. Billedet er nu indsat i artiklen og kan ses under "Files". For at se hvordan det ser ud på sitet, skal du finde artiklen under fanebladet "Structure"

     

    Slideshow / GIF

    Det skal være muligt at stoppe et slideshow. Har du indsat en GIF på dit site med skiftende billeder, skal denne derfor udskiftes, da den ikke lever op til webtilgængelighedslovgivningen. Vi har på nuværende tidspunkt ikke et alternativ.

  • +

    Videoer og audio

    Video og audio, som er offentliggjort før 23. september 2020, er undtaget.

    Live video og audio er undtaget. Hvis disse medier efter live-fremstillingen og efter 23. september 2020 bliver bevaret på webstedet, skal de gøres tilgængelige.

    Undertekster

    Livevideoer skal ikke have undertekster (være tekstet), men der skal stå i beskrivelsen af videoen, at den er live. Uploades en livevideo senere som fast video på et site, skal den tekstes.

    Præoptagede videoer skal være tekstet. Er der i videoen relevante visuelle elementer, som har betydning for videoens tolkning, skal disse også indgå i teksten.  

    Går videoer automatisk igang, skal det være muligt for brugeren at stoppe dem inden for 3 sekunder.

    Audio

    Lydfiler skal findes i en tekstet version på sitet.

     

     

  • +

    PDF-filer

    En større opgave i forbindelse med webtilgængelighed er PDF-filer, idet PDF-filers elementer skal markeres som det de er, f.eks. overskrifter, billeder osv. Dette kræver dog, at der bliver indkøbt et program til at scanne worddokumenter for fejl, inden de konverteres til en PDF-fil. Dette er omfattende, da det rammer stort set alle afdelinger på AAU, hvorfor der skal tages en beslutning om dette på ledelsesniveau, ift. hvilken enhed på AAU, der skal betale for sådan et værktøj / licenser dertil. Så for nu kan I, ikke gøre noget ift. dette, men vær forberedt på. at der kommer en større opgave i forbindelse med opdatering af PDF-filer samt upload til websites, når værktøjet bliver indkøbt. 

    Ift. ikrafttrædelse forstår vi på lovgivningen, at dokumenter, som er uploadet før september 2018, er undtaget fra at skulle overholde lovgivningen, medmindre dokumenterne er nødvendige for aktive administrative processer. Ellers skal alt andet overholdes fra de fremsatte datoer listet under ikraftrædelse. 

  • +

    Sociale Medier

    Om lovgivningen også omfatter jeres brug af Sociale Medier såsom, Instagram, Facebook, Youtube m.m. er på nuværende tidspunkt en gråzone, da AAU ikke ejer platformen, men er afsender af indhold f.eks. i grupper, sider eller via profiler.

    Vi har kontaktet Digitaliseringsstyrelsen ift. at få en afklaring af dette og afventer, at de får undersøgt lovgivningen nærmere. Ønsker du at blive kontaktet direkte, når der kommer en afklaring vdr. dette, skriv da en mail til support@its.aau.dk og skriv i emnefeltet 'Infoglue webtilgængelighed'.

  • +

    Intranet og Ekstranet

    Indhold på ekstranet og intranet, som er offentliggjort inden den 23. september 2019, er først omfattet af lovens bestemmelser, når disse websteder undergår en væsentlig revision.

    Ved en væsentlig revision skal forstås eksisterende websteder, der nyudvikles eller undergår markante ændringer for hele webstedets design, interaktion, funktionalitet eller formål.