Ontwikkelaar

Afbeeldingen die informatie overdragen noemen we informatieve afbeeldingen. Informatieve afbeeldingen zijn belangrijk voor het begrijpen van een tekst of pagina. Deze afbeeldingen vertellen iets over de inhoud of maken een pagina duidelijker.

Deze afbeeldingen moeten een tekstalternatief hebben dat nauwkeurig beschrijft of uitlegt wat er op de afbeelding te zien is. Beschrijf dit in een korte, duidelijke zin. Vermijd daarmee te algemene termen en probeer specifiek te zijn over wat de afbeelding weergeeft. Deze tekst moet beschrijvend genoeg zijn, zodat het de afbeelding kan vervangen als je die niet kunt zien.

Een tekstalternatief voor een <​​img​>-element wordt gegeven met het alt-attribuut.

In de code ziet dat er zo uit:

Complexe afbeeldingen, zoals infographics, grafieken of diagrammen voegen veel informatie toe aan een tekst of pagina. Ze vertellen iets over de inhoud of maken een pagina duidelijker.

Deze afbeeldingen moeten een tekstalternatief hebben. Omdat er vaak erg veel informatie op de afbeelding staat, is het moeilijk om alles beknopt te beschrijven in een kort tekstalternatief. In dat geval is het nuttig om daarnaast ook een meer uitgebreide beschrijving te geven in de omringende tekst. Een handige manier om de visuele informatie ook in tekst aan te bieden, is bijvoorbeeld door de informatie helemaal uit te schrijven. Als het gaat om een diagram of grafiek, gebruik dan bijvoorbeeld een datatabel.

In de code ziet dat er zo uit:

Je kunt ook een link bij de afbeelding plaatsen die verwijst naar een andere pagina met een uitgebreide beschrijving van de informatie op de afbeelding. Zet deze link direct voor of direct na de afbeelding.

In de gevallen dat niet tekst maar alleen een afbeelding als link wordt gebruikt, spreken we over functionele afbeeldingen. Deze afbeeldingen moeten een tekstalternatief hebben.

Dit zijn bijvoorbeeld:

Voor afbeeldingen die ook als link worden gebruikt, is het belangrijk dat het tekstalternatief het doel van de link beschrijft. Het tekstalternatief is ook direct de linktekst. Zonder tekstalternatief heeft de link geen linktekst.

Een tekstalternatief voor een <​​​img​​>-element wordt gegeven met het alt-attribuut.

In de code ziet dat er zo uit: 

Afbeeldingen die puur decoratief zijn voegen geen informatie toe. Ze maken een pagina aantrekkelijker, maar zijn niet echt nodig om een tekst of pagina te begrijpen. Mensen die gebruik maken van schermlezers, hebben eigenlijk niets aan deze plaatjes. Zorg daarom dat decoratieve afbeeldingen worden verborgen voor schermlezers.

Decoratieve afbeeldingen kunnen het best met CSS worden geplaatst.

In de code ziet dat er zo uit: 

Als het niet mogelijk is om een decoratieve afbeelding met CSS te plaatsen, dan moet het alt-attribuut in het <​img​>-element worden leeg gelaten. Het alt-attribuut moet wel aanwezig zijn maar het heeft dan geen tekst.

In de code ziet dat er zo uit: 

Afbeeldingen waar (voornamelijk) tekst op staat, en waar die tekst bedoeld is om informatie over te dragen, noemen we afbeeldingen van tekst. Voor deze afbeeldingen geldt: Als dezelfde weergave ook met alleen echte tekst kan worden gemaakt, gebruik dan geen afbeelding van tekst maar gebruik echte tekst.

Afbeeldingen van tekst zijn voor sommige mensen niet handig omdat een schermlezer de tekst niet standaard voorleest. Ook kunnen de stijleigenschappen van tekst in een afbeelding niet worden aangepast naar eigen wensen of behoeften van iemand, zoals het vergroten van de lettergrootte of het veranderen van de kleur.

