Basis tips digitale toegankelijkheid voor webredacteuren

Koppen structuur

Op de eerste plaats dienen koppen om een rangorde in de inhoud te creëren door middel van een geneste structuur.

Hierdoor is de informatie structuur makkelijk af te leiden voor zowel mensen als machines, bijvoorbeeld met tekst-naar-spraak hulpsoftware. Het vergemakkelijkt ook het scannen en navigeren door een pagina.

Een kop beschrijft de onderliggende inhoud. Een goede koppen structuur zal zich lezen als een inhoudsopgave. Ze dienen een semantisch doel.

De kop <h1> beschrijft waar de pagina over gaat en de opeenvolgende koppen <h2>-<h6> de subsecties naar volgorde van belangrijkheid en verdere diepgang. Het is daarom ook van belang om geen niveau over te slaan en zo de logische volgorde te behouden.

Voorbeeld:

Tekst stijlen

Soms wil je in een artikel nadruk leggen op sommige delen van de tekst door ze bijvoorbeeld vet- of schuingedrukt te maken.

De tekst wordt dan meestal door een teksteditor omgeven door de semantische opmaak <strong> en <em> tags. Dit is een verschil met de puur stilistische <b> en <i> tags.

Visueel zien ze er hetzelfde uit maar de betekenis en gebruik wordt anders in een bepaalde context. Mensen die gebruik maken van bijvoorbeeld een screen reader of waar de tekst wordt voorgelezen, kunnen deze semantisch tags indien gewenst nadrukkelijk laten uitspreken.

<strong> - Sterk belang

De <strong> tag wordt gebruikt om een bepaalde mate van belang, urgentie of ernst aan te geven.

Goede voorbeelden van gebruik van de semantische <strong> tag:

• Dit formulier is niet bedoeld om bestellingen door te geven.
• Voordat je verder gaat, zorg dat je naam boven het tentamen staat.
• Waarschuwing! Deze vloeistof is heel gevaarlijk.

<b> - Aandacht

De <b> tag wordt gebruikt om extra aandacht aan een stuk tekst te geven zonder dat daar een verdere betekenis of verandering van intonatie aan vastzit. Net als de <strong> tag zal deze standaard vetgedrukt weergegeven worden.

Goede voorbeelden van gebruik van de stilistische <b> tag:

• Het uitlichten van bepaalde trefwoorden in de lopende tekst zoals appels, peren en bananen.
• Product namen in een review tussen een Apple en een Samsung telefoon
• Een inleidende tekst of openingsparagraaf van een artikel.

De voorkeur heeft echter, indien mogelijk, om een class aan de <b class=“leading bold”> toe te voegen.

<em> - Nadruk

De <em> tag wordt gebruikt om nadruk te leggen op een woord of stukje tekst en kan daarbij de betekenis van de zin veranderen.

Goede voorbeelden van gebruik van de semantische <em> tag:

• Honden zijn schattige dieren. (Zei iemand dat het niet zo was?)
• Ik hou van asperges. (Het is weer asperge seizoen.)
• Spruitjes zijn vies. (Welke ouders beweren dat ze lekker zijn?)
• Ik geloof er helemaal niks van. (Vul deze zelf maar in.)

<i> - Afwijkend

De <i> tag wordt gebruikt om een stuk tekst aan te geven dat om een of andere reden verschilt van de normale tekst. Bijvoorbeeld taxonomie, technische termen of gedachtes.

Goede voorbeelden van gebruik van de stilistische <i> tag:

• De Homo sapiens stammen af van de Homo neanderthaliensis.
• HTML en het gebruik van Atomic design gaan hand in hand.
• Hij dacht: Waar ben ik nu weer aan begonnen.

Afbeeldingen

Naast tekst bestaat de content van een website meestal ook uit afbeeldingen zoals foto’s, logo’s, of iconen. Deze kunnen toegankelijk gemaakt worden door een tekst alternatief aan te bieden. Hiermee kan hulpsoftware dit tekstalternatief bijvoorbeeld laten voorlezen.

Of dit tekstuele alternatief ingevuld moet worden is afhankelijk van de context van de afbeelding.

Wanneer wel een alternatieve tekst:

Voegt de afbeelding informatie toe aan de tekst die noodzakelijk is voor het begrijpen van de tekst? Dan moet hier een tekst alternatief aan toegevoegd worden.

De alternatieve tekst dient een zo compleet mogelijk beschrijving te zijn van wat er te zien is op de afbeelding.

Als er tekst in de afbeelding staat van bijvoorbeeld een logo dan dient deze toegevoegd te worden aan het tekstalternatief.

Functionele afbeeldingen zoals afbeeldingen die als link dienen. Een envelop waarachter een link naar een email adres of pagina staat Of knop die een actie verwacht van de gebruiker. Dit moet dan niet de beschrijving van de afbeelding zijn, maar het link doel bijvoorbeeld: Vindt ik leuk en niet Icoon van duimpje omhoog.

See the Pen Voorbeeld <img> icon alt attribute by P en P Company (@ppcompany) on CodePen.

Wanneer geen alternatieve tekst:

Als de afbeelding een decoratieve afbeelding is. Een afbeelding die geen informatie aan de tekst toevoegt of noodzakelijk is voor het begrijpen van de tekst.

Als de inhoud afbeelding al voldoende beschreven staat in de omliggende tekst dan is het tekst alternatief niet nodig of volstaat een korte beschrijving. Bijv. 'Grafiek maandelijkse uitgaven.'

Hyperlinks

De beste en makkelijkste methode om links toegankelijk te maken is het link doel duidelijk maken aan de hand van de linktekst.

Link teksten zoals lees meer en klik hier in teksten zeggen weinig en maken het meestal niet duidelijk wat er zich aan de andere kant bevindt. Daarnaast zijn ze voor gebruikers die de pagina scannen of mensen die hulp technologieën gebruiken zoals het voorlezen van links, niet erg toegankelijk.

Aan de hand van de laatste twee voorbeelden is het meteen duidelijk wat je kan verwachten van de link. Daarnaast kunnen bezoekers na het lezen meteen op de link klikken als zij meer informatie willen over het onderwerp. 

Link naar bestand

Links die verwijzen naar een bestand hebben naast een toegankelijke naam, ook het bestandstype en grootte nodig zodat men kan bepalen wat er gebeurt als je er op klikt. Opent zich een pdf, of wordt het bestand gedownload. 

Afbeeldingen als link

Als de link een afbeelding is dan kun je aan de hand van het tekstalternatief van de afbeelding het link doel duidelijk maken. Dit moet dan niet de beschrijving van de afbeelding zijn, maar het link doel zoals bij een normale link het geval is. 

Bijvoorbeeld: Vind ik leuk en niet Icoon van duimpje omhoog.

Heb je hulp nodig?

Afhankelijk van de grootte en leeftijd van de website kan het doorvoeren van deze aanpassingen tijdrovend en kostbaar zijn. Wij helpen je graag bij het bepalen van de beste aanpak. Interesse? Stuur een mail naar sparren@pp-company.nl, bel +31 (0)46 - 437 73 11 of vul het contactformulier.