Pourquoi mettre en place l'atttribut autocomplete :

• Permettre aux navigateurs de remplir automatiquement le champ à la place de l'utilisateur
• Ajoute un élément différenciant sur les champs de formulaire, cela pourra servir pour un outils tier, la mise en place de css...

Cas général

L'attribut alt doit être renseigné à vide.

Cas pour le SEO (référencement Naturel)

L'attribut alt doit être renseigné avec un texte optimisé pour le SEO.
Il est nécessaire d'ajouter l'attribut aria-hidden='true' pour permettre aux lecteurs d'écran d'ignorer l'image.

L'attribut alt doit être renseigné avec un texte porteur d'informations.

A partir du moment où une image comporte une légende :

• la balise html figure doit être utilisée pour englober à la fois l'image & sa légende.
  • on doit lui adjoindre un role='figure' .
  • un attribut aria-label doit être renseigné et correspondre à la valeur du figcaption , c'est à dire soit le :
    • texte légende + crédit photo (si les 2 sont renseignés)
    • texte légende (si seul)
    • crédit photo (si seul)
• la balise html figcaption doit englober la légende.

Remarque :

Le altest obligatoire même si l'image est décorative, dans ce cas indiquer par exemple "illustration" dans le alt si la légende n'apporte pas d'information pertinente (ex: copyright). Si il y a plusieurs images avec légende dans la page, incrémenter la valeur d"'illustration" = illustration 1, illustration 2. A adapter en fonction du contexte par le contributeur

Exemple de structure valide pour une image et sa légende :

Le champ de formulaire peut être un :

• input
• textarea
• select

Principes de base :

• Le label doit être associé à un champ de formulaire et réciproquement. C’est à dire que l’un ne va pas sans l’autre.
• Le label est utilisé uniquement dans un formulaire et sert à nommer un champ de formulaire.
• Le label doit être pertinent et doit permettre de comprendre la fonction du champ auquel il est rattaché.
• Le label ne doit pas être utilisé pour afficher un simple texte.

L'intitulé du Label doit être pertinent & explicite :

• pas d’abréviation
• pas de jargon ou de vocabulaire trop spécifique
• ne doit pas être trop long

Comment utiliser correctement un label ?

Pour associer correctement votre label et votre champ input par exemple, nous allons utiliser l'attribut for :
Pour associer correctement votre input et votre champ label, nous allons utiliser l'attribut id :

C'est quoi ? Pourquoi faire ?

Pour répondre aux besoins d'accessibilité (critères 12.6 et 12.7) des "liens d'évitements" sont nécessaires. Leurs objectifs est simplement de naviguer dans la page en évitant une partie du contenu (le contenu est séparé dans différentes zones).

Pour la zone de contenu principale (main) il faut obligatoirement prévoir un lien d'évitement (avec ou sans landmark sur cette zone).

Pour les autres zones il y a plusieurs assemblages possibles :

• lien d'évitement
• landmark
• lien d'évitement + landmark

Nous préconisons la mise en place systématique des landmarks sur les différentes zones. Pour les liens d'évitements (en plus de celui vers la zone principale) c'est à voir avec les UX.

Liste des landmarks:

• role='banner'
• role='navigation'
• role='main'
• role='contentinfo'
• role='search'

Le code est à placer comme premier élément du body.

Les liens ne sont visibles que via la prise de focus.

Prévoir un role='navigation' + un aria-label pour donner du contexte.

Il faut aussi prévoir des id sur nos landmarks pour bénéficier de la gestion d'ancre native.

• Avec des champs de type radio (min 2)
• Avec des champs de type checkbox (min 2). Dans le cas avec un seul checkbox pas de structure regroupé
• Avec plusieurs champs se rapportant à la même question (min 2). Exemple : 3 champs texte pour renseigner un date ou j'ai plusieurs bénéficiaire (personne A et B) et des questions identiques (prénom / nom)

Il y a plusieurs structure disponible pour mettre en palce un champ regroupé :

• Structure native avec les balises : fieldset legend
• Structure aria avec des attributs comme : role="radiogroup" role="group"

Nous avons fait le choix de la structure aria qui est plus souple que la structure native.

Il est possible d'avoir des informations complémentaire dans nos champs regroupés. La structure va donc évoluer, certains éléments devront être techniquement reliés.

Les nouveautées :

• Ajout d'un .help-input
• Ajout d'un .information
• Ajout d'un .action-modal

Le piège :

Tout d'abord ne pas confondre l'attribut autocomplete et un composant combobox.

L'attribut autocomplete permet à votre navigateur de proposer une autocompletion alors qu'un composant combobox va proposer une autocompletion avec un service extérieur (ex: une api pour retrouver son addresse).

La solution technique, partie HTML :

