Handleiding: Toegankelijke Mosaics

Gewijzigd op Do, 4 Sep om 5:58 PM

Inleiding

Om een Mosaic toegankelijk te maken voor alle gebruikers, inclusief mensen met een visuele of cognitieve beperking, moeten enkele regels worden gevolgd. Hieronder staan de belangrijkste richtlijnen.

Tekstkleur

Kleine tekst (< 14px): minimaal contrastverhouding van 4,5:1.
Grotere tekst (≥ 14px): minimaal contrastverhouding van 3:1.

Dit zorgt ervoor dat tekst goed leesbaar blijft voor mensen met een verminderd zicht.

Diagram- en grafiekkleuren

De kleuren in grafieken moeten een contrast hebben van minimaal 3:1 met de achtergrond.
Zorg voor voldoende onderscheid tussen kleuren onderling.
- Voorbeeld: het verschil tussen blauw en grijs is voor veel kleurenblinde gebruikers slecht zichtbaar. Kies dus contrasterende kleuren.

Afbeeldingstitels

Afbeeldingen met betekenis (bijvoorbeeld logo’s, iconen of grafieken) moeten een naam of beschrijving krijgen. Dit kan via de optie Afbeeldingsnaam in een teksttile.
Decoratieve afbeeldingen (zoals sfeerfoto’s of achtergronden) mogen geen beschrijving krijgen. Dit voorkomt verwarring voor screenreader-gebruikers.

Afbeeldingstegels met link

Bij Image (web) en Image (library) tegels is het mogelijk een link toe te voegen.

Alleen toepassen als de afbeelding duidelijk verwijst naar een andere website.
- Voorbeeld: een logo dat naar de website van de organisatie leidt.

Embedded / Viewertegels

Voor tegels met een Viewer presentatie gelden dezelfde contrastregels als voor reguliere Mosaic tegels.
Controleer dus zowel achtergrond-contrast als kleurgebruik in de inhoud.

Tegelbeschrijving

Een indicatorbeschrijving kan getoond worden in een tooltip.
Korte beschrijvingen zijn prima; lange teksten geven juist problemen voor toegankelijkheid.
Indien een korte omschrijving niet mogelijk is: stel Toon beschrijving in op “Nee”. Dan wordt de tegelnaam als tooltip gebruikt.

Linkbeschrijving

De linkbeschrijving verschijnt als tooltip wanneer de gebruiker over de tegel hovert.
Zorg dat de tekst in de tegel terugkomt in de beschrijving, zodat screenreader-software de link logisch kan voorlezen.

Voorbeeld:

Titel in tegel: “Meer informatie over deze data?”
Juiste beschrijving: “Meer informatie over deze data? Ga naar onze website”.
Onjuiste beschrijving: “Ga naar onze website” (want de context ontbreekt).