Consultation

Critère 13.1Pour chaque page web, l’utilisateur a-t-il le contrôle de chaque limite de temps modifiant le contenu (hors cas particuliers) ?

Ce que ça vérifie — Lorsqu'une limite de temps modifie le contenu (délai de session, redirection automatique, rafraîchissement périodique), l'utilisateur doit pouvoir la maîtriser. Cela garantit que les personnes lentes à lire ou à saisir ne perdent pas leurs données ou le fil de leur navigation.

Comment corriger — Prévoyez un moyen de désactiver, d'ajuster ou de prolonger le délai avant qu'il n'expire, ou avertissez l'utilisateur au moins 20 secondes avant l'échéance en lui offrant de reporter par une action simple. Pour les rafraîchissements automatiques, laissez l'utilisateur les suspendre ou les déclencher manuellement.

<!-- À éviter : redirection automatique imposée -->
<meta http-equiv="refresh" content="5;url=/suite" />

<!-- Recommandé : avertir avant l'expiration de session et laisser prolonger -->
<div role="alertdialog" aria-labelledby="t" aria-describedby="d">
  <h2 id="t">Session bientôt expirée</h2>
  <p id="d">Votre session expirera dans 2 minutes.</p>
  <button type="button" onclick="prolongerSession()">Rester connecté</button>
</div>

Critère 13.2Dans chaque page web, l’ouverture d’une nouvelle fenêtre ne doit pas être déclenchée sans action de l’utilisateur. Cette règle est-elle respectée ?

Ce que ça vérifie — Une nouvelle fenêtre ou un nouvel onglet ne doit pas s'ouvrir sans que l'utilisateur l'ait déclenché et en soit informé. Une ouverture inattendue désoriente, en particulier les utilisateurs de lecteurs d'écran et de loupes d'écran.

Comment corriger — N'ouvrez une nouvelle fenêtre qu'à la suite d'une action explicite (clic sur un lien ou un bouton) et signalez-le dans l'intitulé du lien, visuellement ou via une mention textuelle. Évitez les ouvertures automatiques (window.open au chargement, pop-ups non sollicités).

<!-- Recommandé : l'ouverture est annoncée dans l'intitulé -->
<a href="rapport.html" target="_blank" rel="noopener">
  Consulter le rapport (nouvelle fenêtre)
</a>

Critère 13.3Dans chaque page web, chaque document bureautique en téléchargement possède-t-il, si nécessaire, une version accessible (hors cas particuliers) ?

Ce que ça vérifie — Un document bureautique proposé en téléchargement (PDF, Word, Excel, ODT…) doit, si nécessaire, disposer d'une version accessible. Cela permet à tous les utilisateurs d'accéder à son contenu, quel que soit leur équipement ou leur handicap.

Comment corriger — Rendez le document lui-même accessible (structure de titres, alternatives des images, tableaux balisés, langue, ordre de lecture) ou fournissez à proximité une version accessible équivalente (HTML, PDF balisé, document texte structuré). Indiquez clairement le format et le poids du fichier dans l'intitulé du lien.

Critère 13.4Pour chaque document bureautique ayant une version accessible, cette version offre-t-elle la même information ?

Ce que ça vérifie — Quand une version accessible d'un document est fournie, elle doit délivrer strictement la même information que la version d'origine. Une version accessible appauvrie priverait certains utilisateurs d'une partie du contenu.

Comment corriger — Vérifiez que la version accessible reprend l'intégralité du contenu et des fonctionnalités de la version de référence : mêmes textes, mêmes données, mêmes liens, mêmes illustrations décrites. Mettez à jour les deux versions de manière synchronisée à chaque modification.

Critère 13.5Dans chaque page web, chaque contenu cryptique (art ASCII, émoticône, syntaxe cryptique) a-t-il une alternative ?

Ce que ça vérifie — Un contenu cryptique — art ASCII, émoticône composée de caractères, suite de symboles porteuse de sens — doit disposer d'une alternative. Sans elle, les technologies d'assistance ânonnent une succession de caractères incompréhensible.

Comment corriger — Fournissez une alternative textuelle décrivant le sens du contenu, par exemple via un attribut title, une balise abbr, ou un texte associé, tout en masquant si besoin le contenu cryptique aux lecteurs d'écran.

<!-- À éviter : lu « deux-points parenthèse » -->
<p>Bravo :)</p>

<!-- Recommandé : le sens est explicité -->
<p>Bravo <span role="img" aria-label="sourire">:)</span></p>

Critère 13.6Dans chaque page web, pour chaque contenu cryptique (art ASCII, émoticône, syntaxe cryptique) ayant une alternative, cette alternative est-elle pertinente ?

Ce que ça vérifie — L'alternative fournie à un contenu cryptique doit être pertinente, c'est-à-dire restituer fidèlement son sens ou sa fonction. Une alternative approximative ou erronée induirait l'utilisateur en erreur.

Comment corriger — Assurez-vous que l'alternative traduit exactement l'intention du contenu cryptique (émotion de l'émoticône, information portée par l'art ASCII) sans en ajouter ni en omettre. Faites relire ces alternatives par une personne extérieure pour valider leur clarté.

Critère 13.7Dans chaque page web, les changements brusques de luminosité ou les effets de flash sont-ils correctement utilisés ?

Ce que ça vérifie — Les changements brusques de luminosité et les effets de flash ne doivent pas dépasser le seuil susceptible de déclencher des crises d'épilepsie photosensible. Un contenu qui clignote trop vite ou trop fort met physiquement en danger certains utilisateurs.