Zorg dat alle bewegende, scrollende of knipperende content dat automatisch start én langer dan 5 seconden duurt kan worden gepauzeerd, gestopt of worden uitgezet. Onder bewegende, scrollende of knipperende content vallen onder andere carrousels, animaties op de pagina, bewegende advertenties, enz. Bezoekers met een cognitieve beperking kunnen er door worden afgeleid. Ook voor bezoekers die gebruik maken van een schermlezer kan dit storend zijn.

Deze regels gelden ook alle automatisch verversende content, maar hiervoor geldt ook de frequentie van updates mag worden aangepast.

Flitsende of knipperende content kan gemakkelijk de aandacht trekken. Dit kan bijvoorbeeld voorkomen in animaties of mediabestanden. Deze content kan een epileptische aanval veroorzaken bij mensen die daar gevoelig voor zijn.

Flitsende content mag daarom niet meer dan 3 keer per seconde flitsen, tenzij het flitsende gedeelte maar een klein oppervlak van het scherm inneemt.

Acties die in worden geactiveerd door een apparaat te kantelen of te schudden zijn niet goed toegankelijk voor sommige bezoekers. Bezoekers met een motorische beperking kunnen deze acties bijvoorbeeld onbedoeld uitvoeren. Er zijn ook bezoekers die dit niet, of niet goed, kunnen bedienen omdat het apparaat op een vaste plek is bevestigd aan bijvoorbeeld een rolstoel. Ook het maken van gebaren naar een camera die deze de bewegingen kan interpreteren valt onder bewegingsactivering.

Laat bezoekers daarom de bewegingsactivering uitschakelen of zorg dat acties die kunnen worden geactiveerd met bewegingsactivering ook te activeren zijn met een alternatieve bediening.

Sommige functionaliteit op een website is alleen te uit te voeren met een moeilijk gebaar. Bijvoorbeeld gebaren waarbij de bezoeker meerdere vingers moet gebruiken (meerpuntsgebaren) of gebaren waarbij de bezoeker een vinger (of de aanwijzer) in een bepaald pad moet bewegen (pad gebaseerde gebaren). Bezoekers kunnen, om verschillende redenen, soms niet in staat zijn om moeilijke gebaren te maken met hun vingers of met een aanwijzer. Bijvoorbeeld door een motorische beperking.

Zorg dat functionaliteit die met gebaren wordt geactiveerd, ook met een klik, dubbelklik of klikken-en-vasthouden van een muis kan worden geactiveerd. Dit kan bijvoorbeeld met een eenvoudige bediening toe te voegen.

Op sommige websites kunnen bezoekers gebruik maken van sneltoetsen. Met sneltoetsen kunnen bezoekers gemakkelijk functies uitvoeren of navigeren naar een pagina. Dit werkt goed voor veel bezoekers die gebruik maken van het toetsenbord maar kunnen conflicteren sommige hulptechnologieën. Hierdoor kunnen sneltoetsen onbedoeld worden geactiveerd. Dit geldt bijvoorbeeld voor bezoekers die gebruik maken van software voor spraakherkenning.

Zorg daarom dat sneltoetsen die bestaan uit één karakter kunnen worden aangepast, uitgeschakeld of alleen geactiveerd kunnen worden als het onderdeel de toetsenbordfocus heeft.

Als bezoekers met het toetsenbord naar een onderdeel op de pagina kunnen navigeren, maar er niet meer vandaan kunnen, dan is dit een toetsenbordval. Om uit een toetsenbordval te raken is de enige manier vaak om de muis (of ander aanwijsapparaat) te gebruiken of om de pagina helemaal te herladen. Dit is geen optie voor bezoekers die geen gebruik kunnen maken van de muis. Dit komt soms voor als er plugins worden gebruikt.

Zorg dat met het toetsenbord helemaal over de pagina kan worden genavigeerd.

