Fiche pratique

6 mars 2023

Bonne pratique
Environnement de test
Tabulation
Base HTML
Autre balise HTML
- Citation
- iframe
- Image
- Vidéo
- Tableaux
CSS
Lien
Formulaire
Aria
Laisser le contrôle à l'utilisateur

Bonne pratique

Privilégier les éléments natifs HTML
Ne modifier la sémantique des éléments natifs où sinon vérifié qu'il n'y est pas de conséquence
S’assurer que les composants sont opérables au clavier et à la souris
S’assurer que chaque composant a un nom correctement lié au composant
Tester les composants, voir les environnements de test
Passer la page au validateur du w3c

Environnement de test

Environnement de bureau
Technologie d’assistance	Navigateur
NVDA (dernière version)	Firefox
JAWS (version précédente)	Firefox
VoiceOver (dernière version)	Safari

Environnement mobile - Combinaison 1
Système	Technologie d’assistance	Navigateur
iOS	VoiceOver (dernière version)	Safari

Environnement mobile - Combinaison 2
Système	Technologie d’assistance	Navigateur
Android	Talkback (dernière version)	Chrome

Il est fortement conseillé de tester dans les deux environnements mobile

Tabulation

Ordre de tabulation cohérent avec le code ; titre avant paragraphe, ordre des conteneurs ( vérifier avec le site sans styles)
Pas de piège au clavier
Ne jamais utiliser des tabindex supérieurs à 0, laissez le navigateur faire

