Codez un site web accessible avec HTML & CSS

Première étape de notre tour dédié à l’accessibilité et aux interactions : les formulaires. 

En effet, les formulaires sont omniprésents sur la toile (ils sont certainement tout autant présents que les images). C’est notamment grâce à ces derniers que nous pouvons :

• nous inscrire et nous connecter sur nos sites préférés ; 

• rechercher des informations telles qu’un article ou une recette de cuisine ; 

• créer du contenu via des espaces d’administration ; 

• envoyer des messages privés directement depuis un site.

Pour résumer, les formulaires sont utilisés dans de nombreux contextes. Ils doivent donc être accessibles, compréhensibles et utilisables pour et par tous.

À présent, nous allons voir :

• comment construire un formulaire accessible ; 

• comment indiquer le type et la forme des informations attendues dans les différents champs ;

• comment donner du feedback aux utilisateurs.

Établissez la structure de votre formulaire

Avant de commencer, posez-vous la question suivante : quel est l’impact d’un formulaire bien construit sur l’accessibilité ?

Quelle importance pour l’accessibilité ?

Sachez que les publics impactés par l’accessibilité dans les formulaires sont nombreux. On peut penser :

• aux personnes souffrant de troubles de la vision (des personnes daltoniennes aux personnes ayant des problèmes plus graves) ;

• aux personnes ayant des problèmes de motricité - les boutons doivent donc être cliquables via des labels (notamment les plus petits) ;

• aux personnes utilisant des technologies d'assistance qui ont besoin de comprendre les labels et champs associés.

En plus des personnes visées, il faut aussi penser à la grande variété de champs de formulaires possibles. On peut, par exemple, penser au champ de type “range”, “date”, etc.

L'objectif ici est de vous montrer comment intégrer ses formulaires en ayant une démarche d'accessibilité.

Découvrez le squelette de notre formulaire

Voici la base de formulaire que nous allons utiliser :

<form method="post" action="traitement.php">
   <fieldset>
       <legend>Vos coordonnées</legend> <!-- Titre du fieldset -->
       <label for="nom">Quel est votre nom ?</label>
       <input type="text" name="nom" id="nom" />
       <label for="prenom">Quel est votre prénom ?</label>
       <input type="text" name="prenom" id="prenom" />
        <label for="email">Quel est votre e-mail ?</label>
       <input type="email" name="email" id="email" />
   </fieldset>
    <fieldset>
       <legend>Votre souhait</legend> <!-- Titre du fieldset -->
        <p>
           Faites un souhait que vous voudriez voir exaucé :
           <input type="radio" name="souhait" value="riche" id="riche" /> <label for="riche">Etre riche</label>
           <input type="radio" name="souhait" value="celebre" id="celebre" /> <label for="celebre">Etre célèbre</label>
           <input type="radio" name="souhait" value="intelligent" id="intelligent" /> <label for="intelligent">Etre <strong>encore</strong> plus intelligent</label>
           <input type="radio" name="souhait" value="autre" id="autre" /> <label for="autre">Autre...</label>
       </p>
        <p>
           <label for="precisions">Si "Autre", veuillez préciser :</label>
           <textarea name="precisions" id="precisions" cols="40" rows="4"></textarea>
       </p>
   </fieldset>
</form>

Ce formulaire comporte déjà des éléments le rendant accessible. En effet, on note l’utilisation des balises :

• label , permettant de faire le lien avec sa balise  input  associée. Les attributs  for  et  id  servant à les associer ;

• fieldset  et  legend  utilisés pour grouper des éléments d’un formulaire, ici les coordonnées ;

• placeholder  pour renseigner visuellement quel type de données sont demandées. 

Ce formulaire propose déjà une bonne base pour garantir l’accessibilité à une bonne partie de nos utilisateurs. Alors quels sont les moyens complémentaires à mettre en place ?

Utilisez les attributs ARIA pour grouper les contrôles

