Skip to content

Commit a2d1abb

Browse files
erikkroeserikkroes
authored
docs: wcag 2.5.3 full page (#2409)
Fixes #662 Preview: https://documentatie-git-docs-wcag-253-full-nl-design-system.vercel.app/
1 parent 95e3686 commit a2d1abb

File tree

4 files changed

+83
-9
lines changed

4 files changed

+83
-9
lines changed

‎.changeset/wcag-2.5.3-full-page.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@nl-design-system-unstable/documentation": minor
3+
---
4+
5+
Tekst [WCAG-pagina 2.5.3](/wcag/2.5.3) volledig afgemaakt.

‎docs/wcag/2.5.03.mdx‎

Lines changed: 54 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ hide_title: true
44
hide_table_of_contents: false
55
sidebar_label: 2.5.3 Label in Naam
66
pagination_label: WCAG-succescriterium 2.5.3 Label in Naam
7-
description: Voor bedieningselementen met een zichtbaar label, moet de zichtbare labeltekst aanwezig zijn in of overeenkomen met de toegankelijke naam.
7+
description: De zichtbare naam van een onderdeel moet terugkomen in de toegankelijke naam.
88
slug: 2.5.3
99
keywords:
1010
- WCAG
@@ -30,17 +30,67 @@ import Summary from "./summaries/_2.5.3-summary.md";
3030
{"WCAG-succescriterium 2.5.3 Label in Naam"}
3131
</WcagHeadingGroup>
3232

33+
## In het kort
34+
35+
<dl>
36+
<div class="dl__item">
37+
<dt class="dl__term">Doel</dt>
38+
<dd class="dl__definition">De zichtbare naam kan gebruikt worden voor spraakbediening.</dd>
39+
</div>
40+
<div class="dl__item">
41+
<dt class="dl__term">Wat te doen</dt>
42+
<dd class="dl__definition">Laat de zichtbare naam overeenkomen met de toegankelijke naam.</dd>
43+
</div>
44+
<div class="dl__item">
45+
<dt class="dl__term">Waarom het belangrijk is</dt>
46+
<dd class="dl__definition">Mensen met spraakbediening gebruiken de zichtbare naam voor bediening.</dd>
47+
</div>
48+
</dl>
49+
3350
## Uitleg
3451

3552
<Summary />
3653

37-
## Opgelet
54+
De zichtbare naam is wat veel gebruikers zien als ze een website gebruiken. Denk hierbij aan labels bij invoervelden, linkteksten of de inhoud van een knop.
3855

39-
Deze inhoud wordt binnenkort aangevuld met uitgebreidere uitleg, bronnen en informatie over hoe te testen.
56+
Iemand die spraakbediening gebruikt zal deze naam gebruiken bij het uitspreken van commando's. "Klik contact" zorgt ervoor dat het onderdeel dat "contact" heet geactiveerd wordt.
57+
De software voor spraakbediening gebruikt hiervoor de [toegankelijke naam](/woordenlijst/#toegankelijke-naam). Als die niet overeenkomt met de zichtbare naam, dan kan de software het commando niet uitvoeren.
58+
Ook als veel onderdelen op de pagina hetzelfde heten kan dit een probleem zijn. Denk hierbij aan linkteksten als "lees meer" of "hier".
4059

4160
## Gerelateerde NL Design System-richtlijnen
4261

43-
- Content - Tekstopmaak: [Toegankelijke linkteksten](/richtlijnen/content/tekstopmaak/linkteksten).
62+
- Formulieren - Labels: [Zichtbare naam label](https://nldesignsystem.nl/richtlijnen/formulieren/labels/zichtbare-naam)
63+
64+
## Bronnen en tools
65+
66+
- [Chrome Accessibility Pane](https://developer.chrome.com/docs/devtools/accessibility/reference)
67+
68+
## Hoe te testen
69+
70+
- Controleer voor elk interactief onderdeel wat de zichtbare naam is.
71+
- Gebruik een tool zoals de "accessibility pane" in Chrome of een screenreader om de toegankelijke naam te vinden.
72+
- Zorg dat de zichtbare naam onderdeel is van de toegankelijke naam.
73+
74+
## Tips
75+
76+
- Gebruik geen `placeholder`-attributen. Deze kunnen een toegankelijk naam geven, maar verdwijnen zodra de gebruiker ze het meest nodig heeft. Daarnaast zijn ze een bron van problemen met contrast en zorgen ze voor verwarring.
77+
- Gebruik zo weinig mogelijk `title`-attributen. Dit attribuut is een soort laatste redmiddel om iets een toegankelijke naam te geven. Het is de laatste in een rij met opties en geeft vaak verkeerde en onverwachte resultaten. Frames een naam geven is de uitzondering op deze regel.
78+
- Wees spaarzaam met het gebruik van `aria-labelledby` en `aria-label`. De eerste regel van ARIA-gebruik stuurt op zo min mogelijk ARIA-gebruik. HTML wordt beter ondersteund dan ARIA. Deze attributen zijn ook verreweg de makkelijkste manier om te falen voor dit succescriterium. Daarnaast worden deze attributen vaak slecht meegenomen bij veranderingen van code en door tools (en mensen) die vertalen.
79+
- Zorg voor unieke toegankelijke namen op een pagina. Dit maakt het gebruik van spraakbediening makkelijker.
80+
- Voor dit succescriterium is het ook belangrijk om tekst in afbeeldingen in het tekstalternatief te gebruiken. Zo kan de afbeelding als zichtbare naam gebruikt worden.
81+
82+
## Veelgemaakte fouten
83+
84+
### Fout: `aria-label` overschrijft de zichtbare naam
85+
86+
Het `aria-label`-attribuut overschrijft de zichtbare naam bij het bepalen van de toegankelijke naam. Waar men denkt de zichtbare naam aan te vullen, daar gaat deze juist verloren.
87+
88+
```
89+
<!-- Foute code, niet gebruiken ->
90+
<a href="#" aria-label=", opent externe website">Geef uw melding door</a>
91+
```
92+
93+
In dit voorbeeld wordt de toegankelijke naam ", opent externe website" in plaats van "Geef uw melding door, opent externe website".
4494

4595
## Gebruikersonderzoek
4696

‎docs/wcag/summaries/_2.5.3-summary.md‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
11
<!-- @license CC0-1.0 -->
22

3-
Voor bedieningselementen met een zichtbaar label, moet de zichtbare labeltekst aanwezig zijn in of overeenkomen met de toegankelijke naam.
4-
5-
Bijvoorbeeld: de toegankelijk naam van een link is de linktekst, of alternatieve tekst van een gelinkte afbeelding of een aria-label dat de inhoud van de linktekst overschrijft. De alt-tekst en het aria-label moeten overeenkomen of beginnen met de zichtbare tekst.
6-
7-
Een verschil in naam geeft problemen voor mensen die spraakbediening gebruiken. Als je zegt: "Klik Contact", dan zoekt de spraaksoftware naar een link met de toegankelijke naam "Contact". Hierdoor kan een gebruiker van spraakbediening makkelijker door een website navigeren.
3+
De zichtbare naam van een onderdeel moet terugkomen in de toegankelijke naam.

‎docs/woordenlijst/terms.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,29 @@
4444
}
4545
]
4646
},
47+
{
48+
"term": "Toegankelijke naam",
49+
"slug": "toegankelijke-naam",
50+
"definitions": [
51+
{
52+
"paragraph": "De toegankelijke naam is de werkelijke naam van een component. Dit is vaak (maar niet altijd) hetzelfde als de zichtbare naam."
53+
}
54+
],
55+
"sources": [
56+
{
57+
"name": "WCAG-succescriterium 2.5.3 Label in naam",
58+
"url": "https://nldesignsystem.nl/wcag/1.1.1/"
59+
},
60+
{
61+
"name": "Formulieren - Labels - Zichtbare naam label",
62+
"url": "https://nldesignsystem.nl/richtlijnen/formulieren/labels/zichtbare-naam"
63+
},
64+
{
65+
"name": "&lt;span lang=&#39;en&#39;&gt;Accessible Name and Description Computation&lt;/span&gt;",
66+
"url": "https://www.w3.org/TR/accname/"
67+
}
68+
]
69+
},
4770
{
4871
"term": "Proces",
4972
"slug": "proces",

0 commit comments

Comments
 (0)