Discourse - Helptext for input fields is not read aloud to screenreader users

[savitris]

Dit probleem kan op meerdere pagina's aanwezig zijn, waaronder:
Officiële bekendmakingen (Binnenlandse Zaken en Koninkrijksrelaties)

Probleembeschrijving:
Probleem: De helptekst voor de invoervelden in het Registreren Modal Formulier wordt niet voorgelezen aan screenreadergebruikers. Dit komt omdat deze tekst zich bevindt in een span die op geen enkele manier verbonden is met het invoerveld. Voor het E-mailadres invoerveld wordt de helptekst "Nooit openbaar zichtbaar." niet voorgelezen wanneer de gebruiker zich op dat invoerveld bevindt.

Het invoerveld heeft een ariadescribedby-attribuut dat het invoerveld verbindt met een div waar de foutmelding zal verschijnen als er een probleem is met de manier waarop het invoerveld is ingevuld. Voor het E-mailadres invoerveld verwijst ariadescribedby="account-email-validation" naar een div-element met dat id="account-email-validation" waarin de foutmelding wordt toegevoegd wanneer nodig.

Mogelijke verbeteringen: Een voorbeeldoplossing voor het E-mailadres invoerveld zou kunnen zijn om de id="account-email-validation" van de div te veranderen naar iets algemeens zoals id="account-email-additional-information", in dit element de helptekst "Nooit openbaar zichtbaar." te hebben en wanneer nodig, de foutmelding "Voer een e-mailadres in" bovenop de helptekst toe te voegen.

Issue #132 laat een alternatieve oplossing zien (met voorbeeldcode) waarin de span zijn eigen id heeft die ook wordt gekoppeld aan het invoerveld via de ariadescribedby, die twee id-verwijzingen heeft: één naar de helptekst en de andere naar de div waar de foutmelding zal verschijnen wanneer nodig.

Tot slot, zorg dat de "X" SVG die voor de foutmelding verschijnt wordt genegeerd door screenreadergebruikers (het wordt momenteel voorgelezen als "afbeelding") door aria-hidden="true" te gebruiken.

De verbetering van de helptekst (Nooit openbaar zichtbaar.) zelf voor dit invoerveld werd besproken in Issue #141

Referentiepolossingafbeelding:

Referentiecode:

<input id="new-account-email" class="ember-text-field ember-view" autofocus="autofocus" name="email" aria-describedby="account-email-validation" aria-invalid="" type="email">
<label class="alt-placeholder" for="new-account-email">
                  E-mailadres<span class="required">*</span>
                </label>
<div id="account-email-validation" class="tip bad ember-view">  <svg class="fa d-icon d-icon-times svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#times"></use></svg>
  Voer een e-mailadres in
</div>
<span class="more-info">Nooit openbaar zichtbaar.</span>

Gerelateerde WCAG:
WCAG 3.3.2 Labels or instructions
Level A

Referentieafbeelding:

Referentienummer: A144