Hopp til hovedinnhold
UUKontroll logo UUKontroll

Merk fremmedspråk i koden (WCAG 3.1.2)

Innhold på et annet språk enn resten av siden må markeres med riktig lang-attributt i koden.

wcag niva-aa koding

De fleste norske nettsider har innslag av andre språk. Engelske fagtermer, latinske uttrykk, svenske sitater eller samisk innhold dukker opp i alt fra blogginnlegg til offentlige dokumenter. Når disse fremmedspråklige delene ikke er markert i koden, får skjermlesere og andre hjelpeverktøy problemer. De prøver å lese alt med samme stemme og uttale - og resultatet blir uforståelig for brukeren.

Hva sier kravet?

WCAG 3.1.2 Språk på deler av innhold krever at språket angis programmatisk for tekst som er skrevet på et annet språk enn sidens hovedspråk. Kravet er klassifisert som nivå AA, og er viktig for at hjelpeteknologi skal kunne lese innhold korrekt.

Teknisk sett handler det om å bruke lang-attributtet på det HTML-elementet som omslutter den fremmedspråklige teksten. Mens WCAG 3.1.1 krever at du angir hovedspråket på <html>-elementet (for eksempel lang="nb" for bokmål), krever 3.1.2 at du i tillegg markerer enkeltord, setninger eller avsnitt som avviker fra dette hovedspråket.

Kravet gjelder ikke for egennavn, tekniske fagtermer som har blitt en del av det norske språket (som «software» eller «design»), eller ord og uttrykk som er blitt så vanlige at de oppfattes som norske av de fleste.

Hvorfor er dette viktig?

Skjermlesere bytter stemme og uttale

Når en skjermleser møter et lang-attributt, bytter den automatisk til riktig stemme og uttaleregler for det angitte språket. På en norsk side som har lang="nb" på <html>, vil skjermleseren bruke en norsk stemme. Hvis det så dukker opp et avsnitt med lang="en", bytter den til en engelsk stemme for akkurat den delen - og bytter tilbake etterpå.

Uten denne markeringen vil skjermleseren forsøke å uttale engelsk tekst med norske uttaleregler. Tenk deg at den skal lese uttrykket «responsive design» med norsk uttale: det blir noe i retning av «respons-ive deh-sign». For en blind bruker som prøver å forstå et faglig innhold, er dette frustrerende og forvirrende.

Automatisk oversettelse fungerer bedre

Nettlesere som Chrome tilbyr automatisk oversettelse av nettsider. Når fremmedspråklige deler er korrekt markert, kan oversettelsesverktøyet behandle dem riktig - enten ved å la dem stå uendret (fordi brukeren forstår det språket) eller ved å oversette akkurat de delene. Uten markering kan oversettelsesverktøyet komme til å forsøke å «oversette» tekst som allerede er på riktig språk.

Orddeling og typografi

CSS-egenskaper som hyphens: auto bruker språkinformasjon for å dele ord riktig ved linjeskift. Et engelsk ord som «accessibility» deles etter andre regler enn et norsk ord som «tilgjengelighet». Uten korrekt lang-attributt kan nettleseren dele ordene feil, noe som gjør teksten vanskeligere å lese.

Slik oppfyller du kravet

Marker enkeltord og uttrykk

For korte fraser eller enkeltord på et annet språk, bruk <span> med lang-attributt:

<p>Vi har implementert et 
  <span lang="en">single sign-on</span>-system 
  for alle våre tjenester.</p>

<p>Konseptet 
  <span lang="en">"progressive enhancement"</span> 
  betyr at siden fungerer for alle, men gir ekstra 
  funksjonalitet til moderne nettlesere.</p>

Marker lengre avsnitt

For sitater, blokker eller hele avsnitt på et annet språk, bruk lang direkte på det relevante blokkelementet:

<blockquote lang="en">
  <p>"The power of the Web is in its universality. 
  Access by everyone regardless of disability is 
  an essential aspect."</p>
  <cite>Tim Berners-Lee</cite>
</blockquote>

<p lang="se">Buot olbmot leat riegádan friddjan 
ja dássedis árvvus ja vuoigatvuođain.</p>

Vanlige språkkoder

Her er de mest aktuelle kodene for norske nettsider:

Kode Språk
nb Norsk bokmål
nn Norsk nynorsk
en Engelsk
sv Svensk
da Dansk
se Nordsamisk
de Tysk
fr Fransk

Bruk alltid ISO 639-1-koder (to bokstaver). For mer spesifikke varianter kan du bruke utvidede koder som en-US for amerikansk engelsk eller en-GB for britisk engelsk, men den korte formen er som oftest tilstrekkelig.

Flerspråklige skjemaer og knapper

Hvis du har skjemaelementer eller knapper med tekst på et annet språk, gjelder det samme prinsippet:

<button lang="en">Sign in with Google</button>

<label for="query">
  <span lang="en">Search</span>
</label>
<input type="search" id="query" 
  placeholder="Søk i innholdet...">

Sjekk med utviklerverktøy

Du kan enkelt sjekke om språkmarkeringer er på plass ved å inspisere elementer i nettleserens utviklerverktøy (F12). Se etter lang-attributtet på elementer som inneholder fremmedspråklig tekst. Automatiserte testverktøy kan fange opp manglende lang på <html>, men er ofte dårligere til å oppdage manglende lang på enkeltdeler. Her trengs det manuell gjennomgang.

Vanlige feil

  • All fremmedspråklig tekst er umerket - dette er den vanligste feilen, spesielt på sider med mange engelske fagtermer spredd utover teksten.
  • Hele avsnitt på engelsk uten markering - for eksempel produktbeskrivelser eller sitater som er kopiert inn uten lang-attributt.
  • Feil språkkode - bruk av ugyldig kode som «eng» i stedet for «en», eller forveksling mellom se (nordsamisk) og sv (svensk).
  • Overmarkering - det er ikke nødvendig å markere engelske ord som har blitt alminnelige lånord i norsk, som «mail», «design» eller «app». Bruk skjønn - hvis ordet uttales «på norsk» av de fleste, trenger det ikke markering.
  • Manglende markering i dynamisk innhold - innhold som lastes inn via JavaScript (for eksempel chat-meldinger, brukerkommentarer eller API-svar) glemmes ofte.

Å markere språk på deler av innholdet er en relativt enkel oppgave, men den krever at utviklere og innholdsprodusenter tenker på det når de legger inn tekst. Det lønner seg å ha det som en del av rutinene for innholdsproduksjon, slik at fremmedspråklig tekst alltid blir korrekt merket.