tabindex="0"
Permets de capturer le focus et être atteint via la navigation au clavier
Inclut l'élément dans le parcours séquentiel de tabulation pour un élément qui ne prend pas le focus, une div par exemple
tabindex="-1"
- L'élément peut capturer le focus mais ne peut pas être atteint via la navigation au clavier
- Exclu du parcours séquentiel un élément qui prend le focus (lien, button…)
- Permets à l'élément ne prenant pas nativement le focus de le recevoir (méthode javascript focus)
- Attention l'élément restera accessible par les techniques d'assistance (différent d'aria hidden="true")
Accès au contenu additionnel affiché doit être atteint au clavier
La zone doit rester visible tant que le focus se trouve dans l'élément
Penser à mettre un bouton fermer pour pouvoir revenir à l'endroit initial
Désactiver ou permettre de configurer les raccourcis

Base HTML

Ordre des éléments logique (titre avant paragraphe) abusé du flex order ou grid
Respect de la sémantique HTML

<!DOCTYPE html>
<html lang="fr">
<title>Titre pertinents et unique</title>
<header role="banner"></header>
<main id="contenu" role="main" tabindex="-1"></main>
<nav role="navigation"></nav><!--navigation principale et secondaire-->
<aside role="complementary"></aside>
<footer role="contentinfo"></footer>
<div role="search">
    <form></form>
</div>

```
<h2 role="heading" aria-level="3">
```

<nav role="navigation" aria-label="Accès rapide">
    <a class="lien-evitement" href="#contenu">
        Aller au contenu
    </a>
</nav>
.lien-evitement {
    position:absolute;
    left:-99999rem;
}
.lien-evitement:focus {
    left:0
}

Au moins 2 systèmes de navigation parmi :
- navigation principale
- plan du site : non exhaustif autorisé
- moteur de recherche : exhaustif des pages
Présentation cohérence et emplacement identique sur chaque page
```
<nav role="navigation" aria-label="Menu de navigation">
    ...
</nav>
```
nav réservé aux zones de navigation principale et secondaire :
- menu principal
- menu de sous-rubrique
- navigation dans les collections de pages
- navigation dans les résultats de recherche
- le Fil d'ariane
- les liens d’évitement
Changement de langue : ajouter l'attribut lang sur l’élément ou un parent.
Changements de sens de lecture : dir

Modal : Garder le focus à l'intérieur !

<div aria-labelledby="title" tabindex="-1" role="dialog">
    <button title="Fermer"><span aria-hidden="true">X</span></button>
    <h1 id="title">Alan Turing</h1>
    content...
</div>

Autre balise HTML

Citation

on évite <q>car mal restitué

<blockquote>
    <p>Aimer, ce n'est pas se regarder l'un l'autre,
        c'est regarder ensemble dans la même direction.</p>
    <cite>Antoine De Saint-Exupéry</cite>
</blockquote>

iframe

<iframe title="Publicité"></iframe>

<!--Cadres techniques (Google Analytics, etc.)-->
<iframe aria-hidden="true"></iframe>

Image

<!--décorative-->
<img src="image.png" alt="" />
<img src="image.png" aria-hidden="true"/>
<img src="image.png" role="presentation"/>
<svg aria-hidden="true"></svg>

<!--porteuses d’information => Nom accessible /!\ Algorithme de calcul -->
<img src="image.png" alt="foobar" />
<img src="image.png" title="foobar" />
<img src="image.png" aria-label="foobar" />
<img src="image.png" aria-labelledby="desc" /><p id="desc">foobar</p>
<svg role="img" aria-label="foobar">…</svg>
<svg role="img" aria-labelledby="desc">…</svg><p id="desc">foobar</p>

<!--Texte en images ou grande description-->
<img src="img.png" alt="infographie" />
<a href="description.html">Description détaillée de l'infographie</a>

<img src="img.png" alt="infographie" />
<button aria-expanded="false">Description détaillée de l'infographie</button>

<!--Légendées sans alt-->
<figure role="group|figure" aria-label="Légende de l’image">
    <img src="…" alt="" />
    <figcaption>
        Légende de l’image
    </figcaption>
</figure>

<!--Légendées avec alt-->
<figure role="group|figure" aria-label="alt-image Légende de l’image">
    <img src="…" alt="alt-image" />
    <figcaption>
        alt-image Légende de l’image
    </figcaption>
</figure>

<!--Image map-->
<img src="" alt="Carte de France" usemap="#LIEUX" />
<map id="lieux" name="LIEUX">
    <area href="regi42" alt="Alsace">
    <area href="regi53" alt="Bretagne">
</map>

Captcha : porposer une alternative sonore ou mieu email/sms (captcha de google conforme)
```
<img src="" alt="Code de confirmation à saisir"/>
```

Vidéo

Contrôles obligatoires, Clavier/souris, Nom pertinant, maj des data timing...
Alternatives : Transcription textuelle, sous-titre, Audiodescription
Player accessible : Able Player, MFP Player, Plyr, BrightCove, YouTube

Tableaux

Titré avec caption ou aria-labelledby="id"

Tableau complexes : ajoute un résumé de l’organisation du tableau pour tous (afficher/masquer)

<caption>
    Figure 2 - Répartition des déchets non dangereux non minéraux hors boues de l’industrie
    manufacturière par type en 2016
    <button type="button" aria-expanded="false">Résumé de l’organisation du tableau</button>
    <span class="hide">
        Les industries agroalimentaires (IAA) et les industries manufacturières (hors IAA)
        sont présentées sur 2 colonnes, avec, pour chacune d’elles la quantité en milliers
        de tonnes le pourcentage. Une troisième colonne présente le total des deux
        industries, en milliers de tonnes et en pourcentage.
    </span>
</caption>

Proposer une alternative pour tous (afficher/masquer) en mode liste par exemple
Déclaration des entêtes <th scope="[col|row]">

Cellules d’en-têtes

<tr>
    <td aria-hidden="true"></td>
    <th id="entete1" colspan="2">Industries agroalimentaires (IAA)</th>
    <th id="entete2" colspan="2">Industries manufacturières (hors IAAA)</th>
    <th id="entete3" colspan="2">Ensemble</th>
</tr>
<tr>
    <td aria-hidden="true"></td>
    <th id="entete4">Quantités (en milliers de tonnes)</th>
    <th id="entete5">en %</th>
    <th id="entete6">Quantités (en milliers de tonnes)</th>
    <th id="entete7">en %</th>
    [...]
</tr>
<tr>
    <td>Déchets banals</td>
    <td headers="entete1 entete4">1 147</td>
    <td headers="entete1 entete5">31</td>
    <td headers="entete2 entete6">9 795</td>
    <td headers="entete2 entete7">97</td>
    [..]
</tr>

CSS

Une information ne doit pas être donnée uniquement par la couleur ou une forme
Pas d’attribut de mise en forme, seul width et height sur les médias
Pas de contenu dans le CSS, car insible pour les lecteur d'ecran
Couleur de texte, de lien et de fond sur le body par défaut
Texte lisible avec zoom à 200%
Hors tableau, pas de scroll :
- verticale : 320px de large minimum
- horizontale : 256px de hauteur minimum

Le texte reste lisible avec

* {
    line-height: 1.5 !important;
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
}

p {
    margin-bottom: 2em !important;
}

focus
- touche Echap masque, survolé sans disparaitre, reste visible tant que le composant est actif
- sauf amélioration pas touche au outline
focus et hover : suffisamment contrastés
Contrat des textes
- + de 24px ou 18.5 gras : 3 minimum
- - de 24px ou - 18.5px gras : 4.5 minimum
lien souligné ou contrastés

Lien

Intitulé explicite
Ajouter un title sur les

<a href="#url" aria-label="Retour Accueil du site">Retour</a>

<a href="#url" title="Retour Accueil du site">Retour</a>
<a href="blog" title="Blog Page active">Blog</a> <!-- page active -->

<a href="#lien">
    <img alt="intitule">
</a>

<a href="#lien" aria-label="intitule">
    <i class="fa-solid fa-house"></i>
</a>

<a href="#lien">
    <span class="sr-only">intitule</span> <!-- méthode conseillée car native -->
    <i class="fa-solid fa-house"></i>
</a>

aria-label n'est pas correctement traduit par google translate
Préféré les méthodes : sr-only ou title

Formulaire

label visible et nom accessible (Le placeholder n’est pas suffisant)
Si title et placeholder alors leur contenu sont identiques
Les labels et les champs doivent être accolés
Regroupement des ensemble de radio, checkbox, période de date (début et fin) ou d'ajout d'une répétition (une personne : nom, prénom et age)
Les textes liés par les propriétés aria-labelledby ou aria-describedby font partie des propriétés de l’élément, ils sont donc toujours disponibles, y compris lorsqu’ils sont cachés par CSS avec display:none ou visibility:hidden

<fieldset>
    <legend>Adresse de facturation</legend>
    [champs ...]
</fieldset>
<!--ou-->
<div role="groupe" aria-labelledby="legendAdresse">
    <p id="legendAdresse"> Adresse de facturation : </p>
    [champs ...]
</div>

Ajouté le complément directe dans l'étiquette de champ
L'utilisation d'une double <label for=""> est déconseiller
```
<label for="name">
    <strong>Prénom</strong><br>
    40 caractere max
</label>
<input id="name"/>
```

ou une combinaison de label et de aria-describedby

<label for="name">Prénom</label>
<input id="name" aria-describedby="info"/>
<p id="info">40 caractere max</p>

ou utilisé un aria-labelledby multiple

<p id="label">Prénom</p>
<input type="text" aria-labelledby="label info"/>
<p id="info">40 caractere max</p>

<select>
    <optgroup label="Véhicules">
        <option>Voiture</option>
        <option>Motos</option>
        …
    </optgroup>
    <optgroup label="Immobilier">
        <option>Maison</option>
        <option>Appartements</option>
        …
    </optgroup>
</select>

Les boutons « ok », « valider », « envoyer », etc. ne sont pas suffisamment pertinents.

<input type="submit" value="Envoyer le message" />

<input type="image" src="loupe.png" alt="Rechercher sur le site">

<input type="submit" value="OK" title="Envoyer le message" />

<input type="submit" aria-label="Effacer mes données"/>

<input type="submit" aria-labelledby="desc-btn" />
<span id="desc-btn">Envoyer le message</span>

<input type="submit" value="Enregistrer" aria-label="Enregistrer Valider mes modifications"/>

aria-label ou aria-labelledby) sont toujours prioritaires sur les liaisons natives (value, alt, title)