Comment corriger — Limitez tout flash à un maximum de trois par seconde, ou maintenez la surface clignotante et le contraste de luminosité sous les seuils réglementaires. Dans le doute, supprimez l'effet ou proposez une version sans flash.

/* Recommandé : pas plus de 3 flashs par seconde et effet coupé si demandé */
@keyframes flash { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.alerte { animation: flash .34s steps(2) 3; } /* ~3 cycles/s, s'arrête */

@media (prefers-reduced-motion: reduce) {
  .alerte { animation: none; }
}

Critère 13.8Dans chaque page web, chaque contenu en mouvement ou clignotant est-il contrôlable par l’utilisateur ?

Ce que ça vérifie — Tout contenu qui bouge, défile ou clignote automatiquement pendant plus de cinq secondes doit pouvoir être mis en pause, arrêté ou masqué par l'utilisateur. Les animations continues gênent la lecture et la concentration, notamment pour les personnes ayant des troubles de l'attention.

Comment corriger — Ajoutez un bouton accessible de pause/arrêt pour les carrousels, bandeaux défilants et animations, et respectez la préférence prefers-reduced-motion. Idéalement, ne déclenchez pas ces animations automatiquement.

<div class="carrousel">
  <button type="button" aria-pressed="false" onclick="togglePause(this)">
    Mettre en pause le défilement
  </button>
  <!-- diapositives -->
</div>

<style>
@media (prefers-reduced-motion: reduce) {
  .carrousel { animation: none; }
}
</style>

Critère 13.9Dans chaque page web, le contenu proposé est-il consultable quelle que soit l’orientation de l’écran (portrait ou paysage) (hors cas particuliers) ?

Ce que ça vérifie — Le contenu doit rester consultable et utilisable aussi bien en mode portrait qu'en mode paysage. Verrouiller l'orientation pénalise les utilisateurs dont l'appareil est fixé dans une position, par exemple sur un fauteuil roulant.

Comment corriger — N'imposez pas d'orientation via une contrainte technique et concevez une mise en page responsive qui s'adapte aux deux orientations. N'utilisez la propriété orientation dans un manifeste ou le CSS que si une orientation est réellement essentielle (par exemple un piano virtuel).

<!-- À éviter dans le manifest.json -->
{ "orientation": "portrait" }

/* Recommandé : la mise en page s'adapte aux deux orientations */
@media (orientation: landscape) { .grille { grid-template-columns: 1fr 1fr; } }
@media (orientation: portrait)  { .grille { grid-template-columns: 1fr; } }

Critère 13.10Dans chaque page web, les fonctionnalités utilisables ou disponibles au moyen d’un geste complexe peuvent-elles être également disponibles au moyen d’un geste simple (hors cas particuliers) ?

Ce que ça vérifie — Toute fonctionnalité activable par un geste complexe — tracé de chemin, pincement, geste à plusieurs doigts — doit aussi pouvoir être déclenchée par un geste simple. Les gestes complexes sont impossibles à réaliser pour de nombreux utilisateurs (motricité réduite, dispositifs de pointage alternatifs).

Comment corriger — Proposez pour chaque geste complexe une commande équivalente reposant sur un simple appui ou clic (boutons précédent/suivant en complément d'un balayage, boutons +/- en complément du pincement de zoom). Ne rendez aucune fonction accessible uniquement par un tracé ou un geste multipoint.

<!-- Recommandé : le zoom par pincement est doublé de boutons simples -->
<div class="visionneuse">
  <button type="button" onclick="zoom(1)">Agrandir</button>
  <button type="button" onclick="zoom(-1)">Réduire</button>
</div>

Critère 13.11Dans chaque page web, les actions déclenchées au moyen d’un dispositif de pointage sur un point unique de l’écran peuvent-elles faire l’objet d’une annulation (hors cas particuliers) ?

Ce que ça vérifie — Une action déclenchée par un pointage sur un point unique (clic, appui) doit pouvoir être annulée ou ne se produire qu'au relâchement. Cela évite les activations accidentelles pour les personnes aux gestes imprécis ou tremblants.

Comment corriger — Déclenchez l'action au relâchement (événement up : click, pointerup) plutôt qu'à l'appui, et permettez d'annuler en éloignant le pointeur avant de relâcher (pointercancel, pointerleave). À défaut, offrez un mécanisme d'annulation après coup.

// Recommandé : action au relâchement, annulable si on quitte la cible
const btn = document.querySelector('#valider');
let actif = false;
btn.addEventListener('pointerdown', () => { actif = true; });
btn.addEventListener('pointerleave', () => { actif = false; });
btn.addEventListener('pointercancel', () => { actif = false; });
btn.addEventListener('pointerup', () => { if (actif) valider(); actif = false; });

Critère 13.12Dans chaque page web, les fonctionnalités qui impliquent un mouvement de l’appareil ou vers l’appareil peuvent-elles être satisfaites de manière alternative (hors cas particuliers) ?

Ce que ça vérifie — Une fonctionnalité qui repose sur un mouvement de l'appareil — secouer, incliner, orienter — doit offrir une alternative accessible et pouvoir être neutralisée. Ces mouvements sont irréalisables pour les personnes qui fixent leur appareil ou ne peuvent le manipuler.

Comment corriger — Doublez chaque commande gestuelle par un contrôle d'interface classique (bouton, menu) permettant d'obtenir le même résultat, et prévoyez un moyen de désactiver la détection de mouvement pour éviter les déclenchements involontaires.

<!-- Recommandé : « secouer pour annuler » doublé d'un bouton -->
<button type="button" onclick="annulerDerniereAction()">
  Annuler la dernière action
</button>
<!-- La détection d'agitation (devicemotion) reste une commodité optionnelle -->