WCAG in begrijpelijk Nederlands
Niek Derksen

Over digitale toegankelijkheid

Zoeken

De toegankelijke naam bepalen

Deze pagina geeft per elementtype de volledige volgorde waarin de browser de toegankelijke naam berekent. Het is een naslagpagina voor tijdens toegankelijkheidsonderzoek. Wil je eerst weten wat een toegankelijke naam is en hoe de berekening werkt? Lees dan het artikel De toegankelijke naam.

De browser loopt de volgorde van boven naar beneden af. De eerste stap die een bruikbare tekst oplevert wordt de naam, de rest wordt overgeslagen. De eerste twee stappen zijn overal gelijk: eerst aria-labelledby, dan aria-label. Daarna verschilt het per elementtype.

De naam opzoeken in de accessibility tree

  1. Klik met rechtermuisknop op het element
  2. Selecteer ‘Inspecteren’
  3. In Firefox: ga naar het tabblad Toegankelijkheid. In Chrome: ga naar het tabblad Elementen en open de accessibility tree
  4. Zoek hieronder het elementtype op en controleer de volgorde

Let op: bepaal de naam in de accessibility tree, niet met een schermlezer. Bij een invoerveld met zowel een title als een placeholder lezen Chrome, Firefox en Edge de placeholder voor, terwijl de berekening voorschrijft dat title wint. Safari volgt wel de berekening.

Interactieve elementen

Links

Het <a>-element met een href.

  1. aria-labelledby
  2. aria-label
  3. De inhoud van de link
    • De zichtbare tekst
    • Het tekstalternatief van afbeeldingen in de link
    • Tekst in de link die visueel verborgen is
  4. title

Een <area> in een afbeeldingskaart is ook een link, maar krijgt zijn naam net als een afbeelding uit aria-labelledby → aria-label → alt → title, dus niet uit zijn inhoud.

Knoppen

Het <button>-element.

  1. aria-labelledby
  2. aria-label
  3. De gekoppelde <label>
  4. De inhoud van de knop
    • De zichtbare tekst
    • Het tekstalternatief van afbeeldingen in de knop
    • Tekst in de knop die visueel verborgen is
  5. title

Zit de <button> in zijn eigen <label>, dan telt de inhoud van de knop niet mee.

Knoppen als invoerveld

<input type="button">, <input type="submit"> en <input type="reset">.

  1. aria-labelledby
  2. aria-label
  3. De gekoppelde <label>
  4. value
  5. Voor type="submit" zonder value: een versie van “Versturen”. Voor type="reset" zonder value: een versie van “Stel opnieuw in”
  6. title

Afbeelding als knop

<input type="image">.

  1. aria-labelledby
  2. aria-label
  3. De gekoppelde <label>
  4. alt, als die niet leeg is
  5. title, als die niet leeg is
  6. Een versie van “Versturen”

Maatwerkcomponenten

Bij een los role-attribuut (bijvoorbeeld role="button" op een <div>) zijn er geen HTML-naambronnen. De rol bepaalt alleen of de inhoud meetelt:

  1. aria-labelledby
  2. aria-label
  3. De inhoud, alleen als de rol de naam uit de inhoud mag halen
  4. title
  • Wel uit de inhoud: button, cell, checkbox, columnheader, gridcell, heading, link, menuitem, menuitemcheckbox, menuitemradio, option, radio, row, rowheader, switch, tab, tooltip, treeitem.
  • Niet uit de inhoud: textbox, combobox, slider, listbox, dialog, de landmark- en groeprollen, en img.
  • Geen naam mogelijk: een <div> of <span> zonder rol (rol generic), plus presentation, paragraph, strong en de andere tekstrollen. aria-label doet hier niets.

Afbeeldingen

Afbeeldingen

