Informatie en relaties

Wat het vereist

Alles wat in één oogopslag zichtbaar is — dat deze grote vette tekst een kop is, dat deze rijen een gegevenstabel vormen, dat deze groep velden het „factuuradres“ betreft, dat dit sterretje verplicht betekent — moet ook aanwezig zijn in de onderliggende code. Schermlezers, spraakbedieningssoftware en reflow-engines zien alleen de opmaak. Als een relatie puur visueel is (een groter lettertype, een dikkere rand, een inspringing), ziet hulptechnologie niets.

Hoe eraan te voldoen

• Gebruik echte koptekstelementen (<h1> tot en met <h6>) in een logische geneste volgorde — nooit een gestileerde <div> als nep-koptekst.
• Markeer lijsten met <ul>, <ol> en <li> — niet met alinea’s gescheiden door regeleinden of opsommingstekens.
• Gebruik <table> met <th scope="col"> / <th scope="row"> voor gegevenstabellen, met <caption> dat het doel van de tabel beschrijft.
• Elk formulierbesturingselement vereist een programmatisch label: <label for="...">, aria-labelledby of aria-label. Plaatsaanduidingstekst is geen label.
• Groepeer gerelateerde formuliervelden in <fieldset> met <legend>, of gebruik role="group" met aria-labelledby voor aangepaste widgets.
• Gebruik voor figuren en bijschriften <figure> en <figcaption>. Gebruik voor definitieparen <dl> / <dt> / <dd>.
• Geef verplichte velden zowel visueel (sterretje) als programmatisch aan (aria-required="true" of het attribuut required).

Veelvoorkomende fouten

• <div class="heading-1"> in plaats van <h1> — ziet er goed uit, wordt door niets aangekondigd.
• Layouttabellen gebruikt voor visuele kolommen, of gegevenstabellen gebouwd met <div>-rasters zonder <th>-cellen.
• Formuliervelden met uitsluitend een plaatsaanduidingstekst als label — het label verdwijnt bij focus en schermlezers kondigen het mogelijk niet aan.
• Opsommingstekens nagebootst met <p>•&nbsp;Item</p> in plaats van echte lijstopmaak.
• Sterretjes voor verplichte velden weergegeven in rood CSS zonder aria-required of required-attribuut.
• Visueel gegroepeerde keuzerondjes zonder <fieldset> / <legend>, waardoor schermlezers zwevende opties presenteren zonder de bijbehorende vraag.
• Gegevenstabellen waarvan de headerrij vet is opgemaakt maar <td> gebruikt in plaats van <th>.

Waarom het belangrijk is

1.3.1 is het meest geciteerde succescriterium in WCAG-audits na 1.1.1 en 1.4.3. Elke door een CMS gegenereerde pagina, elke marketinglandingspagina, elk aangepast formulierwidget bevat minstens één overtreding. De oplossing is bijna altijd semantische HTML, niet ARIA — wanneer men naar role="heading" grijpt om een <div> te repareren die <h2> had moeten zijn, was de fout al eerder gemaakt.