Verbeter tekstalternatieven en leesvolgorde

[robbertbos]

Bevindingen uit de schermlezertoets op WCAG 1.1 (NVDA, JAWS, VoiceOver).

• Logo en hero-foto krijgen een lege alt; ze zijn decoratief.
• De downloadknop bij een diagram staat na het diagram en heeft verborgen tekst als naam in plaats van aria-label plus title.
• De placeholder van het zoekveld is "Zoeken", zonder drie losse punten.
• Diagrammen: accTitle is de alt, accDescr volgt als verborgen tekst direct na het diagram, zodat een schermlezer hem regel voor regel kan teruglezen in plaats van als één lange naam. Bij de notificatiedienst wordt de desc een beschrijving (aria-describedby) in plaats van een deel van de naam.
• In de PDF-export komt de diagrambeschrijving achter de alt, want Chrome neemt verborgen tekst niet op in een PDF.
• De sitetitel is ook op de homepage een link, zodat de tab-volgorde overal gelijk begint.
• De rechterkolom (inhoudsopgave, downloads, relevante links) staat in de broncode direct na de h1 in plaats van na de hele tekst. Op breed scherm verandert er niets; op een smal scherm staan de downloads nu boven de tekst.
• Nieuwe shortcode emoji met aria-label of aria-hidden=true; een kale emoji blijft de standaard. Beschreven in de skills content-review, new-weekly en a11y-review.
• De eigen a11y-controle eist nu een diagrambeschrijving, en laat de koppen van de rechterkolom buiten de koppenvolgorde, anders maskeren die een sprong van h1 naar h3.

Gemeten onderweg:

• aria-describedby naar een dichtgeklapte <details> levert in Chrome geen beschrijving op; naar een hidden-element wel. Een beschrijving blijft wel één string die je niet kunt teruglezen, vandaar verborgen tekst.
• Verborgen tekst (visually-hidden) komt niet in een PDF: Chrome tagt alleen wat getekend wordt. Een test legt de PDF-alt vast.
• Op breed scherm is de rechterkolom pixelgelijk aan main: positie, meelopen bij scrollen en de plek van de tekst.
• Tests, CSP, koppen en alt-teksten, pa11y (85/85), htmltest en PDF/UA (37 PDF's) slagen. Elke commit bouwt en haalt de tests op zichzelf.

Twee dingen die hierbuiten vallen en apart opgepakt worden: in de ODF staat een diagram als Mermaid-broncode in plaats van als afbeelding, en het info-icoon van een callout komt ongetagd in de PDF. Beide bestaan al op main en vallen nu niet op, omdat geen enkele pagina met een diagram of zo'n callout downloads aanbiedt.

Moet vóór #136 gemerged worden: de correctie bij 1.4.13 in het rapport verwijst naar deze wijziging.

[github-actions]

🚀 Preview Deployment — web

Your changes have been deployed to a preview environment:

URL: https://web-pr-173-mzs-3ik.rig.prd1.gn2.quattro.rijksapps.nl

📱 Scan to open on mobile

 ▄▄▄▄▄ █▀ █▀▀▄▀▀▄██▄ ▄▄▄▀█ ▄▄▄▄▄ 
 █   █ █▀ ▄ ████▄▀▄██▄▀ ▀█ █   █ 
 █▄▄▄█ █▀█ █▄ ▀▀▄██▄ ▀█▄▄█ █▄▄▄█ 
▄▄▄▄▄▄▄█▄█▄█ ▀▄█ █ █ ▀ ▀ █▄▄▄▄▄▄▄
 ▄  ▄▀▄▄▄ ▄█▄█▄██▄█▀ ▀▄ ▄ ▀ █▄▀ ▀
 ▀▀  ▀▄ ▄ ▀ ▄█▀▄▄▄ █▄▀ █▀▀██▀▄▀▄█
 █▄█▀ ▄ ▄▄▀▄▀▀▀▄  ▀▀ ██ ▄▀▀ ▄▄█▀▀
 ▄█▄█▀▄██  █▀ ▄ █▄█▀▀▀▄▀▀ ▀ ▄█▀▄█
  ▄▄▄▄▄█  ▀█▄█▄▄    █▀ ▀▀▀▀█▄▀█ ▀
█▄ █ ▀▄▄▀▄█ ▄█▀ █▄▀▀█ ███▀▀ █▄▀▄█
▀ █▄ ▄▄▀ █▀▄▀▀▀▄ ▄█▀▄▀   █▀█▄▀█ ▀
 █▄   ▄▀ ███▀ ▄ ▄▄ ▀▀▀█▀▀ ▄█▀ ▀▄█
▄█▄██▄▄█▀ ██▄█▄▄▀ ▀ ▀▀▄▀ ▄▄▄  ▀█ 
 ▄▄▄▄▄ █▄ █ ▄█▀▄▄█▄▀  ▄  █▄█  ▀▄█
 █   █ █ ▀▄▄▀▀▀▄  ▀▀▀▀▀█▄ ▄  ▀▀  
 █▄▄▄█ █ █▄█▀ ▄▄▄▄ ▀▀ ▀▀█▀  ▀  ██
▄▄▄▄▄▄▄█▄███▄█▄██▄█▄███▄▄▄█▄███▄█

This deployment will be automatically cleaned up when the PR is closed.