Drupal heeft een goede reputatie op het gebied van gebruiksvriendelijkheid en toegankelijkheid. In deze serie van zes blogs kijken we naar hoe Drupal het doet en waar nog verbeterpunten liggen. Na deel 3 over tabellen, kijken we in dit vierde deel naar de toegankelijkheid en WCAG-ondersteuning van formulieren in Drupal, zoals core die aanbiedt. En met een schuin oog kijken we ook naar de Webform-module. Het doel van Drupal is om ondersteuning te bieden voor WCAG 2.1 AA. We gaan kijken in hoeverre dat al lukt.
Dit is het vierde deel, uit een serie van zes.
Toegankelijkheid is juist bij het invoeren en insturen van formulieren ontzettend belangrijk, dit is immers de manier om acties uit te voeren op het web. Je wilt iets bestellen (een fysiek product of een paspoort) of contact opnemen met een organisatie.
Drupal core kan zelf formulieren genereren. De veelgebruike Webform-module maakt gebruik van deze functionaliteit en voegt daar heel veel mogelijkheden aan toe. Omdat Drupal aangeeft dat het als doel heeft om te voldoen aan de WCAG 2.1 AA met betrekking tot toegankelijkheid, zou dit ook moeten gelden voor formulieren vanuit core en Webform.
En dat zit goed in elkaar.
<form action="/contact/feedback" method="post">
<label class="form-required" for="edit-subject-0-value">Subject</label>
<input type="text" id="edit-subject-0-value" name="subject[0][value]" value="" required="required" aria-required="true" />
<input type="submit" id="edit-submit" name="op" value="Send message" />
</form>Een <form> heeft een action– en een method-attribuut en een veld in het formulier heeft een label dat via het for-attribuut aan het id van het veld gerelateerd is. Buttons zijn van het correcte type, met ook weer de correcte attributen. Voor de verschillende veldtypes is dit binnen Drupal goed geïmplementeerd. Ook als er groepen van velden worden aangemaakt via een <fieldset>, wordt daar een <legend> aan toegevoegd.
Er is echter een punt waar het mis gaat; het aangeven dat invoer van een bepaald veld vereist is. Dit kan volgens de WCAG op twee manieren. Door een asterisk te plaatsen achter het label van een verplicht veld en boven het formulier aan te geven wat de betekenis is van de asterisk. Of door achter het label tekstueel aan te geven dat het veld verplicht is.
Op dit moment plaatst Drupal met behulp van CSS een asterisk, zonder uitleg. Dit heeft twee nadelen.
Omdat Webform gebaseerd is op Drupal core, komt dit punt ook naar voren in de Webform-module.
Hiervoor is wel al een issue aangemaakt op drupal.org: Drupal should not use full CSS required marker in forms according to WCAG 2.0. Als deze wijziging wordt doorgevoerd wordt in de HTML de tekst “(required)” toegevoegd aan labels van verplichte velden.
<label for="edit-subject-0-value">Subject <span class="js-required hidden"
aria-hidden="true">(required)</span></label>Zonder CSS wordt in het label dan aangegeven dat een veld verplicht is.
Maar de toegevoegde tekst “(required)” wordt voor iedereen weggehaald (zowel visueel als voor screen readers). Dus de meerwaarde hiervan is beperkt. Het advies is om geen gebruik te maken van een astrisk, maar de tekst “(required)” altijd zichtbaar toe te voegen.
In combinatie met issue Forms with required fields marked by asterisk do not have text explaining what the asterisk means, waarbij de asterisk vóór het formulier wordt toegelicht, gaat dit wel aan de WCAG voldoen.
Als het gaat om het genereren van formulieren klopt de HTML-structuur, maar Drupal kan hier nog verbeteringen doorvoeren. Dat gebeurt ook, in de volgende versie van Drupal wordt de manier waarop verplichte velden worden aangegeven aangepast.
Neem contact op en laat een volledige audit uitvoeren. Samen kijken we hoe we dit voor jouw specifieke implementatie op kunnen lossen.