Alle functies op een website moeten te bereiken en gebruiken zijn met alleen het toetsenbord. Sommige bezoekers kunnen geen muis gebruiken door bijvoorbeeld een visuele of motorische beperking. Als alle functionaliteit met het toetsenbord kan worden bediend, dan werkt deze ook met een groot aantal hulptechnologieën. Zorg daarom dat onderdelen zoals links, knoppen, navigatie, invoervelden, selectievakjes, keuzerondjes, keuzelijsten en alle andere interactieve functies de toetsenbordfocus kunnen krijgen en kunnen worden gebruikt.

Standaard HTML-elementen voor links, knoppen en formulierelementen op de website zijn goed toegankelijk met het toetsenbord.

De standaard toetsenbordnavigatie is als volgt:

Bezoekers die gebruik maken van het toetsenbord gebruiken de TAB-toets om door een website te navigeren. De TAB-toets verplaatst de toetsenbordfocus naar het volgende focuseerbare onderdeel.

Bij formulieren hoort een foutcontrole ingebouwd te zijn. De foutcontrole controleert automatisch of een verplicht onderdeel leeg is gelaten of dat een invoerveld verkeerd is ingevuld. Als er een fout is gevonden, dan moet de foutmelding in tekst worden weergegeven. Deze tekst kan worden aangevuld met andere visuele aanwijzingen, zoals een andere kleur of een icoon.

Benoem in de tekst van de foutmelding de naam van het veld dat verkeerd is ingevuld en benoem precies wat de fout is. Schrijf dus niet:

Maar schrijf:

In de code kan ook worden aangegeven welk veld verkeerd is ingevuld. Gebruik hiervoor het attribuut aria-invalid. Daarnaast hoort de foutmelding in de code aan het bijbehorende invoerveld te worden gekoppeld. Dit voorkomt verwarring bij bezoekers die gebruik maken van hulptechnologieën. Een foutmelding kan op een aantal manieren worden gekoppeld zoals met een aria-describedby-attribuut.

In de code ziet dat er zo uit:

Zorg voor labels bij invoervelden

Labels zijn het belangrijkste element voor een toegankelijk formulier. Zorg voor labels bij alle invoervelden of ander formulierelementen zoals selectievakjes, keuzerondjes en keuzelijsten. Een duidelijk label beschrijft precies wat er in het veld ingevuld moet worden, is zichtbaar voor alle bezoekers en staat dichtbij het invoerveld.

Het label moet in de code worden gekoppeld aan het invoerveld. Zo maak je het invoerveld ook toegankelijk voor bezoekers die gebruik maken van hulptechnologieën. Het label is de naam van het invoerveld. Een label vergroot ook het klikbare gebied waarmee een invoerveld kan worden geselecteerd. Dit is handig voor bijvoorbeeld bezoekers met een motorische beperking.

Koppel labels in de code aan een invoerveld

Labels worden geplaatst met het <​label​>-element. Het koppelen van een <​label​>-element aan een formulierelement gebeurt met een for/id-koppeling. Geef hiervoor het <​label​>-element een for-attribuut en het bijbehorende formulierelement een id-attribuut met dezelfde waarde.

In de code ziet dat er zo uit:

Er zijn ook manieren om de labels visueel te verbergen. Vraag je dan wel goed af waarom je dat zou willen doen. Het invoerveld verliest dan het grotere klikbare gebied en het wordt misschien minder duidelijk voor bezoekers. Als het label toch visueel wordt verborgen, zorg er dan er wel voor dat er een label beschikbaar is voor hulptechnologieën. Gebruik hiervoor het attribuut aria-label, aria-labelledby of een title-attribuut. Deze zijn niet zichtbaar.

In de code ziet dat er zo uit:

Groepeer meerdere secties van gerelateerde invoervelden