Vous avez pu voir que la balise fieldset  permettait de regrouper des éléments entre eux. Cela dit, il existe une autre méthode qui tire parti des attributs ARIA.

En effet, l’attribut  role=group  va vous permettre la même chose. Vous utiliserez l’attribut  aria-labelledby  pour ajouter un titre à ce groupe d’éléments.

Concrètement, l’utilisation de l'une ou l'autre de ces deux méthodes dépendra du contexte de développement (par exemple, si vous utilisez un framework ou non).

<div role="group" aria-labelledby="coordonnees">
   <p id="coordonnes">Vos coordonnées</p> <!-- Le groupe réalisé avec des div et les attributs ARIA -->
 
   <label for="nom">Quel est votre nom ?</label>
   <input type="text" name="nom" id="nom" />
 
   <label for="prenom">Quel est votre prénom ?</label>
   <input type="text" name="prenom" id="prenom" />
 
   <label for="email">Quel est votre e-mail ?</label>
   <input type="email" name="email" id="email" />
 
</div>

Dans l’exemple ci-dessus, nous regroupons des balises ayant une thématique commune. Bien que nous soyons dans une  div  , nous arrivons à indiquer leur sens commun grâce aux attributs ARIA.

Donnez des instructions sur les données attendues

Pour aller plus loin côté accessibilité, nous allons ajouter des informations complémentaires pour aider nos utilisateurs à compléter le formulaire.

Analysez la balise label

Cette balise est compatible avec la plupart des navigateurs et des technologies d'assistance. Cela dit, dans certaines maquettes, et comme dans l’exemple ci-dessous, il arrivera parfois qu’il n’y ait pas de  label  visible à l’écran.

Sachez que dans ce type de cas, un  label  reste obligatoire, même si ce dernier n’est pas visible à l’écran. La meilleure méthode est donc de le masquer via le CSS.  

<div role="group" aria-labelledby="coordonnees">
   <p id="coordonnes">Vos coordonnées</p> <!-- Le groupe réalisé avec des div et les attributs ARIA -->
 
   <label class="hidden" for="nom">Quel est votre nom ?</label>
   <input type="text" name="nom" id="nom" />
</div>

.hidden {
   height: 1px;
   left: 0;
   overflow: hidden;
   position: absolute;
   top: -10000px;
   width: 1px;
}

Dans l’exemple ci-dessus, nous lions à la balise  input  une balise label que nous masquons de l’écran via la classe CSS  .hidden  . 

Autre chose, pensez à utiliser la pseudo-classe :focus  dont nous avons parlé précédemment.

Utilisez les attributs ARIA

Les labels permettent de donner une information de base concernant la nature et le type d’information attendu dans un champ. Cela dit, en tirant parti des attributs ARIA, vous pouvez aller plus loin en décrivant le format attendu.

Dans le cas d’une date, par  exemple, vous pouvez utiliser les attributs  aria-labelledby et  id  pour ajouter des informations complémentaires.

<label id="birth-date" for="birth-date">Date de naissance :</label>
<span>
   <input type="text" name="birth-date" id="birth-date" aria-labelledby="birth-date" aria-describedby="birth-date-format" placeholder="JJ/MM/YYYY">
   <span id="birth-date-format" class="hidden">JJ/MM/YYYY</span>
</span>

Dans l’exemple ci-dessus :

• le format de date attendu sera visible via le placeholder, mais aussi via la balise span (celle-ci n’étant “visible” que pour les technologies d'assistance) ;

• les attributs  aria-labelledby  et  aria-describedby  permettent d’assurer la cohésion entre les éléments.

Validez les données et donnez du feedback

Quand un utilisateur soumet un formulaire, il peut arriver qu’il y ait des erreurs. Il va donc falloir indiquer à vos utilisateurs quels champs contiennent des erreurs et pourquoi.

Validez vos données avec ARIA

Les attributs ARIA offrent une solution idéale pour les formulaires : quelques attributs bien utilisés permettent d’indiquer l’état de votre application. :)

