Spørsmål? Ring tlf 94 30 21 81
Lag websider med vår publiseringsløsning Autopublish
CMS basert på brukervennlighet, søkemotorvennlighet og tilgjengelighet
Spørsmål? Ring tlf 94 30 21 81
Det snakkes mye om tilgjengelighet for tiden. Myndighetene har bestemt at alle offentlige nettsteder skal være tilgjengelige for alle. Vi har derfor laget en oversikt over de viktigste retningslinjene for tilgjengelighet.
Hovedhensikten med å gjøre et nettsted tilgjengelig er at funksjonshemmede ikke skal miste tilgang på informasjon. Dette innebærer først og fremst at man skal utforme tekst- og lydrepresentasjoner av det visuelle for blinde og svaksynte, og visuelle representasjoner av lyd for døve og tunghørte.
Videre er tilgjengelighet viktig fordi:
1. Søkeroboter er "blinde" brukere som har stor nytte av at nettstedet er utformet for tilgjengelighet.
2. Personer uten funksjonshemminger kan være i situasjoner hvor de er forhindret fra å se eller høre, feks i bilen eller på biblioteket.
3. Mange nettsteder kan gjøres generelt mer tilgjengelige ved hjelp av bedre bruk av fonter, bilder og fargekontraster. De fleste av oss har vel opplevd at teksten på en side er ulesbar pga liten font, forstyrrende bakgrunnsbilder eller lav bakgrunnskontrast.
I det følgende gis en oversikt over de viktigste retningslinjene for tilgjengelighet.
Når du utformer en webside, sørg for at du kan svare "JA!" på følgende spørsmål::
1) Vil blinde og svaksynte kunne dra nytte av denne informasjonen? Kan all informasjon leses opp eller gjøres om til blindeskrift? 2) Vil døve og tunghørte kunne dra nytte av denne informasjonen? Er all lyd representert med tekstlige ekvivalenter?
Eksempler er bruk av tabeller for sidedesign, bruk av TH for fet tekst i en tabellcelle som ikke er en header-celle, eller ukorrekt bruk av overkskrifter for å endre tekststørrelser. All visuell markup bør spesifiseres i CSS. For å skille innhold og presentasjon bør CSS-en ligge i et eksternt stilark, og ikke som style-attributter.
Informasjonenn på siden må kunne presenteres i korrekt rekkefølge uten at stilarket benyttes.
Dersom farger benyttes til å formidle informasjon bør den samme informasjonen være tilgjengelig for fargeblinde.
Du kan sjekke hvordan nettstedet ditt fungerer for fargeblinde på nettstedet Vischeck.
Hvordan fungerer dette nettstedet (Autodog.no) for fargeblinde?
Nettstedet fungerer utmerket for alle tre formene fargeblindhet vi har testet for:
Mørk tekst på lys bakgrunn fungerer svært bra. Unngå å redusere kontrasten for mye. Unngå også lys tekst på mørk bakgrunn.
Bruk alltid en korrekt Doctype for websiden. Sørg for at siden validerer. Merk: Dette er ofte et problem i ulike publiseringsløsninger. Dersom en publiseringsløsning skal anskaffes, sørg for at den støtter bruk av innholdsmaler og at den produserer gyldig kode i forhold til den Doctype som benyttes.
Dersom det eksisterer tilgjengelige språk, benytt disse heller enn å benytte bilder. For eksempel kan MathML brukes til å presentere matematiske symboler. Unngå også å bruke bilder for å representere tekst.
Bruk stilark (CSS) til å formatere tekst og kontrollere utformingen på nettstedet. Dette innebærer at man ikke bør inkludere noen form for presentasjon i HTML-koden. Unngå også å bruke style-attributtet på html-elementer.
Eksempler på relative enheter er "em", "%" og nøkkelord for fontstørrelse (small, medium etc). I praksis fungerer prosent best for fonter, fordi den mest brukte nettleseren - Internet Explorer - forminsker teksten uforholdsmessig mye når em benyttes, og fordi nøkkelord for fontstørrelse gir lav grad av kontroll.
Definèr et språkattributt for alle sider, og for avsnitt som har et annet språk enn sidespråket.Eks: html lang="en", blockquote lang="no"
Alle sider skal ha en meningsfull og beskrivende sidetittel.
HTML-tabeller skal kun brukes til å presentere tabulære data, og ikke til utforming av en side.
Inkludèr et navn på hver tabell i CAPTION-elementet. Spesifiser utseendet til tabellen i stilarket. Merk at også plasseringen av CAPTION-elementet kan spesifiseres i stilarket.
Gi alltid en oppsummering av tabellinnholdet i tabellens summary-attributt.
Formatèr tabellheadere vha TH-elementet. Sørg for at tabellheadere repeteres når tabellene er lange.
Dersom teksten i en tabellheader-celle er lang, gi en forkortelse som det er hensiktsmessig at en lydoppleser kan lese opp for hver tilhørende celle i hver tabellrad. Forkortelsen brukes i tabellheader-cellen slik: abbr title="forkortelse".
Bruk Hx for alle overskrifter, og bruk disse korrekt i forhold til sidens underavsnitt.
Bruk HTML-lister i sammenhenger hvor det skal presenteres en liste. For eksempel er en navigasjonsmeny en liste med lenker, mens en oppskrift normalt består av en liste med ingredienser og en liste med handlinger. Ettersom det finnes et eget markup-element for avsnitt (paragraph), skal HTML-lister ikke benyttes for vanlige tekster (lister med avsnitt).
Formatèr sitater vha BLOCKQUOTE-elementet.
Vha title-attributtet på disse to elementene kan man gi informasjon om hva dette er et akronym for (akronymer er forbokstaver for flere ord), eller man kan gi informasjon om hva dette er en forkortelse for (etc er en forkortelse for et cetera). Merk at alle akronymer er forkortelser, men at ikke alle forkortelser er akronymer. Dette innebærer at du alltid kan bruke ABBR, men ikke alltid kan bruke ACRONYM. I noen situasjoner ønsker man også å gi en definisjon, og da er det semantisk korrekte å bruke DFN-elementet heller enn ABBR/ACRONYM.
Legg inn metainformasjon om hva som er hovedsiden. Dersom den aktuelle siden er del av en serie, legg inn metainformasjon om hvilke sider som er forrige og neste side i serien. Attributtene som benyttes er home, prev og next.
Lag et sidekart som gir en oversikt over innholdet på nettstedet. Dersom nettstedet er stort kan sidekartet gå over flere sider.
Dersom nettstedet ditt er stort ønsker du gjerne å tilby en intern søkemotor til brukerne. Både enkel og avansert søkefunksjonalitet bør da være tilgjengelig. La alltid enkelt søk være standard.
Dette er en teknikk hvor man plasserer den viktigste informasjonen tidlig i overskrifter, lenker, avsnitt og andre seksvenser. Fordelen er at det er lettere å scanne slike lister fordi nøkkelordene plasseres under hverandre. Her er et eksempel nødvendig:
Uten front loading:
Med front loading:
Sørg for at navigasjonen er konsistent, og benytt gjerne farger for å identifisere grupper av relaterte seksjoner.
Plasser de sentrale strukturelle elementene (hovedmeny, undermeny, bunntekst, hovedtekst overskrifter etc) på samme steder på hele nettstedet, slik at det blir enkelt for brukeren å danne seg et mentalt bilde av sidestrukturen. Sørg også for at farger og fonter brukes på en konsistent måte.
Lag en tilhørende label for alle GUI-elementer i et skjema. Knytt labelen til elementet ved hjelp av labelens for-attributt, og la verdien tilsvare elementets id.
FIELDSET og LEGEND skal benyttes for å gruppere og navngi relaterte elementer i et skjema. Disse to elementene skal brukes semantisk, og ikke for å oppnå bestemte visuelle effekter (ramme rundt elementene etc). Ønsket utseende på et skjema skal spesifiseres i stilarket.
Hovedinnholdet bør opptre før menyen i html-koden. Dersom dette av ulike grunner er problematisk, bruk en skiplink (se under).
Legg til en lenke tidlig i dokumentet som lar brukeren velge å hoppe over navigasjonen og gå direkte til hovedinnholdet.
Bruk farger på nettstedet som ikke skaper problemer for fargeblinde.
Bruk av JavaScript i lenker for å skape visuelle effekter gir ofte problemer og bør derfor unngås. Lag JavaScript-uavhengige sider. JavaScript er først et problem når man ikke har tenkt på hva som skjer når agenten ikke støtter dette språket. Dersom nettstedet bruker JavaScript må det alltid gis et alternativ for de som ikke støtter språket. Dette gjøres ved å legge den alternative funksjonaliteten i NOSCRIPT-elementet. Spesielt er dette viktig for nettsteder som bruker DHTML-menyer.
Sørg for at JavaScript kun ligger i eksterne filer, og at eneste koblingen fra HTML-dokumentet er en SCRIPT-tagg i HTML-headeren. Unngå å bruke JavaScript-event-handlere på HTML-elementer. Legg istedet funksjonalitet på de aktuelle elementene når siden lastes. Istedet for feks a title="Min lenke" onclick="go()", legg følgende kode i en ekstern fil:
window.onload = function(){ var lnk = document.getElementById("lnk"); lnk.onclick = go; lnk.onkeypress= go;}
function go(){ alert(event.srcElement.getAttribute("title"));}
Ikke alle lenker har en selvforklarende lenketekst. Title-attributtet for en lenke bør derfor benyttes aktivt for å gi optimal tilgjengelighet.
Unngå at hele setninger fungerer som lenketekst. Unngå også "Klikk her" som lenketekst. Velg ut 2-3 ord fra teksten som gir en god beskrivelse av dokumentet som er målet for lenken.
Ved hjelp av en meta-tagg er det mulig å spesifisere at siden automatisk skal oppdateres i nettleseren etter n sekunder. Dette bør unngås fordi det ikke er mulig for brukeren å slå av denne funksjonen i dagens nettesere. (META http-equiv="refresh" content="60 ).
Dersom en bruker skal videresendes til en ny side bør dette gjøres ved hjelp av korrekte HTTP-header-meldinger som sendes fra webserveren, og ikke ved hjelp av script eller meta-tagger.Følgende er ikke korrekt måte å videresende på: META http-equiv="refresh" content="5; nyside.html". Dersom siden er flyttet, send en HTTP 301-melding i headeren.
Det finnes standardiserte funksjoner knyttet til bestemte tastatur-knapper. Eksempelvis betyr:
accesskey="1" - Til hovedsidenaccesskey="2" - Hopp over menyenaccesskey="3" - Tilbakemelding (feks epostadresse eller skjema)
Bruk av accesskey-attributtet i skjemaer har liten hensikt fordi man enkelt kan navigere i skjemaet ved hjelp av tabultator-tasten (TAB). Utstrakt bruk av accesskey vil dessuten kunne komme i konflikt med annen programvare.
Ikke alle brukere har mus. Man bør derfor passe på at funksjoner for museklikk også gjelder for tilsvarende tastetrykk.
-"onmousedown" tilsvarer "onkeydown". -"onmouseup" tilsvarer "onkeyup" -"onclick" tilsvarer "onkeypress"
Dersom en lenke åpnes i et nytt vindu vil brukeren ikke kunne bruke nettleserens tilbakeknapp for å gå tilbake til den opprinnelige siden. Etter html-standarden benytter man dessuten en utgått funksjon om nye vinduer åpnes ved hjelp av en lenkes target-attributt.
Begrens bruken av fagtermer og fremmedord. Tilpass språket til nettstedets målgruppe.
Lag en beskrivende tekst på bilder ved hjelp av img-elementets alt-attributt (img alt="beskrivelse av bildet"). Dersom bildet er en lenke skal man istedet beskrive lenkens hensikt eller dokumentet det lenkes til. Når bildet har en viktig funksjon på siden bør man gi en mer spesifisert beskrivelse i longdesc-attributtet. Dersom bildet er en tekstrepresentasjon bør beskrivelsen være identisk med teksten. Hvis bildet representerer et punkt i en punktliste, bruk en stjerne *, et tomrom eller en bindestrek som alt-tekst. Dersom bildet benyttes for å lage tomrom, bruk et mellomrom (space). Ideelt sett bør tomrom lages ved hjelp av CSS og ikke ved hjelp av bilder.
Dersom det er lyd på en webside, gi en beskrivende tekst i lydfilens alt-attributt eller title-attrubutt. Dersom lyden spilles automatisk bør det også gis en hensiktsmessig tekstlig output. For større lydfiler kan det være til stor hjelp for døve dersom det finnes en tekst som gjengir hele innholdet i lydfilen.
Følg de samme retningslinjene som for tekstrepresentasjon av lyd. La teksten bli presentert på en synkronisert måte dersom teknologien tillater det.
Handlinger og scener i en video bør beskrives i synkronisert, tekstlig form.
Blinde og svaksynte kan ha stor nytte av at det er tilgjengelige lyd-versjoner av multimediapresentasjoner.
Dette nettstedet har per i dag ikke blitt utformet for optimal tilgjengelighet. Se gjerne om du kan finne egenskaper med siden du er på nå som bryter med retningslinjene.
Kilder:
"Dive Into Accessibility" av Mark Pilgrim
Anbefalte lenker:
Merk: Innholdet på denne siden kan ikke benyttes uten forfatterens samtykke. Ta kontakt for mer informasjon.
Trenger du hjelp til å øke tilgjengeligheten på ditt nettsted? Ta i så fall kontakt:
