Heading structuur van een meerstappenformulier

Ik heb een vraag over de heading structuur van een meerstappenformulier.

Op dit moment hebben we een template ontworpen waar we het volgende aanhouden qua headings.

H1: Titel van het gehele formulier
H2: Stap 1 van 4: Titel van betreffende stap
Daarna volgt het formulier.

In de binnen de <head> van de pagina zouden we het volgende opnemen: “Stap 1 van 4: Titel van betreffende stap - Titel van het gehele formulier - Naam organisatie”.</p> <p>Dit betekent dat de H1 in elke stap hetzelfde is, dus de naam van het formulier. De H2 en het<title> -element geven duidelijk aan welke stap het is en wat in die stap er wordt uitgevraagd.</p> <p>Hoe denken jullie hierover?</p> <p>Relevante succes criteria: <a rel="noreferrer nofollow" target="_blank" href="https://www.w3.org/WAI/WCAG22/Understanding/page-titled.html">https://www.w3.org/WAI/WCAG22/Understanding/page-titled.html</a> <a rel="noreferrer nofollow" target="_blank" href="https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html">https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html</a></p> <p><img referrerpolicy="no-referrer" src="https://github.com/WCAG-Audit-Discussions/NL-BE/assets/545207/cf54579c-d11f-4567-a80b-478898f666ff" alt="Screenshot van het ontwerp." /></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Veyfeyken"><img src="https://avatars.githubusercontent.com/u/870049?v=4" />Veyfeyken</a> commented <strong> 3 months ago</strong> </div> <div class="markdown-body"> <p>Prima. Waarom denk je dat hier iets mis mee is? Omdat je meerdere pagina's met dezelfde H1 hebt? </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Aircl0wn"><img src="https://avatars.githubusercontent.com/u/13189457?v=4" />Aircl0wn</a> commented <strong> 3 months ago</strong> </div> <div class="markdown-body"> <p>Ik zie hier ook geen probleem in. </p> <p>Het is voor de gebruikers duidelijk dat ze vanaf het begin in een proces komen en hoeveel stappen dit heeft. De titel laat duidelijk zien dat ze nog steeds in dit proces zitten. Niet in beeld, maar ik vermoed dat er ook een "Ga naar stap 2" knop oid is.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/julezrulez"><img src="https://avatars.githubusercontent.com/u/8790904?v=4" />julezrulez</a> commented <strong> 3 months ago</strong> </div> <div class="markdown-body"> <p>Het is een proces waar, als je iemand de link toestuurt, die waarschijnlijk nooit rechtstreeks naar een stap groter dan 1 kan sturen omdat de voorgaande velden eerst ingevuld moeten worden. Dus zie ik ook geen probleem om dezelfde kop aan te houden. </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/rianrietveld"><img src="https://avatars.githubusercontent.com/u/2351479?v=4" />rianrietveld</a> commented <strong> 3 months ago</strong> </div> <div class="markdown-body"> <p>Het is goed als bij een meerstappenformulier de H1 bij elke stap hetzelfde is en de H2 info bevat over waar je bent in het proces en het onderwerp van de betreffende stap. We hebben consensus? Mee eens: 👍 Niet mee eens: 👎</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jeffreylauwers"><img src="https://avatars.githubusercontent.com/u/545207?v=4" />jeffreylauwers</a> commented <strong> 3 months ago</strong> </div> <div class="markdown-body"> <blockquote> <p>Prima. Waarom denk je dat hier iets mis mee is? Omdat je meerdere pagina's met dezelfde H1 hebt? </p> </blockquote> <p>Ja precies. En dat hoopte ik dus af te vangen met de 'unieke' H2 en een combinatie in de title.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jeffreylauwers"><img src="https://avatars.githubusercontent.com/u/545207?v=4" />jeffreylauwers</a> commented <strong> 3 months ago</strong> </div> <div class="markdown-body"> <blockquote> <p>Ik zie hier ook geen probleem in. </p> <p>Het is voor de gebruikers duidelijk dat ze vanaf het begin in een proces komen en hoeveel stappen dit heeft. De titel laat duidelijk zien dat ze nog steeds in dit proces zitten. Niet in beeld, maar ik vermoed dat er ook een "Ga naar stap 2" knop oid is.</p> </blockquote> <p>Dank. Ja een knop met 'Volgende stap' of zelfs iets als 'Volgende stap: Uw gegevens' zou dan onderaan staan.</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

WCAG-Audit-Discussions / NL-BE

Heading structuur van een meerstappenformulier #61