Semantisk bilde-HTML

NRK.no gir oss et godt eksempel på hvordan man ikke bør tolke et bilde med tilhørende bildetekst:

Først skal vi se på attributtene som er i bruk på img-elementet, for så å vurdere HTML-en.

alt, title, longdesc

I NRKs kode har title og alt fått helt lik verdi, «Den norske Oscar-statuetten (Foto: Montasje/NRK)». I tillegg sper de på med en longdesc som inneholder en lengre beskrivelse av bildet: «Kon-Tiki Museets arkiv har sørget for at denne følgeseddelen gir Thor Heyerdahl siste ord i saken».

Er dette riktig bruk av disse attributtene?

alt

Vi starter med det vanskeligste først - attributtet alt - som står for alternativ tekst. For innføring i riktig bruk av alt kan en selvfølgelig sette seg ned og lese HTML-spesifikasjonen og dets lange rekke med eksempler. Eller lese lange artikler hos tilgjengelighetseksperter. En lettere metode er å forholde seg til et par tester som gir en overordnet veiledning i de fleste tilfeller:

• «Telefon-testen» - hvordan ville du forklart bildet til noen via telefon?
• «Tekst-testen» - hvis du ikke fikk bruke bildet, hvilken tekst ville du brukt istedet?
• «Funksjon-testen» - hvordan ville man beskrevet funksjonen til bildet?
• «Kontekst-testen» - er bildets innhold allerede dekket av nærliggende tekst?

Teksten i alt er ment å gi en alternativ tekst istedet for bildet, og bare det – ikke gi ekstra informasjon som ikke ville blitt oppfattet ellers.

Tar vi NRKs eksempel, tilsier «Telefon-testen» at man ikke hadde sagt «Foto: Montasje/NRK» til noen over telefonen når man skulle beskrive bildet; «Tekst-testen» tilsier det samme. Bildet har ingen direkte funksjon i denne sammenhengen jfr. «Funksjon-testen». Til slutt tilsier «Kontekst-testen» at det er noe som kommuniseres i bildet som faktisk ikke dekkes av teksten, nemlig det som står skrevet på følgeseddelen i bildet.

Et eget bilde av samme følgeseddel med Thor Heyerdahls beskjed brukes helt til slutt i artikkelen der alt er satt til «Thor Heyerdahl får siste ordet» - men hva står det på seddelen?! Dersom man ikke kan se bildet av seddelen, skjønner man ikke selve hovedpoenget med artikkelen – at Heyerdahl ettertrykkelig skrev at filmen som vant Oscar-prisen er en norsk film.

Det finnes selvfølgelig ingen fasit på hva alt bør være på et hvert bilde, men her kunne man f.eks. brukt:

«Følgeseddelen til Oscar-statuetten på Kon-Tiki Museet inneholder følgende budskap fra Thor Heyerdahl: ‘Please make clear film is Norwegian’».

Til bildet i slutten av artikkelen gir sammenhengen nok informasjon til å kunne skjære dette ned til: «Please make clear film is Norwegian, Thor». Sistnevnte er akkurat det man ville erstattet bildet med for at det skal gi mening. Hadde denne teksten stått under bildet i form av en bildetekst, kunne man satt alt til å være tom.

Ja, det er faktisk semantisk riktig å gi alt en tom verdi dersom innholdet i bildet allerede dekkes av nærliggende tekst, bildet anses da kun som dekorativt.

title

NRK har gitt title samme verdi som alt, redundans som får den semantiske alarmen til å gå av. For hva er poenget med title egentlig? Jo, det er å gi veiledende tekst, omtrent ensbetydende med begrepet «tooltip». En kan også benytte title til å gi tilleggsinformasjon, også kjent som metadata, dersom man ønsker. Hovedpoenget er at title skal gi noe utover det som allerede står i nærliggende tekst og den alternative teksten.

«Foto: Montasje/NRK» fra eksempelet vårt er akkurat denne type informasjon, det kommuniserer informasjon om bildet som ikke er essensielt for forståelsen av innholdet, men gir supplerende data. Tilleggsinformasjon... som allerede står i bildeteksten under bildet. I dette tilfellet kan vi derfor bare fjerne title helt.

