Abbr

Par Franck, . Lien permanent Brèves

L’élément HTML abbr ne fonctionne pas (ni au clavier, ni via écran tactile, ni pour les lecteurs d’écran, ni au pilotage à la voix).

Il est donc recommandé de ne pas l’utiliser. Si des abréviations doivent être explicitées, faites-le plutôt en mettant cela entre parenthèses après l’abréviation. 💡

Exemple : RGAA (Référentiel général d’amélioration de l’accessibilité)

Using abbr Element with title Attribute

Julie Moynat, Mastodon

Au moins c’est clair, il va falloir passer à autre chose pour indiquer, dans l’administration de Dotclear1, qu’un champ est requis.

Pour l’instant le markup HTML est le suivant :

<p>
  <label for="blog_name" class="required"><abbr title="Champs requis">*</abbr> Nom du blog :</label>
  <input type="text" name="blog_name" id="blog_name" value="Open Eyes" maxlength="255" size="30" required="" placeholder="Nom du blog" lang="fr" spellcheck="true">
</p>

Il faut donc :

  • supprimer l’abréviation qui ne sert à rien
<p>
  <label for="blog_name" class="required">Nom du blog :</label>
  <input type="text" name="blog_name" id="blog_name" value="Open Eyes" maxlength="255" size="30" required="" placeholder="Nom du blog" lang="fr" spellcheck="true">
</p>
  • Ajouter un astérisque après (ou avant finalement, au choix) le libellé, coloré en rouge, pour indiquer ça visuellement
label.required:after {
  content: " *";
  color: red;
}

label.required:before {
  content: "* ";
  color: red;
}

Sachant que le libellé est déjà en gras c’est probablement suffisant, surtout que dans tous les cas le champ de saisie associé est affublé de l’attribut required, qui est lu/indiqué (d’après ce que j’ai compris) par les lecteurs d’écran ; sans compter le mécanisme intégré aux navigateurs qui redonnera le focus au premier champ requis et non rempli du formulaire à la soumission.

Reprise de ce billet compte tenu des corrections et suggestions fournies par Julie Moynat sur Mastodon, ici et là, et par mes chers commentateurs ; merci à vous toustes :-)

On oublie la partie CSS et on repasse au HTML pour l’astérisque pour lequel on fournira une indication préalable en début de formulaire :

<p>Les champs précédés d'un <span class="required">*</span> sont obligatoires.</p>

Quant au champ proprement dit il deviendrait :

<p>
  <label for="blog_name" class="required"><span>*</span> Nom du blog :</label>
  <input type="text" name="blog_name" id="blog_name" value="Open Eyes" maxlength="255" size="30" required="" placeholder="Nom du blog" lang="fr" spellcheck="true">
</p>

J’encadre l’astérisque par un span ce qui me permettra de le styler spécifiquement :

label.required span, span.required {
  color: red;
}

  1. Et peut-être aussi du côté des thèmes, pour la saisie des commentaires. ↩︎

Ajouter un rétrolien

URL de rétrolien : https://open-time.net/trackback/15961

Haut de page