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 én welke informatie de afbeelding overbrengt.
• Is een afbeelding puur decoratief? Laat het tekstalternatief dan leeg. Voeg geen beschrijving toe.
• Geef afbeeldingen die ook als link worden gebruikt een tekstalternatief. Beschrijf waar de link naartoe gaat.
• Geef afbeeldingen die ook als knop worden gebruikt een tekstalternatief. Beschrijf de actie van de knop.
• Staat er zichtbare tekst in een afbeelding die ook als knop of link werkt? Zorg dan dat het tekstalternatief dezelfde tekst bevat.
• Gebruik geen afbeeldingen van tekst. Gebruik in plaats daarvan gewone tekst met opmaak.

Formulieren

• Geef elk invoerveld een zichtbaar en beschrijvend label. Gebruik geen placeholdertekst als vervanging voor een label.
• Markeer verplichte velden duidelijk in het label bij het veld. Of op formulierniveau, bijvoorbeeld met “(verplicht)”.
• Schrijf foutmeldingen die benoemen in welk veld de fout zit, wat er fout is en hoe je het oplost.
• Geef invoervelden het juiste doel mee. Vul het autocomplete-attribuut in als je CMS dat ondersteunt.

Media

• Voeg bij elk geluidsfragment een transcript toe. Zet het in de buurt van het fragment. Neem alle gesproken tekst, alle belangrijke geluiden en de namen van de sprekers op.
• Heeft een filmpje geen geluidsspoor? Voeg dan een transcript of een geluidsspoor toe als de beelden informatie overbrengen.
• Voeg ondertitels toe bij vooraf opgenomen filmpjes. Neem alle gesproken tekst, alle belangrijke geluiden en de namen van sprekers op.
• Voeg een audiodescriptie toe bij filmpjes waar de beelden informatie overbrengen die niet in het geluidsspoor zit.
• Zorg dat geluid dat automatisch afspeelt te pauzeren of te dempen is.
• Zorg dat bewegende content zoals carrousels en animaties te pauzeren of te stoppen is.
• Gebruik geen flitsende of knipperende content die meer dan 3 keer per seconde flitsen.

Navigeren

• Geef elke pagina een duidelijke 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 naam op elke pagina.

Ontwerp

• Gebruik kleur nooit als enige manier om informatie over te brengen, een actie aan te geven of een element te onderscheiden. 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 grafieken en diagrammen minimaal 3:1 contrastverhouding hebben ten opzichte van 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 je editor als je een opsomming maakt. Gebruik een ongeordende lijst voor losse punten en een geordende lijst voor stappen.
• Gebruik de tabel-opmaak in je editor als je een tabel maakt. Voeg tabelkoppen toe die beschrijven wat er in de kolom of rij staat.
• Stel de taal van de pagina in via je CMS.
• Staat er tekst op de pagina in een andere taal? Geef die tekst dan de juiste taalcode mee, bijvoorbeeld lang="en" voor Engelse tekst.
• Verwijs niet alleen naar kleur, vorm of positie. Schrijf niet “klik op de groene knop” of “zie het kader rechts”. Benoem ook de naam of functie van het onderdeel.

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
• 1.4.11 Contrast van niet-tekstuele content
• 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
• 1.4.3 Contrast (minimum)
• 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?