Als een formulier meerdere secties van gerelateerde invoervelden heeft dan wordt een <​fieldset​>-element gebruikt om deze te groeperen. Geef het <​fieldset​>-element een label door een <​legend​>-element in het <​fieldset​>-element te plaatsen. Hulptechnologieën gebruiken het <​legend​>-element alsof het een onderdeel is van het label van de elementen in het <​fieldset​>-element.

Het <​fieldset​>-element is vooral relevant voor het groeperen selectierondjes en keuzevakjes maar kan ook worden gebruikt om andere invoervelden te groeperen.

In de code ziet dat er zo uit:

Zorg voor instructies bij invoervelden

Instructies geven een extra hint voor de invoer in het invoerveld. De instructies in een formulier moeten aangeven of er verplichte velden zijn en eventueel of er een verplicht invoerformaat is.

Geef aan dat een invoerveld verplicht is

Het aangeven van een verplicht invoerveld kan in tekst of bijvoorbeeld met een asteriks (*). Zorg dat deze aanduiding in het <​label​>-element is geplaatst.

In de code ziet dat er zo uit:

Als de instructies niet duidelijk per invoerveld worden benoemd dan hoort voorafgaand aan het eerste invoerveld in tekst worden aangegeven op welke manier de verplichte velden zijn aangeduid.

In de code ziet dat er zo uit:

Markeer verplichte velden ook in de code. Gebruik hiervoor bij voorkeur het aria-required-attribuut.

Geef het aan als er een verplicht invoerformaat is verplicht is

Ook bij verplichte invoerformaten, zoals een postcode of een e-mailadres die moet worden ingevuld, moeten blijken uit de instructies wat de eisen zijn aan de invoer. Dit kan direct in het <​label​>-element.

In de code ziet dat er zo uit:

Maar dit kan ook via het attribuut aria-describedby.

In de code ziet dat er zo uit:

Veranderingen in de inhoud van een pagina worden aangegeven met een statusbericht. Een statusbericht voegt nieuwe informatie toe aan de pagina. Het geeft de bezoeker bijvoorbeeld informatie over de resultaten van een actie, over de voortgang van een laadtijd of een waarschuwing over eventuele fouten in een formulier. Deze informatie is belangrijk voor iedereen. Deze informatie moet dus ook beschikbaar worden gemaakt voor een bezoeker die gebruik maakt van hulptechnologieën.

Hulptechnologie synchroniseert continu met het DOM en merkt de wijziging dus wel op, maar de bezoeker die hiervan gebruik maakt wordt er nietover geïnformeerd. Met het attribuut aria-live wordt een blok een live region. Deze informatie moeten in de code worden opgemaakt zodat ze de aandacht krijgen van hulptechnologieën op een manier die de bezoeker niet onnodig onderbreekt.

Standaard zal hulptechnologie alleen de gewijzigde tekst voorlezen. Als toch het hele blok moet worden voorlezen, voeg dan aria-atomic=”true” toe.

Als er door het insturen van een formulier een onomkeerbare actie wordt uitgevoerd die grote gevolgen kan hebben, dan moet er voor worden gezorgd dat bezoekers de inzending kunnen annuleren, controleren of bevestigen.

Bezoekers met een functiebeperking lopen vaak meer risico om fouten te maken. Mensen met dyslexie kunnen letters en cijfers omdraaien en mensen met motorische stoornissen kunnen per ongeluk toetsen aanslaan. Eigenlijk hebben alle bezoekers profijt van de mogelijkheid om ernstige fouten te voorkomen.

Bij een formulier waarmee een wettelijke of financiële transactie wordt gedaan, kun je één van de volgende technieken toepassen:

Bij een formulier waarmee de bezoeker gegevens kan wijzigen of verwijderen, zoals profielgegevens op een website, kun je één van de volgende technieken toepassen:

Bij een formulier waarmee de bezoeker antwoorden kan geven op vragen uit een test, toets of examen, kun je één van de volgende technieken toepassen:

