WCAG voor redacteuren

Waarom is dit belangrijk voor jou?

Wil je dat jouw content zoveel mogelijk mensen bereikt? Dan is toegankelijk schrijven essentieel. Als redacteur bepaal je of mensen je boodschap kunnen lezen en begrijpen.

Duidelijke koppen en begrijpelijke linkteksten helpen mensen met een functiebeperking. Tegelijk wordt je content beter vindbaar in zoekmachines. En een logische structuur zorgt ervoor dat alle lezers je boodschap sneller begrijpen.

Begin direct met het publiceren van toegankelijke content, want achteraf aanpassen kost veel meer tijd.

Je belangrijkste taken

<!-- Goed voorbeeld -->
H1: Aanmelden voor dit webinar
  H2: Wat leer je?
  H2: Voor wie is dit webinar?
    H3: Beginners
    H3: Gevorderden
  H2: Praktische informatie

Hulpmiddelen voor redacteuren

Koppenstructuur bekijken:

• headingsMap (browser extensie)
  • Toont een overzicht van al je koppen en landmarks
  • Laat sprongen in niveaus zien
  • Download headingsMap:
    • headingsMap voor Firefox
    • headingsMap voor Chrome
    • headingsMap voor Edge

Contrast controleren:

• Colour Contrast Analyser (CCA) (software)
  • Berekent de contrastverhouding tussen 2 kleuren
  • Kleurcodes of pipet
• WCAG Color contrast checker (browser extensie)
  • Toont een overzicht van alle kleurcombinaties
  • Controleert direct de contrastverhouding
  • Download WCAG Color contrast checker:
    • WCAG Color contrast checker voor Firefox
    • WCAG Color contrast checker voor Chrome
    • WCAG Color contrast checker voor Edge

Lees meer over hulpmiddelen bij het toetsen

Praktische tips

Afbeeldingen

• Geef informatieve afbeeldingen een tekstalternatief. Beschrijf wat je ziet. Voegt de afbeelding geen informatie toe? Laat het tekstalternatief dan leeg.
• Geef afbeeldingen die ook als link worden gebruikt een tekstalternatief. Beschrijf wat je ziet én waar de link naartoe gaat.
• Gebruik geen afbeeldingen van tekst. Staat er toch tekst op een afbeelding? Zorg dat het tekstalternatief exact dezelfde tekst bevat.
• Staat er zichtbare tekst in een afbeelding die ook als knop of link werkt? Zorg dan dat de toegankelijke naam dezelfde tekst bevat.

Formulieren

• Geef elk invoerveld een zichtbaar en beschrijvend label.
• Schrijf heldere foutmeldingen. Benoem welk veld verkeerd is ingevuld, wat de fout is én hoe je het oplost.
• Geef invoervelden het juiste doel mee. Vul autocomplete in als je editor dat ondersteunt. Zo kan de browser het veld automatisch invullen.

Media

• Voeg bij elk geluidsfragment een transcript toe.
• Voorzie filmpjes van ondertitels.
• Voeg een audiodescriptie of een tekstalternatief toe bij filmpjes waar niet alle visuele informatie in het geluid te horen is.
• Zorg dat geluid dat automatisch afspeelt te pauzeren of te dempen is.
• Vermijd flitsende of knipperende content. Gebruik geen animaties die meer dan 3 keer per seconde flitsen.
• Vermijd flitsende of knipperende content. Gebruik geen animaties die meer dan 3 keer per seconde flitsen.

Navigeren

• Geef elke pagina een duidelijke en unieke paginatitel die het onderwerp beschrijft.
• Schrijf linkteksten die vertellen waar de link naartoe gaat. Vermijd vage teksten zoals “klik hier” of “lees meer”.
• Gebruik voor dezelfde functies en onderdelen steeds dezelfde benaming.

Ontwerp

• Gebruik kleur nooit als enige manier om informatie over te brengen. Voeg ook tekst, iconen of patronen toe.
• Zorg voor minimaal 4,5:1 contrastverhouding tussen tekst en achtergrond.
• Gebruik je grote tekst (minstens 24px of 18,5px vetgedrukt)? Zorg dan voor minimaal 3:1 contrastverhouding.
• Zorg dat onderdelen in diagrammen en grafieken minimaal 3:1 contrastverhouding hebben tegen aangrenzende kleuren.

Tekst

• Gebruik de kop-opmaak in de editor. Gebruik H1 voor de hoofdtitel. Bouw je koppen daarna logisch op (H1 → H2 → H3).
• Zorg dat elke kop het onderwerp van de onderliggende tekst beschrijft.
• Gebruik de lijst-opmaak in de editor als je een opsomming maakt.
• Gebruik de tabel-opmaak in de editor als je een tabel maakt. Voeg duidelijke tabelkoppen toe.
• Stel de standaardtaal van de pagina in.
• Gebruik de juiste taalcode als je tekst in een andere taal schrijft.
• Verwijs niet alleen naar kleur, vorm of positie. Schrijf bijvoorbeeld niet “klik op de groene knop” of “zie het kader rechts”.

Handige bronnen

• Writing for Web Accessibility | Web Accessibility Initiative (WAI) | W3C (Engelstalig)

Succescriteria

Alle succescriteria waar redacteuren bij betrokken is:

Afbeeldingen

• 1.1.1 Niet-tekstuele content
• 1.4.5 Afbeeldingen van tekst
• 1.4.11 Contrast van niet-tekstuele content
• 2.3.1 Drie flitsen of beneden drempelwaarde
• 2.5.3 Label in naam

Bediening

• 1.4.2 Geluidsbediening

Beweging

• 2.3.1 Drie flitsen of beneden drempelwaarde

Formulieren

• 1.3.1 Info en relaties
• 1.3.5 Identificeer het doel van de input
• 2.4.6 Koppen en labels
• 3.3.1 Foutidentificatie
• 3.3.2 Labels of instructies
• 3.3.3 Foutsuggestie

Media

• 1.1.1 Niet-tekstuele content
• 1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen)
• 1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen)
• 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)
• 1.2.4 Ondertitels voor doven en slechthorenden (live)
• 1.2.5 Audiodescriptie (vooraf opgenomen)
• 1.4.2 Geluidsbediening
• 2.3.1 Drie flitsen of beneden drempelwaarde

Navigeren

• 2.4.2 Paginatitel
• 2.4.4 Linkdoel (in context)

Ontwerp

• 1.4.1 Gebruik van kleur
• 1.4.3 Contrast (minimum)
• 1.4.11 Contrast van niet-tekstuele content

Techniek

• 2.5.3 Label in naam

Tekst

• 1.3.1 Info en relaties
• 1.3.3 Zintuiglijke eigenschappen
• 2.4.2 Paginatitel
• 2.4.4 Linkdoel (in context)
• 2.4.6 Koppen en labels
• 3.1.1 Taal van de pagina
• 3.1.2 Taal van onderdelen
• 3.2.4 Consistente identificatie

Meer hulp nodig?