Obligatoire et facultative
- Tout est obligatoire : le mettre en début de formulaire
- Mixte : Ajouter une astérisque dans les champs obligatoire + mettre une légende en haut du formulaire
- Majorité de facultatif : Possibililité de mettre les champs optionnels directement après le label
- Attribut required sur chaque champ obligatoire ou aria-required="true"
- Indication visible
```
<label for="name">Prénom</label>
<input id="name"/ aria-describedby="required">
<p id="required">Champs obligatoire</p>
```
Message d'erreur
- Relié avec un aria-describedby
- Fournis un exemple de saisie réelle
- En cas de rechargement : Préfixé le titre de la page par « erreur sur le formulaire »

Indication de format de saisie : requise que pour les champs obligatoires, mais conseillé globalement
Si possible dans le label sinon aria-label, aria-labelledby ou title

<label for="date">Votre date de naissance</label>
<input type="text" aria-describedby="aidedate" id="date" />
<p id="aidedate">La date est de la forme 12/07/1981</p>

Champs qui collectent des informations personnelles sur l’utilisateur : autocomplete Liste des valeurs
Suppression ou modification de données à caractère personnel : pouvoir annuler la suppression ou re-modifier par la suite ou confirmer explicitement par une case a coché supplémentaire

Aria

Privilégier le natif et testez !
Ne pas changer la sémantique (validator w3c siu besoin)
Composant interactif utilisable au clavier, Motif de conception (en anglais)
Tout composant interactif doit avoir un nom accessible
Un composant qui déclenche l'ouverture d'une page ou d'un onglet doit être un lien même si ce sont des actions Javascript
```
<a role="link" tabindex="0" onclick="myFunction()"></a>

<a href="#" onclick="myFunction()"></a>
```
État et changements d'état : Ne pas faire de rechargement de page, d'une partie ou de changement de page par défaut, mettre un bouton pour faire l'action
- inactif disabled
- Bouton qui affiche masque aria-expanded="true/false"
- Élément actuel aria-current
- Liste exhaustive des États et propriétés ARIA (en anglais)
Statut
- aria-live="assertive" : le contenu est vocalisé immédiatement
- aria-live="polite" : le contenu est vocalisé dès que l'utilisateur est disponible
- aria-atomic="true" restitue tout, à ne pas utiliser dans un tchat par exemple
- aria-atomic="false" restitue uniquement le dernier ajout
Ne pas en abuser, parfois contre-productif, repositionner le focus peut être plus pertinent
Message
- Messages d'erreurs :
  <p role="alert">Ceci est une alerte</p> ou aria-live="assertive"+aria-atomic="true"
