Universell utforming er nødvendig for noen og bra for alle. Du som jobber med NTNUs nettsider må derfor lage innholdet til sidene slik at alle brukere kan tilegne seg informasjonen på en grei måte og i henhold til lovkrav.

English version - Universal design of web content

Råd til hva du kan gjøre

UUtilsynets forslag for universell utforming på nettsider – bilder, farger, kontrast, dokumenter, titler, lenker, tabeller, video med mer.

Husk alltid å sjekke nye sider og redigeringer i mobilvisning.

Under finner du et supplement for krav vi bør være ekstra obs på.

Overskrifter

Alle overskrifter skal være gode og lett å lese og skanne på siden. Få gjerne med det viktigste nøkkelordet i overskriften.

Sett overskrifter med <h1>, <h2>, <h3>, <h4>i rekkefølge. Det gjør det enkelt for brukerne å navigere på siden, å hoppe i innholdet/skumlese gjennom siden. På NTNUs eksterne nettsider starter du alltid med <h1>. På wikisider på Innsida skriver du først en kort ingress, og starter deretter med <h2>.

Husk: Overskrifter er en svært viktig del av navigasjon på siden. Overskrifter er ikke et visuelt, grafisk element. Derfor må man ikke hoppe over overskriftsnivåer eller eksempelvis legge inn <h1> midt på siden for å få det «pent og tydelig».

Lenketekster

Slik skriver du gode lenketekster.

Skriv aldri kun «Les mer» el.l. som lenketekst. Skjermlesere for brukere uten syn/nedsatt syn lister opp lenker og leser lenketekster. En nettside med «Les mer»-lenketekster vil derfor gjøre det umulig for brukeren å vite hva lenkene dreier seg om.

Bilder, video, lyd

• Bare lyd og bare video (forhåndsinnspilt)
• Publisere bilder på NTNUs nettsted
• Publisere video og lyd på NTNUs nettsted
• Legge til video i Liferay

Fra 1. februar 2024 er det krav om synstolking av video. Det er flere måter å synstolke video på. Kravet om synstolkning har ikke tilbakevirkende kraft slik at videoer som ble innspilt og publisert før kravet ble innført, ikke er berørt av dette. Samtidig må vi bruke skjønn og ikke la gamle videoer uten synstolking ligge lenge på nettsider.

Tekstalternativ

Tekstalternativ skal tilbys for innhold som ikke er tekst.

Dette kan være bilder, grafikk, video, lydklipp. Tekstalternativet skal gi samme informasjon eller ivareta samme formål som det ikke-tekstlige innholdet, og det skal være plassert i nær tilknytning til det ikke-tekstlige innholdet.

Bilder

Alt-tekst (tekstalternativ) skal beskrive bildemotivet på en informativ måte. Eks.: To forskere viser fram robotteknologi.

Hvis bildet lenker til en side, skal alt-tekst beskrive formålet med lenken, altså hvor lenken går til. Eks.: Nettside med oversikt over studieprogrammer.

Hvis bildet kun er dekorasjon alt-tekstfeltet stå tomt. Psst, bruk helst ikke dekorative bilder, så langt råd er bør bilder gi merinformasjon.

Grafikk

Grafikk skal ha tekstalternativ med tilstrekkelig informasjon fra grafikken plassert ved siden av eller under grafikken.

Videoer

Videoer skal ha undertekst.

Lydklipp og podkaster

Lydklipp og podkaster skal transkriberes og teksten skal legges ved som fil eller tekst på siden.

Tabeller

Hvordan utforme tabeller.

Tabeller skal brukes til tabulære data, det vil si numerisk og/eller logisk sammenlignbar data som skal listes opp.

Ikke bruk tabeller til grafisk design.

Tabeller bør lages slik at data i tabellen leses fra venstre mot høyre.

• Marker tabellens overskrift med <caption> (i stedet for vanlig overskrift).
• Marker overskriftsceller i koden med <th> (ikke bruk <td>). Bruker kan da hoppe fra overskrift til overskrift i tabellen.

Dokumenter

Samme krav gjelder for nettsider og dokumenter som lenkes på nettsider.

• Universell utforming av dokumenter
• Universell utforming av PDF

Tips:

• Forhåndsdefinert stil letter arbeidet med å gi dokumentet universell utforming.
• Bruk norsk språkvalg i dokumentet for norsk tekst, engelsk språkvalg for engelsk tekst.
• Bruk rett overskriftsnivåer. God struktur gjør at brukeren kan navigere i dokumentet.
• Rett bruk av tabeller.
• Bilder, grafikk og illustrasjoner må ha tekstalternativ.
• God kontrast og rett bruk av farger i grafikk o.l. (fargeblinde har eksempelvis problemer med rødt-grønt).
• Lagre fil med rett formattering.
• Word, PowerPoint og Acrobat har innebygd tilgjengelighetskontroll som kan brukes for å sjekke dokumentet.

Sitater

Sitater skal være kodet. Koden legges automatisk til ved bruk av sitatfunksjonen i menyeditor. Merk teksten som skal stå som sitat og klikk på ikonet anførselstegn.

Ikke bruk anførselstegn ( " " « ») eller sitatstrek (tankestrek) etc. for å sitere.

Språkkode

Alle nettsider har overordnet språkkode norsk eller engelsk. Av og til er det behov for å ha med for eksempel en tittel, en setning, et kulepunkt på engelsk på den norske siden. Da skal setningen/avsnittet kodes som engelsk språk. Dermed vil brukere av skjermleser få lest opp avsnittet på engelsk.

Kodesnutten lang="en" brukes på norsk side og lang="no" brukes på engelsk side. Snuttene legges direkte på html-elementet, her noen eksempler for norske sider:

• Mellomtittel: <h3 lang="en">This is a heading</h3>
• Avsnitt: <p lang="en">This is some text.</p>
• Sitat: <blockquote lang="en">This is a quote.</blockquote>

Kode generelt

Kodestandarder og validering

Kode skal være riktig på nettsiden, i hver enkelt widget. Sjekk derfor alltid at koden blir korrekt når du oppretter nytt innhold eller redigerer.

Vær obs på at det ikke blir liggende overskriftskode der det skal være space eller overskriftskode inne i bildekoden.

Bruk Ctrl+Shift+-V for å lime inn tekst fra andre kilder og dokumenter. Dette er for å "rense" koden. Ikke bruk bare Ctrl+V, da kan koden bli feil.

NTNUs retningslinjer

NTNUs retningslinjer for universell utforming

Skal du kjøpe, utvikle eller jobbe med informasjons- og kommunikasjonsteknologi (IKT) ved NTNU, må du se til at produktet eller det du publiserer er universelt utformet. Alle skal kunne bruke løsningene, få informasjon og løse sine oppgaver.

Regelverk

WCAG = The Web Content Accessibility Guidelines – Retningslinjer for tilgjengelighet på nettsider.

• UUtilsynet: Tematisk inndeling av kravene i WCAG
• UUtilsynet: Kravene i WCAG med begrepsforklaringer og mer
• UUtilsynet: Løsningsforslag for kravene i WCAG

UUtilsynet håndhever forskrift om universell utforming av IKT-løsninger, EUs webdirektiv og WCAG-standarden.

Likestillings- og diskrimineringsloven