• Utilisation d'un champ de saisie texte standard input ou textarea avec :
  • role='combobox'
  • aria-autocomplete='list'
  • aria-expanded='true/false'
  • autocomplete="XXX" (pour plus d'info sur la valeur à choisir doc attribut-autocomplete)
• Une liste ul/ol pour la présentation des propositions avec :
  • role='listbox'
  • aria-label='Suggestions de saisie : (contexte différenciant)'
• Chacune des propositions seront dans un li avec :
  • role='option'
  • aria-selected='true/false'
  • tabindex='-1'
• Un compteur de résultat sera présent, le texte sera injecté via js dans une div avec :
  • aria-atomic='true'
  • aria-live='polite'

La solution technique, partie JS :

• Gestion de la valeur aria-expanded='true/false' à l'ouverture/fermeture de la liste de résultat
• Incrémentation du compteur en fonction du nombre de résultat, uniquement quand la liste de résulat avec visible
• Navigation entre les résultats via les flèches directionnelles haut/bas
  • Replacement du focus sur le résultat current
  • Gestion de la valeur des aria-selected='true/false'
• La solution de gestion via aria-activedescendant n'a pas été retennu car moins robuste que la solution avec un focus natif
• Lors de la navigation, il est possible de reprendre la saisie (sans action supplémentaire)
• Une tabulation fera sortir le focus du champ et entrainera la fermeture de la liste de résultat
• La selection d'un résultat s'effectura via la touche enter ou un click
  • Fermeture de la liste de résultat
  • Retour du focus dans le champ de saisie
  • Mise à jour de la valeur du champ de saisie avec le résultat choisi

Principes de base :

• une sémantique adaptée (cf. lien ou bouton)
• une prise de focus visible
• un libellé explicite (cf. libelles lien) (cf. libelles bouton)

Un cas d'exception : mon lien / bouton se trouve dans une zone de texte.

Dans ce cas de figure je dois appliquer une représentation graphique différenciante (exemple: le soulignement)

Si ma représentation graphique différenciante est uniquement portée par une couleur alors je dois appliquer les 3 critères suivant (10-6):

• un contraste d'au moins 3:1 entre le texte normal et le lien / bouton
• une indication visuelle autre que la couleur, au hover
• une indication visuelle autre que la couleur, au focus

Principes de base

• Les notifications sont persistantes (pas de limite de temps)
• Les notifications seront gérées dans un centre de notification .wrapper-notification
  • role='region'
  • aria-label='Indique le nombre de notification' (gestion dynamique)
  • S'il n'y a pas de notification, le .wrapper-notification n'est pas dans le DOM. Il est injecté en même temps que la notification.

Comportement :

• Ajout d'une notification
  • Si le focus est déjà positionné dans la zone de notifications :
    • Le focus n'est pas déplacé
    • Le compteur de notification est mis à jour : aria-label
  • Si le focus n'est pas positionné dans la zone de notifications :
    • Le focus est déplacé sur la nouvelle notification
    • Le compteur de notification est mis à jour : aria-label
• Fermeture d'une notification
  • Replacement du focus
    • Soit repositionner le focus sur l'élément déclencheur
    • Soit repositionner le focus sur l'élément permettant une bonne reprise de la navigation (main, h1, barre d'étape)
    • Le replacement du focus peut changer en fonction de la navigation de l'utilisateur. Si l'utilisateur sort du centre de notification, alors le retour prévu sur l'élément déclencheur change.
      • S'il y a plusieurs notifications, le focus est placé sur le centre de notification.
      • Si c'est la dernière notification, le focus est replacé sur la balise main.
  • Le compteur de notification est mis à jour : aria-label
    • Lorsqu'il n'y a plus de notification, .wrapper-notification est supprimé du DOM.

Un exemple valide de structure pour la mise en place d'une notification

• Le message d'erreur doit être situé après le champ de formulaire et doit être explicite.
• Le message d'erreur doit être relié via l'attribut id et l'attribut aria-describedby qui lui, doit être renseigné sur le champ input .
• Il est nécessaire d'ajouter l'attribut aria-invalid='true' pour bien signifier que le champ input est en erreur.
• Une classe .has-error est associée à la classe .form-group .
• Une classe .help-block est ajoutée à la balise p contenant le message d'erreur.

Attention, en plus de la structure suivante, il est nécessaire de gérer le placement du focus dans le champ avec l'apparition du message d'erreur.

Voici un exemple valide de structure pour la mise en place d'un message d'erreur

• À l'ouverture de la modale, le focus est déplacé pour continuer la lecture avec le contenu de la modale.
• Après l'ouverture, le focus doit être limité aux éléments à l'intérieur de la modale.
• La fermeture s'effectue soit via un element button présent dans la modale, soit via la touche echap du clavier.
• À la fermeture de la modale, le focus est placé sur l'élément ayant permis son ouverture.
• Quand la modale est fermée, elle ne doit pas être lisible.

1. Conteneur principal
   • role='dialog'
   • Un lien technique avec le titre aria-labelledby='id_Titre'
   • Permettre le placement de focus avec un tabindex='-1'
   • aria-modal='true'
2. Conteneur secondaire
   • role='document'
3. Conteneur .modal-content
   1. Conteneur .modal-header
      • S'il y a un bouton de fermeture, il doit être positionné en première position dans le conteneur role='document'.
      • Le titre doit être dans une balise sémantique adaptée de préférence h1, la modale représente un nouveau contexte le h1 est plus cohérent. Néanmoins il est possible d'avoir un autre niveau de titre. Ne pas oublier l'id pour le lien technique avec aria-labelledby
   2. Conteneur .modal-body (RAS)
   3. Conteneur .modal-footer (RAS)