Drupal heeft een goede reputatie op het gebied van gebruiksvriendelijkheid en toegankelijkheid. In deze serie van zes blogs kijken we naar hoe Drupal het doet en waar nog verbeterpunten liggen. Na deel 4 over formulieren, kijken we in dit vijfde deel naar de toegankelijkheid en WCAG-ondersteuning van afbeeldingen in Drupal, zoals core die aanbiedt, zowel losse afbeeldingen als vanuit de mediabibliotheek. Het doel van Drupal is om ondersteuning te bieden voor WCAG 2.1 AA. We gaan kijken in hoeverre dat nu al lukt.
Dit is het vijfde deel, uit een serie van zes.
Voor de toegankelijkheid is het belangrijk dat je bij afbeeldingen een alternatieve tekst toevoegt. Dit gebeurt met het alt-attribuut in het img-element. Afhankelijk van het type afbeelding (informatief, decoratief, functioneel of complex) is het verplicht om wel of geen alternatieve tekst toe te voegen. Het alt-attribuut moet wel altijd aanwezig zijn, maar blijft leeg bij een decoratieve afbeelding. Let wel, het alt-attribuut is niet verplicht volgens de HTML-specificatie, maar wel voor de WCAG.
Het is dus van belang dat een redacteur aan kan geven om welk type afbeelding het gaat. Bovendien is de context van de afbeelding belangrijk, dezelfde afbeelding kan in een ander artikel, een andere alternatieve tekst nodig hebben. Dit levert met name een uitdaging op als je werkt met een mediabibliotheek. De redactie slaat de alternatieve tekst op bij de afbeelding die je vervolgens in meerdere artikelen kunt gebruiken. Die tekst zou dus overschreven moeten kunnen worden. Hoe helpt Drupal de content editors hiermee?
Je voegt afbeeldingen toe in een veld met een knoppenbalk (de WYSIWYG of rich text editor) of via een specifiek afbeeldingenveld. In beide gevallen is dit alleen de afbeelding die je iedere keer uploadt, of kies je deze uit de mediabibliotheek.
Standaard kun je in Drupal via de knoppenbalk een afbeelding uploaden en voorzien van een alternatieve tekst. Deze kun je ook leeg laten, het alt-attribuut wordt dan wel toegevoegd, maar blijft leeg. Zoals we net hebben gezien, voldoet dit aan de WCAG.
<img src="/sites/default/files/inline-images/bestandsnaam.jpg alt="" width="1280" height="854">Het alt-attribuut krijgt dus de tekst die door de redacteur wordt opgegeven, ook als die leeg is. Omdat iedere afbeelding uniek is en niet wordt hergebruikt, is de alternatieve tekst dus ook uniek. Deze is daardoor altijd goed af te stemmen op de context.
Binnen Drupal wordt vaak gebruik gemaakt van een mediabibliotheek. Deze module is onderdeel van Drupal core, maar wordt niet standaard geïnstalleerd. Hiermee voeg je meerdere types media toe aan een bibliotheek. Denk aan video en audio en dus ook afbeeldingen. Als je een afbeelding voor de eerste keer toevoegt, kun je een alternatieve tekst meegeven. Wanneer je de afbeelding in een ander artikel opnieuw opneemt, wordt dus dezelfde alternatieve tekst gebruikt. De HTML-code die Drupal genereert is correct.
<img src="/sites/default/files/styles/large/public/2024-01/medianaam.jpg" width="480" height="320" alt="Twee sporen met cijferborden">Als de redactie op deze manier in een WYSIWYG-veld een afbeelding toevoegt, dan kan de redactie de alternatieve tekst overschrijven.
Dit werkt alleen bij het type Image dat de Media-module standaard installeert. Drupal zit hier op het goede spoor, maar je kunt de alternatieve tekst niet leeg laten. Dit is door de bouwer van de site eenvoudig aan te passen door een apart mediatype te definiëren, met enkel decoratieve afbeeldingen waarbij het alt-attribuut altijd leeg is. Je kunt ook gebruik maken van de Decorative Image Widget-module.
De HTML-code die Drupal genereert is prima, het cruciale element om aan de WCAG te kunnen voldoen is de alternatieve tekst. Die kun je in een WYSIWYG-tekstveld toevoegen en – als de mediabibliotheek wordt gebruikt – afhankelijk van de context aanpassen. Er zijn enkele randvoorwaarden om dit correct teogankelijk te maken die met een correcte implementatie, eventueel met behulp van een extra module.
Neem contact op en laat een volledige audit uitvoeren. Samen kijken we hoe we dit voor jouw specifieke implementatie op kunnen lossen.