Laat geen grote gebeurtenis plaatsvinden als een bezoeker een veld invoerveld invult, een selectievakje of keuzerondje aanklikt of een waarde kiest uit een keuzelijst, tenzij de bezoeker vooraf is geïnformeerd. Voor veel bezoekers kan een onverwachte gebeurtenis verwarrend zijn. Bezoekers met een visuele beperking kunnen de wijziging misschien niet zien. Bezoekers die alleen met het toetsenbord navigeren kunnen hierdoor moeite hebben met de bediening van de website. Laat de bezoeker daarom zelf op een knop klikken om de gebeurtenis in gang te zetten.

Grote gebeurtenissen worden contextwijzigingen genoemd. Contextwijzigingen zijn bijvoorbeeld:

Er mag ook geen contextwijziging plaatsvinden door het veranderen van de focus.

Soms moeten formulieren binnen een bepaalde tijd worden ingevuld of verloopt een inlogsessie na een bepaalde termijn. Zo’n tijdslimiet is niet handig voor bezoekers die meer tijd nodig hebben. Bijvoorbeeld omdat zij gebruik maken van hulptechnologieën of omdat zij door een cognitieve beperking meer tijd nodig hebben om tekst te lezen. Zorg daarom dat er geen tijdslimiet wordt gebruikt. Als het echt niet anders kan, geef bezoekers dan de mogelijkheid om de tijdslimiet aan te passen. Dit kan op één van de volgende manieren:

Niet bij alle tijdslimieten is het nodig dat deze kan worden uitgezet, aangepast of worden verlengt. Er zijn namelijk een paar uitzonderingen:

Vaak moeten in formulieren gegevens worden ingevuld die bij veel andere formulieren ook worden gevraagd. Dit geldt voor veelgevraagde gegevens zoals naam, e-mailadres en telefoonnummer.

Het doel van een invoerveld kan worden vastgelegd in de code. Hierdoor begrijpen browsers welke gegevens er worden gevraagd. Een browser kan het formulier dan al (deels) automatisch zelf invullen. Dit is handig voor alle bezoekers, maar voor bezoekers met een motorische beperking is dit nog belangrijker. Het invullen van een formulier kan hen veel tijd kosten.

Gebruik hiervoor het autocomplete-attribuut in de code om het doel van het invoerveld toe te voegen aan het <​input​>-element.

In de code ziet dat er zo uit:

Zorg dat alle bewegende, scrollende of knipperende content dat automatisch start én langer dan 5 seconden duurt kan worden gepauzeerd, gestopt of worden uitgezet. Onder bewegende, scrollende of knipperende content vallen onder andere carrousels, animaties op de pagina, bewegende advertenties, enz. Bezoekers met een cognitieve beperking kunnen er door worden afgeleid. Ook voor bezoekers die gebruik maken van een schermlezer kan dit storend zijn.

Deze regels gelden ook alle automatisch verversende content, maar hiervoor geldt ook de frequentie van updates mag worden aangepast.

Flitsende of knipperende content kan gemakkelijk de aandacht trekken. Dit kan bijvoorbeeld voorkomen in animaties of mediabestanden. Deze content kan een epileptische aanval veroorzaken bij mensen die daar gevoelig voor zijn.

Flitsende content mag daarom niet meer dan 3 keer per seconde flitsen, tenzij het flitsende gedeelte maar een klein oppervlak van het scherm inneemt.

Laat geluid niet automatisch spelen na het laden van een pagina, of zorg er in elk geval voor dat het geluid niet langer dan 3 seconden duurt. Voor bezoekers die gebruik maken van voorleessoftware kan het storend zijn als geluid automatisch begint te spelen. Zij kunnen de stem van voorleessoftware dan niet meer goed te horen. Ook voor bezoekers die moeite hebben met concentratie kunnen er door worden afgeleid.

Geluid dat toch automatisch begint te spelen, moet eenvoudig kunnen worden gepauzeerd, gestopt of zachter worden gezet. Zorg dan voor een pauze- of stopknop en een volumeregelaar bij het geluid. Voorzie eventueel ook een skiplink zodat deze bediening gemakkelijk te bereiken is.