- Messages d'informations :
  <p role="status">Ceci est une information</p> ou aria-live="polite"+aria-atomic="true"
  Message d'erreur général en début de formulaire
```
<div tabindex="-1" role="status">
    <p>Le formulaire contient des erreurs. Veuillez vérifier votre saisie puis envoyer à
        nouveau votre demande s’il vous plaît.</p>
</div>
```
- Messages de notifications :
  role="log" ou aria-live="polite" et aria-atomic="false"
- Messages d’attente
  Seulement pour des tâches qui prennent beaucoup de temps.
```
<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20 %</div>

<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuetext="Étape 2&nbsp;: Copie des fichiers…" aria-valuemax="100">
    Étape 2&nbsp;: Copie des fichiers…
</div>
```
  Repositionner le focus sur un élément pertinent, par exemple la zone mise à jour

Laisser le contrôle à l'utilisateur

L’utilisateur doit pouvoir supprimer ou augmenter la limite de temps (20h minium)
L'utilisateur peut arrêter et relancer un rafraîchissement automatique, proposer un bouton pour désactiver/activer le live upload par exemple
Pas de nouvelles fenêtres sans action de l’utilisateur
Une seule fenêtre s'ouvre à la fois
Documents en téléchargement : accessible ou alternative
Évité de lancer une vidéo, un son ou un slider automatiquement sinon bouton pause
Évité les effet de flash (3 flash par seconde)
Le contenu doite être consultable portrait et paysage, ne pas bloquer
Toutes fonctionnalités utilisables par des gestes doit avoir des équivalences en boutons
Prévoir un mécanisme qui permet d’interrompre l'exécution de l'action avant la fin en cas de mousedown sur desktop et touchstart sur mobile