Het <img>-element.

  1. aria-labelledby
  2. aria-label
  3. alt, ook als die leeg is
  4. title, alleen als er geen alt-attribuut staat
  5. De inhoud van de <figcaption>, alleen als er geen alt en geen title is, en de afbeelding in een <figure> staat die verder geen inhoud heeft

Let op: een lege alt (alt="") wint van title. De afbeelding krijgt dan de rol “presentation” en geen naam. <img alt="" title="Logo"> heeft dus geen toegankelijke naam.

SVG

Het <svg>-element.

  1. aria-labelledby
  2. aria-label
  3. De tekst in het <title>-element binnen de <svg>
  4. title

Let op: een <svg> heeft standaard geen rol die de naam doorgeeft aan hulptechnologie. Zet role="img" op de <svg> en gebruik aria-label of aria-labelledby. De ondersteuning voor het <title>-element verschilt per browser.

Formulierelementen

Invoervelden en tekstgebieden

<input> met type="text", "password", "number", "search", "tel", "email" of "url", en <textarea>.

  1. aria-labelledby
  2. aria-label
  3. De gekoppelde <label>
  4. title
  5. placeholder
  6. aria-placeholder

Zijn er meerdere <label>-elementen gekoppeld, dan plakt de browser ze aan elkaar in de volgorde van de code, gescheiden door spaties. Zit het invoerveld in zijn eigen <label>, dan telt de ingevulde waarde niet mee.

Overige formulierelementen

Alle formulierelementen die hierboven niet genoemd zijn: <select>, selectievakjes, keuzerondjes, schuifregelaars, datumvelden, kleurvelden, bestandsvelden.

  1. aria-labelledby
  2. aria-label
  3. De gekoppelde <label>
  4. title

Let op: hier telt placeholder niet mee. Een <select> of selectievakje krijgt geen naam uit een placeholder.

Groepen van velden

Het <fieldset>-element.

  1. aria-labelledby
  2. aria-label
  3. De inhoud van de eerste <legend> die een direct kindelement is
  4. title

Uitvoervelden

Het <output>-element.

  1. aria-labelledby
  2. aria-label
  3. De gekoppelde <label>
  4. title

Tabellen

Tabel

Het <table>-element.

  1. aria-labelledby
  2. aria-label
  3. De inhoud van de eerste <caption> die een direct kindelement is
  4. title

Structuur en ingesloten content

Sectie- en groepeerelementen

Elementen als <section>, <nav>, <aside>, <article>, <form> en elementen met role="group".

  1. aria-labelledby
  2. aria-label
  3. title

Een <section> of <form> wordt alleen een landmark als hij een toegankelijke naam heeft.

Figuren

Het <figure>-element.

  1. aria-labelledby
  2. aria-label
  3. title

Let op: de <figcaption> telt niet mee voor de naam van de <figure> zelf, tenzij je er met aria-labelledby naar verwijst. Dat is anders dan bij de <img> binnen de figure.

Uitklapbare content

Het <summary>-element als direct kindelement van <details>.

  1. aria-labelledby
  2. aria-label
  3. De inhoud van de <summary>
  4. title

Ontbreekt de <summary>, dan levert de browser er zelf een met een standaardtekst.

Ingesloten pagina’s

Het <iframe>-element.

  1. aria-labelledby
  2. aria-label
  3. title

De pagina in het <iframe> heeft daarnaast een eigen naam uit het <title>-element van die pagina.

Welke verborgen tekst telt mee?

Bij links, knoppen en <summary> is de inhoud een bron voor de naam. Of verborgen tekst in die inhoud meetelt, hangt af van hoe je hem verbergt.

  • Tekst die visueel verborgen is met de clip-techniek (vaak een klasse als sr-only of visually-hidden) telt wel mee
  • Tekst met display: none, visibility: hidden, het hidden-attribuut of aria-hidden="true" telt niet mee

Uitzondering: tekst waar aria-labelledby naar verwijst telt altijd mee, ook als die tekst verborgen is.

Bronnen