Indiquez qu’un champ est obligatoire

Il arrive fréquemment qu’un champ d’un formulaire (ou plusieurs) soit obligatoire. Par exemple, si vous vous inscrivez à une newsletter, le champ e-mail est requis. 

Vous pouvez indiquer qu’un champ est obligatoire via les attributs : 

• required  – provenant du HTML5, il permet d’indiquer à TOUS vos utilisateurs que le champ est obligatoire ;

• aria-required=true – informe les utilisateurs recourant aux technologies d'assistance que ce champ est obligatoire.

Par exemple, si vous utilisez un input type range  , vous pouvez indiquer le minimum et le maximum via les attributs  min  et  max  . 

Indiquez qu’un champ est invalide avec ARIA

Une fois qu’un utilisateur a soumis un formulaire et que des erreurs sont présentes, vous allez pouvoir indiquer qu’un ou plusieurs champs sont invalides grâce à l’attribut  aria-invalid  .

Cet attribut peut avoir comme valeur  true  ,  false  , mais peut aussi indiquer que l’erreur est de type grammatical ou de prononciation, avec respectivement les valeurs  grammar  et  spelling  .

Le bouton Validation

Avant de poursuivre, petit paragraphe concernant la validation des formulaires.

Vous pouvez utiliser aussi bien une balise  bouton  que input  . Cela dit, il faudra que cette dernière ait l’attribut  type=submit  . Cela permettra d’indiquer que cette balise permet la soumission d’un formulaire.

Tirez parti d’un langage de programmation pour aller plus loin

Pour finir cette section, une fois le formulaire soumis, les données seront validées côté serveur. Si ces dernières ne sont pas conformes aux attentes, vous devrez souvent côté front-end afficher un message d’erreur.

Voici un exemple de message d’erreur :

<div class="col-md-3 mb-3">
   <label for="validationCustom05">Code postal</label>
   <input type="text" class="form-control" id="validationCustom05" required>
   <div class="invalid-feedback">
       Veuillez renseigner un code postal valide
   </div>
</div>

Pour ce dernier, vous n’avez pas grand-chose à faire côté HTML. Vous allez simplement devoir “jouer” avec le CSS et la propriété  display .

Tonight In Gotham : Implémentez le formulaire de recherche

Notre projet “Tonight In Gotham” comporte un formulaire : la barre de recherche dans le header de la page.

Comme vous pouvez le voir, ce formulaire intègre plusieurs des règles vues un peu plus haut :

• Il dispose d’un état au focus et au hover, afin de donner un feedback visuel.

• Le label est uniquement visible pour les technologies d'assistance grâce à la classe  sr-only . Cette classe comporte des règles qui masquent visuellement le label.

De plus, le formulaire est englobé grâce à la balise  form  . Cette dernière permet de le signifier aux utilisateurs, et notamment ceux utilisant des technologies d'assistance.

Enfin, il dispose de l’attribut  role=”search” . Cela permet d’indiquer que ce formulaire est dédié à une fonctionnalité de recherche.

Pour finir, l’icône “loupe” utilise du SVG et est masquée aux technologies d'assistance grâce à l’attribut  aria-hidden=”true” . Cela permet de ne pas complexifier la lecture de cette dernière par les technologies d'assistance. 

En résumé

• Comme toujours, les bonnes démarches d’accessibilité commencent par la bonne utilisation des balises HTML.

• Le label, même s’il n’est pas visible à l’écran, doit être lié à un champ input. Chaque élément du formulaire doit avoir une balise  label  associée.

• Les attributs  aria  sont là pour vous aider. Vous pouvez utiliser les  aria-required  et  aria-invalid  pour indiquer l’état du formulaire.

Vous avez vu dans ce chapitre comment faire pour créer des formulaires accessibles et utilisables par tous. Nous allons maintenant aborder un autre chapitre très important, qui sera dédié aux fenêtres modales et aux carrousels. À tout de suite !