Niet tekstuele content - deel 2

Zoals aangegeven in het eerste artikel is er al snel discussie over wat een al dan niet decoratieve afbeelding is.

Ik heb het eerst artikel voorgelegd aan enkele keurende organisatie en reacties ontvangen van Firmgroud en Cardan/Technobility. Door hun reacties op te nemen hoop ik het completer te maken, met het risico dat het ook iets ingewikkelder wordt.

De context waarin de afbeelding is geplaatst bepaald eigenlijk grotendeels of het decoratief is of niet. Er zijn nogal wat mogelijkheden en ik zal ze niet allemaal kunnen benoemen maar enkele veel gebruikte zal ik trachten te benoemen.

Nieuwsoverzicht met afbeeldingen. Een bekend voorbeeld is een nieuwsoverzicht waarbij titel, afbeelding en teaser de bezoeker de mogelijkheid geven snel het artikel naar keuze te selecteren.

Als afbeeldingen in een nieuwsoverzicht gebruikt worden en deze zelfde afbeelding staan ook bij het nieuwsbericht zelf, dan is het vaak beter om de afbeelding het nieuwsoverzicht leeg te laten. Bij het nieuwsbericht zelf kan dan wel een alternatieve tekst meegegeven worden indien nodig.

Als de zowel de afbeelding als de titel aanklikbaar zijn krijgt de afbeelding standaard een lege alt mee want de alt + de al aanwezige linktekst vormt de tekst.

In bovenstaande afbeelding van nu.nl staat in de (vereenvoudigde) code :

<a href="/coronavirus/6083369">
  <div class="particle headerimage ">
    <figure>
      <img src="/aantal-positieve-tests-6854-flink-toegenomen-na-cruciaal-weekend.jpg" alt="Aantal positieve tests (6.854) flink toegenomen na 'cruciaal weekend'">
      <figcaption>
        <h1>Aantal positieve tests (6.854) flink toegenomen na 'cruciaal weekend'</h1>
      </figcaption>
    </figure>
  </div>
</a>

Zowel de afbeelding als de tekst zijn klikbaar. De afbeelding heeft geen alt-tekst nodig.

In het voorbeeld is de alt-tekst gelijk aan de titel. Een screen reader zal dus 2x de titel voorlezen.

Als een afbeelding klikbaar is en er is geen tekst in de link dan is de alt-tekst verplicht.

<a href="/coronavirus/6083369">
  <img src="/aantal-positieve-tests-6854-flink-toegenomen-na-cruciaal-weekend.jpg" alt="Aantal positieve tests (6.854) flink toegenomen na 'cruciaal weekend'">
</a>

In bovenstaand voorbeeld is de alt-tekst dus wel verplicht omdat er geen tekst in de link (<a>) staat.

Drupal media en alt-teksten

Drupal gebruikt sinds versie 8 standaard de media module en deze voldoet helaas niet aan de eisen/wensen die men op het gebied van alt-teksten heeft.

In Drupal upload je een afbeelding en geeft je daarna de alt-tekst op. Deze alt-tekst wordt gekoppeld aan de afbeelding en laat zich niet meer wijzigen.
Ook kan je niet bij hergebruik van een afbeelding de alt-tekst aanpassen.

Om een lege alt-tekst mee te geven bij een teaser maar wel een alt-tekst bij dezelfde afbeelding in de tekst moet je de afbeelding 2x uploaden en 2x koppelen aan een bericht. Hiermee is de kracht van hergebruik niet meer toepassing. Er zijn meer cms-systemen die hun beperkingen hebben op dit gebied.