Veel websites hebben blokken met content die op iedere pagina worden herhaald. Bijvoorbeeld een logo, een zoekveld en navigatie. Voor mensen die hulptechnologieën gebruiken of die het toetsenbord gebruiken om te navigeren, zijn deze herhalende blokken met content niet handig. Vaak staat in deze blokken namelijk veel content die iedere keer hetzelfde is. De inhoud wordt steeds volledig voorgelezen voordat zij uitkomen bij de inhoud op de pagina. Het navigeren duurt zo erg lang. Zorg daarom voor een manier dat zorgt herhalende blokken overgeslagen kunnen worden.

Door skiplinks aan te bieden hoeven gebruikers niet elke keer langs herhalende blokken met content. Een skiplink is een ankerlink die verwijst naar een onderdeel lager op de pagina. Hiermee kunnen zij sneller navigeren naar het gedeelte van de webpagina waar ze moeten zijn.

Skiplinks hebben een anker (#) als waarde in het href-attribuut die verwijst naar een ID verderop in de pagina.

In de code ziet dat er zo uit:

Webpagina’s moeten op meer dan één manier te vinden zijn. Sommige bezoekers kunnen moeite hebben met het begrijpen van de navigatie op een website, of vinden een bepaalde navigatiemethode makkelijker of sneller.

Zorg daarom voor meer dan één manier om een pagina op een website te vinden. Bied naast de navigatie bijvoorbeeld ook een zoekfunctie aan, of publiceer een pagina met een sitemap.

Geef elke link een beschrijvende linktekst die het doel van de link uitlegt. Linkteksten zoals ‘lees meer’ of ‘klik hier’ zijn niet duidelijk genoeg. Daarom is het belangrijk om linkteksten te gebruiken die zelf aangeven waar de link naartoe leidt. Zo is gemakkelijk het verschil te zien tussen verschillende links op dezelfde pagina.

Schermlezers kunnen een overzicht van alle links presenteren. Zo kan snel worden genavigeerd naar de inhoud.

Als het echt niet anders kan, dan mag ook nog de context van de link worden gebruikt om het doel van de link te beschrijven. Bijvoorbeeld dezelfde zin, paragraaf of in dezelfde tabelcel. De linktekst kan in de code ook worden uitgebreid met het aria-label-attribuut of met het title-attribuut.

In de code ziet dat er zo uit:

Wat ook kan is het verbergen van een deel van de linktekst met CSS:

Webpagina’s moeten een titel hebben die het onderwerp of doel van de pagina beschrijft. Met een goede paginatitel kunnen gebruikers een pagina gemakkelijk terugvinden als er bijvoorbeeld meerdere tabbladen open staan.

De paginatitel wordt ook gebruikt door mensen die een schermlezer gebruiken om snel een idee van de inhoud van de pagina te krijgen.

Een paginatitel voor een webpagina wordt gegeven met het <​​title>-element in het <​​head>-element. In het <​​title>-element moet altijd tekst staan.

In de code ziet dat er zo uit:

Navigatiemenu’s en onderdelen die op meerdere webpagina’s voorkomen, moeten telkens in dezelfde volgorde worden geplaatst. Zorg dat deze volgorde zowel in de vormgeving als in de code hetzelfde is.

Een consistente navigatie- en paginastructuur maakt het voor iedereen makkelijker om te navigeren door de website en informatie op een pagina te vinden. Ook bezoekers die gebruik maken van schermlezers kunnen hierdoor sneller en efficiënter hun weg vinden.

Navigatiemenu’s en onderdelen die op meerdere webpagina’s voorkomen, moeten telkens in dezelfde volgorde worden geplaatst. Zorg dat deze volgorde zowel in de vormgeving als in de code hetzelfde is.

Een consistente navigatie- en paginastructuur maakt het voor iedereen makkelijker om te navigeren door de website en informatie op een pagina te vinden. Ook bezoekers die gebruik maken van schermlezers kunnen hierdoor sneller en efficiënter hun weg vinden.

Geef elke link een beschrijvende linktekst die het doel van de link uitlegt. Linkteksten zoals ‘lees meer’ of ‘klik hier’ zijn niet duidelijk genoeg. Daarom is het belangrijk om linkteksten te gebruiken die zelf aangeven waar de link naartoe leidt. Zo is gemakkelijk het verschil te zien tussen verschillende links op dezelfde pagina.

Schermlezers kunnen een overzicht van alle links presenteren. Zo kan snel worden genavigeerd naar de inhoud.

Als het echt niet anders kan, dan mag ook nog de context van de link worden gebruikt om het doel van de link te beschrijven. Bijvoorbeeld dezelfde zin, paragraaf of in dezelfde tabelcel. De linktekst kan in de code ook worden uitgebreid met het aria-label-attribuut of met het title-attribuut.

In de code ziet dat er zo uit:

Wat ook kan is het verbergen van een deel van de linktekst met CSS:

Webpagina’s moeten een titel hebben die het onderwerp of doel van de pagina beschrijft. Met een goede paginatitel kunnen gebruikers een pagina gemakkelijk terugvinden als er bijvoorbeeld meerdere tabbladen open staan.

De paginatitel wordt ook gebruikt door mensen die een schermlezer gebruiken om snel een idee van de inhoud van de pagina te krijgen.

Een paginatitel voor een webpagina wordt gegeven met het <​​title>-element in het <​​head>-element. In het <​​title>-element moet altijd tekst staan.

In de code ziet dat er zo uit:

Voorleessoftware kan tekst omzetten in spraak. Als de taal niet, of op een verkeerde manier, is aangegeven in de code, dan kan de voorleessoftware de tekst niet duidelijk voorlezen.

Stel de standaardtaal van een website in. Dit helpt software om de taal van de content te bepalen.

Voeg het lang-attribuut toe aan HTML-element om de taal van een webpagina in te stellen. Gebruik in dit attribuut de juiste taalcode. Zo’n taalcode bestaat uit een tweeletterige code.

De taal van een website wordt ingesteld met het lang-attribuut in het <​​html​>-element.

In de code ziet dat er zo uit:

Elke taal heeft zijn eigen code. Voor Nederlands is dat ‘nl‘ (lang="nl"), voor Engels ‘en‘ (lang="en"), en voor Duits ‘de‘ (lang="de").

Als een zin of paragraaf in de content in een andere taal dan de standaard taal is geschreven, dan moet dit worden aangegeven in de code. Zo kan software de taal van de webpagina bepalen. Deze verplichting geldt alleen voor zinnen en paragrafen, dus niet voor losse woorden.

Voorleessoftware spreekt een webpagina uit. De uitspraak van de woorden is afhankelijk van de taal van de pagina. Als er geen (of een verkeerde) taal wordt aangegeven in de code, dan kan voorleessoftware de content mogelijk verkeerd of onduidelijk voorlezen. De standaardtaal van de browser wordt dan gebruikt en deze komt niet altijd overeen met de taal van de content.

Voeg het lang-attribuut toe aan de elementen met een andere taal. Geeft dit attribuut een waarde dit bestaat uit een tweeletterige code die staat voor een taal. Het lang-attribuut kan worden gebruikt op blok-niveau (<​div​>, <​p​>, <​table​>, enz.) maar ook op inline-elementen (<​span​>, <​a​>, <​strong​>, enz.).

In de code ziet dat er zo uit:

Er geldt een uitzondering voor eigennamen, technische termen, woorden van een onbepaalde taal, en woorden of uitdrukkingen die deel zijn gaan uitmaken van de volkstaal van de omringende tekst.

Bekijk alle taalcodes op IANA Language Subtag Registry (Engelstalig).