Maak je webpagina’s digitaal toegankelijk

Dit betekent dat je website niet alleen technisch in orde moet zijn, maar ook de content die jij publiceert. Je content hoort namelijk ook aan de richtlijnen van WCAG 2.1 te voldoen. Maar hoe maak je je content digitaal toegankelijk? En wat heb je daarvoor nodig?

Basiskennis van HTML (Hyper Text Markup Language)

Ik ga er even vanuit dat je enige kennis hebt van HTML. Is dat niet het geval dan adviseer ik je om die kennis op te doen. Een goede bron hiervoor is bijvoorbeeld w3schools. Je hebt die kennis namelijk nodig om structuur aan te kunnen brengen in de content van je webpagina.

Goede opbouw van je content

Voordat je in het Content Management Systeem (CMS) met HTML gaat werken, schrijf je eerst een gestructureerde tekst. Je begint met een goede paginatitel waarin je woorden verwerkt waarop je gevonden wilt worden. In het geval van dit artikel zijn dat de zoekwoorden “digitaal” en “toegankelijk.”

De eerste alinea

Vervolgens geef je in de eerste alinea aan waarover je content gaat. Kom direct ter zake en stimuleer de bezoeker die meestal een korte aandachtsspanne heeft om verder te lezen.

Dit kan bijvoorbeeld door middel van een conclusie, doel- of probleemstelling zijn over het onderwerp. Kortom die eerste alinea is belangrijk! Schrijf actief, formuleer korte zinnen in eenvoudige (spreek)taal en houd je alinea kort. O ja, en vergeet niet de zoekwoorden uit je paginatitel erin te verwerken.

Ook de rest van je tekst, waarin je dieper ingaat op je onderwerp, schrijf je op diezelfde manier. De alinea’s structureer je met tussenkoppen. Maak je gebruik van interne of externe links, geef die een unieke link tekst, dus niet “Klik hier” of “Lees meer.”

Screen reader

Een visueel beperkte bezoeker gaat met sneltoetsen op zijn toetsenbord door de koppen en links heen. De screen reader leest die vervolgens op. Dit hangt natuurlijk wel af van hoe jij de tekst in het CMS hebt geplaatst. Op dit punt komt je kennis van HTML goed van pas.

Hoe ziet je HTML eruit

In de text-editor van het CMS zit een knopje als je die aanklikt, wordt de ingevoerde tekst inclusief de HTML zichtbaar. Nu is het alleen de vraag. Hoe structureer je je content in de HTML? Je verdeelt je content in blokken.

Elk blok heeft een kop, namelijk een heading 2 (h2) met daaronder de paragrafen (p) die je voorziet van tussenkoppen, de heading 3 (h3). Afhankelijk van de lengte van je content kun je deze structuur herhalen. Overigens gebruik niet meer als tien h2 koppen en van de h3 tussenkoppen mag je zoveel gebruiken als je wilt.

<h2>Kop</h2>
<p>Paragraaf</p>
<h3>Tussenkop</h3>
<p>Paragraaf</p>
<p>Paragraaf</p>
<h3>Tussenkop</h3>
<p>Paragraaf</p>
<h2>Kop</h2>
<p>Paragraaf</p>
<h3>Tussenkop</h3>
<p>Paragraaf</p>
<ul>
<li>Lijst item</li>
<li>Lijst item</li>
</ul>

Nu vraag je je misschien af, waar voer ik de heading 1 (h1) in. Dit is meestal de pagina titel die je als eerste invult als je een nieuwe webpagina aanmaakt in het CMS. Uiteraard mag je meerdere h1’s gebruiken op een pagina maar dat is zoekmachine technisch niet aan te raden.

Afbeeldingen, audio en video

Voeg je beeldmateriaal toe aan je webpagina, zorg er dan wel voor dat je afbeelding de content ondersteunt en geef een omschrijving van de afbeelding in de alt attribute zoals hieronder is weergegeven.

<img src="/pad/naar/voorbeeld.jpg" alt="Voorbeeld omschrijving van afbeelding">

Naast afbeeldingen kun je ook audio en video toevoegen bijvoorbeeld een podcast of een video over een product. Om beide digitaal toegankelijk te maken, plaats je onder de audio een transcript en in de video zorg je voor ondertiteling.

Toevallen (epilepsie) voorkomen

Vermijd content op je webpagina’s dat meer dan drie keer per seconde knippert. Er is ook geen alternatieve oplossing voor knipperende content.

Tot slot zorg je ervoor dat de paginatitel in de title tag de lading dekt van de content op je pagina, en verwerk je daarin de belangrijke sleutelwoorden. Dit is niet alleen goed voor de digitale toegankelijkheid maar ook voor de zoekmachine optimalisatie. Kortom je draagt als website eigenaar of beheerder op deze wijze je steentje bij aan een toegankelijke website.

Geschreven door Sandor Stikkelman, front-end designer & developer

Wil jij jouw website laten voldoen aan de digitale toegankelijkheidseisen?

We kijken graag met je mee welke stappen je kan nemen om de digitale toegankelijkheid te verbeteren. Neem contact op en vraag naar de mogelijkheden.