5 HTML-tips for å øke tilgjengeligheten på nettstedet ditt
På Kuttisme.no skriver jeg idag litt om tilgjengelighet på nett - både frokost-seminaret jeg var på nå på mandag ( tilgjengelighet på web), og noen tanker jeg har rundt emnet. I forbindelse med det tenkte jeg her å komme med 5 enkle HTML-tips for å øke tilgjengeligheten på nettstedet ditt.
Bruk alt-attributtet når du setter inn bilder
Målet med teksten her er å gi brukere som ikke ser bildet samme informasjon som de som ser bildet. Dette kan være for eksempel “Profilbilde av Christian Johansen”. Det kan IKKE være “Kampanje! Kjøp 3 betal for 2!” med det unntak at bildet rommer akkurat den teksten og ikke noe mer (i så tilfelle skulle det svært sannsynlig ha vært satt på plass ved hjelp av CSS, med en tilsvarende tekst i HTML-dokumentet). Alt-attributtet er ikke til for å fore søkemotorene med nøkkelord. En mer høynivå-beskrivelse kan gis gjennom title-attributtet om nødvendig.
Dersom du sliter med å finne en god beskrivelse, eller beskrivelsen er noe i tråd med “Rød kant” så burde du revurdere om bildet hører hjemme i dokumentet eller stilarket.
Er det ikke mulig å gi en alt-tekst, så gi heller en tom tekst (alt=”") enn å utelate attributtet, siden noen skjermlesere i det siste tilfellet vil lese filnavnet i steden, noe som kan skape stor forvirring/irritasjon.
Bit deg merke i at alt-teksten er kontekstavhengig. Hvordan du utformer teksten, og hva som er en god nok beskrivelse kommer veldig an på konteksten som bildet opptrer i. Hvis bildet over vises på en side hvor det er mange profilbilder, og siden har dette som tema er kanskje navnet nok. Hvis bildet vises i en sammenheng der det er mange bilder av forskjellig type - maleri, fotografi, blyanttegninger osv - er det kanskje mer relevant å ha “Fotografi” som alt-tekst dersom bildet er sidens eneste fotografi. Andre eksempler kan være “Fotografi av en manns profil” eller “Fotografi av Christian Johansen”.
Mer om alt-tekst hos WebAIM (med lytteeksempel fra skjermleser)
La en overskrift være en overskrift
Overskrifter representeres i HTML som <h1>, <h2>, <h3>, <h4>, <h5> og <h6>, der <h1> er den viktigste/øverste (i forhold til nivåer) overskriften. Hver side skal ha en og ikke mer enn en <h1> som er en treffende tittel for hele siden. Den kan gjerne samsvare med både URLen til siden og <title> for å gi en effekt i søkemotorene også.
Tipset over får man ofte av søkmotorekspertene. Det er lett å lage maler til publiseringssystemene som ivaretar <h1> (kommer selvfølgelig an på publiseringsløsningen…) Det viktige med overskrifter er at vi også følger opp god overskriftsbruk nedover i dokumentet, og da særlig i det innholdet som redaktørene produserer. Overskriftene tagges opp etter en hierarkisk modell. Alle overskrifter som er underoverskrifter i forhold til sidetittelen er <h2>. Undertemaer til disse igjen er <h3> osv. Følger man opp et slikt system kan man for eksempel benytte autmatiserte tjenester for å ekstrahere en innholdsfortegnelse av sidene.
Ved å bruke overskrifter riktig så byr du også alle brukerne dine på den samme luksusen som du gir til de brukerne som får teksten i fet og stor font. Dette er ikke bare blinde, men for eksempel mobiltelefoner og andre små enheter som ofte surfer uten all stilingen.
Gi brukerne en “hopp til innhold”-lenke
Dette er et veldig enkelt tiltak som kan gjøre livet til mange av brukerne dine betraktelig lettere, spesielt dersom du har mye navigasjon i toppen av dokumentet. En “hopp til innhold”-lenke er enkelt og greit en lenke som peker til et anker et annet sted på siden din. Der innholdet ditt begynner (typisk den i <div>en som ligger rundt innholdsbiten) setter du en ID med for eksempel “content” (selve navnet er helt valgfritt, jeg foretrekker beskrivende navn på engelsk). Deretter lager du en lenke helt på toppen av dokumentet ditt, rett etter der <body> starter for eksempel, som peker til denne IDen.
Eksempel:
...
<body>
<p id="skip_link"><a href="#content">Hopp til innhold</a></p>
...Deretter kan du, dersom du ønsker å skjule den for vanlige seende brukere, skjule den med CSS. Tenk over dette, ofte kan det være like greit å inkorporere lenken i designet siden brukere som ser dokumentet stilet opp også kan ha nytte av den. Mer om disse lenkene på Dive Into Accessibility ( http://diveintoaccessibility.org/day_11_skipping_over_navigation_links.html)
Med en “hopp til”-lenke gir du brukerne dine rask tilgang til både hovednavigasjonen og innholdet.
Bruk label-taggen i forms, og assosier den med riktig input-felt
Når du lager forms, bruk <label> for å lage labler. Assosier den så med riktig input/textarea/select ved å sette IDen på input/select/textarea inn i <label>ens for-attributt. Dette kan klarest vises gjennom et eksempel.
<label for="email">Din e-post:</label>
<input type="text" name="email" id="email" />På denne måten vil de fleste nettlesere av nyere dato sørge for at for eksempel et klikk på labelen vil gi fokus til tekstfeltet. Tilsvarende vil det være lettere for de som ikke har “vanlige” nettlesere å få en forklaring på hva de fyller inn.
Syretest HTML-dokumentet før du skriver CSS
Sist, men ikke minst; når du lager nettsider, pass alltid på å begynne med HTML. Skriv HTML etter innholdet slik det dikteres av wireframes eller design, og tenk på hvordan du best kan strukturere innholdet ditt i forhold til sluttresultatet. FØR du legger CSS på dokumentet tar du en grundig kikk på dokumentet i sin nakne form i en nettleser. Hvis du nå ser logiske komplikasjoner eller det er vanskelig å følge flyten i dokumentet har du ikke gjort en god nok jobb.
Det er viktig å se til at de forskjellige elementene opptrer i en naturlig rekkefølge (selvom de skal flyttes med CSS senere) og at det ikke er for langt fra toppen til relevant innhold. Ingen liker å scrolle forbi sidevis med lenker før de får se innholdet de kom for å se. Dette er spesielt relevant dersom du ikke har hopp-lenken. Man må også tenke på de som leser sidene uten stilsett - det koster ikke mye å tilrettelegge for disse.
Dette var 5 kjappe tips til en mer tilgjengelig hverdag. Det er mange andre tilsvarende enkle grep man kan ta, men som jeg tidligere har nevnt så krever flere av dem at man har redaktørene med på leken, og at publiseringssystemene har støtte for å gjøre de riktige tingene.
Hvilke er dine beste tilgjengelighetstriks?
Dette innlegget er desverre ekstra utsatt for spam, og inntil jeg har tid til å sette opp noe spambeskyttelse har jeg sett meg nødt til å stenge kommentarer for dette innlegget. Dine innspill er velkommen på de fleste andre innlegg!
Kommentarer er stengt