Et morsomt eksempel på hvordan title kan brukes er den humoristiske (og nerdete) tegneserien xkcd. Forfatteren pleier nemlig å legge ved en forlengelse av spøken i bildet gjennom title som dukker opp dersom man holder musepekeren over det. En metaspøk!

longdesc

De fleste har aldri hørt om dette attributtet og de få som har brukt det pleier å bruke det feil. Slurvingen med longdesc – både av webutviklere og nettleserprodusentene – har ført til at attributtet er kontroversielt foreslått fjernet helt fra HTML5 (som i utgangspunktet skal være bakoverkompatibelt...). NRK bekrefter regelen, dessverre!

longdesc står for «long description» og NRK har jo lagt inn en lengre beskrivelse av bildet i dette attributtet – men det er feil datatype! Man skal nemlig legge inn en lenke til en lengre beskrivelse, ikke en tekst. Verdien «Kon-Tiki Museets arkiv har sørget for at denne følgeseddelen gir Thor Heyerdahl siste ord i saken» for longdesc er dermed ikke engang gyldig XHTML.

NRKs utviklere har lagt inn denne teksten, til absolutt ingen nytte! Nettleserne skjønner det ikke, tilgjengelighetsprogramvare skjønner det ikke, og brukerne får det iallfall ikke med seg. Uff da.

Riktig bruk av longdesc vil f.eks. være å oppgi lenke til en nettside som gir en utfyllende forklaring på innholdet eller mer informasjon om bildet. Med HTML5 er dette revet vekk som mulighet, men heldigvis får man utført samme oppgave med schema.org-notasjon (som får bli tema i et senere blogginnlegg).

HTML5 til unnsetning

Med img-elementet og dets kompliserte attributter ut av veien kan vi fokusere på resten av HTML-en NRK bruker for å vise bildet og tilhørende bildetekst. Vi har en div som beholder, bilde-elementet, et tekstavsnitt og et address-element med info om hvem som har laget bildet.

Vent, en address? «Foto: Montasje/NRK» er da ikke adresseinformasjon? Nei, og det er heller ikke brukt riktig. En address gir nemlig kontaktinformasjon om dokumentet det ligger innenfor (ev. nærmeste article i HTML5). Hvordan skal man da gi informasjon om hvem bildet tilhører?

HTML5-spesifikasjonen anbefaler å bruke small, som brukes for «small print», typisk juridiske tekster. Hekter man på schema.org-notasjon kan man enkelt gi bots beskjed om slik rettighetsinformasjon ( men igjen, schema.org er et emne for seg selv).

Hvordan kan HTML5 hjelpe oss gjøre NRKs HTML mer semantisk?

figure og figcaption

HTML5 har gitt oss to nye elementer til å håndtere akkurat denne situasjonen, figure og figcaption, som skal brukes sammen. En figure er et innholdselement som gir mening for seg selv og kan rives ut av dokumentet uten å ødelegge tekstflyten. I vårt eksempel gjelder dette bildet øverst i artikkelen før brødteksten, men ikke bildet til slutt i artikkelen. Sistnevnte inngår direkte i flyten av brødteksten; fjernes den endres meningen av brødteksten, da man ikke får med seg hva det sto på følgeseddelen.

figcaption er bildeteksten til en figure, enkelt og greit.

La oss nå prøve å sette alt dette sammen til en HTML5-versjon av NRKs kode!

Forbilledlig! Man trenger ikke engang se bildet for å skjønne hva det er snakk om, den alternative teksten spiller på lag med bildeteksten. I et senere blogginnlegg kan vi krydre dette med schema.org-notasjon slik at også søkemotorrobotene faktisk skjønner hva alt dette betyr...

P.S. Heldigvis er NRKs utviklere antageligvis klar over at denne gamle koden ikke holder mål; på NRKbeta drøfter de responsiv bruk av HTML til bilder, inkludert bruk av figure. Hvordan kodes bilder innenfor ditt miljø, og har du noen tanker rundt hvordan man skal erstatte et bilde med få ord?