iFrames doit inclure un élément de titre à l'intérieur de la balise parent.</p></li> <li><p>Comme bonne pratique, il est bon de définir le défilement sur "auto" ou "oui" dans le champ <iframe> paramètres de balise. Cela permet aux personnes malvoyantes de pouvoir faire défiler le contenu dans la zone <iframe> qu'ils ne pourraient peut-être pas voir autrement.</p></li> </ul> <h2> Ordre de mise au point </h2> <ul> <li>L'ordre de focus par défaut doit être logique, intuitif et correspondre à l'ordre visuel d'une page.</li> </ul> <h2> Tabindex </h2> <ul> <li><p>Un élément qui est normalement focalisable mais qui est dans un état inactif (par exemple, une zone de saisie ou un bouton désactivé) doit recevoir un tabindex négatif (tabindex="-1").</p></li> <li><p>Devrait rajouter le focus à l'élément lorsqu'il est actif ou nécessaire (peut utiliser JS ou TS).</p></li> <li><p>Devrait éviter les tabindex positifs. Donner le focus à des éléments non interactifs et perturber l’ordre normal de focus peut dérouter et frustrer les utilisateurs. Les circonstances justifient rarement l'ajout d'un tabindex positif, tel que tabindex=1 à un élément non focalisable.</p></li> </ul> <h2> Passer les liens </h2> <ul> <li><p>Un lien de saut doit être inclus pour aider les utilisateurs à contourner le menu de navigation.</p></li> <li><p>Passer le lien doit inclure le contexte sur l'objectif du lien (par exemple, "Passer au contenu principal") et peut utiliser des propriétés ARIA supplémentaires comme aria-labelledby, aria-label.</p></li> <li><p>Le lien Ignorer peut être visible ou masqué visuellement (en fonction de la conception) jusqu'à ce qu'un utilisateur y accède.</p></li> </ul> <h2> Indicateur de mise au point </h2> <ul> <li>Assurez-vous que l'indicateur de mise au point n'est pas caché sous d'autres composants.</li> </ul> <h2> Style par défaut du navigateur </h2> <ul> <li><p>Ne doit pas remplacer le style de focus du navigateur par défaut (par exemple, « contour : 0 » ou « contour : aucun »).</p></li> <li><p>Les styles de mise au point personnalisés sont autorisés.</p></li> </ul> <h2> Javascript </h2> <h3> Événements déclencheurs </h3> <ul> <li>Si un événement de clic (par exemple onClick()) est appliqué à des éléments non sémantiques (par exemple <div>), un événement keydown/keyup doit être ajouté pour détecter l'appui sur la touche entrée ou espace.</li> </ul> <h3> Titres de pages </h3> <ul> <li>Chaque page doit avoir un titre. Il est acceptable d'utiliser la propriété document.title ou un package tiers à cette fin</li> </ul> <h3> Contenu dynamique </h3> <div><table> <tr> <th>Possible misuse</th> <th>Correct use</th> </tr> <tr> <td>Render large chunks of non-semantic HTML</td> <td>Render smaller pieces of semantic HTML</td> </tr> <tr> <td>Not allowing time for dynamic content to be recognized by assistive technology</td> <td>Using a setTimeout() time delay to allow users to hear the full message</td> </tr> <tr> <td>Applying style attributes for onFocus() dynamically</td> <td>Use :focus for the related elements in your CSS stylesheet</td> </tr> <tr> <td>Applying inline styles may cause user stylesheets to not be read properly</td> <td>Keep your styles in CSS files to keep the consistency of the theme</td> </tr> <tr> <td>Creating very large JavaScript files that slow down overall site performance</td> <td>Use less JavaScript; prefer CSS for animations or sticky navigation for better performance</td> </tr> </table></div> <h3> Gestion du focus au niveau des composants </h3> <ul> <li>Lorsque l'utilisateur ouvre un modal, il doit pouvoir naviguer entre les éléments exploitables qu'il contient (par exemple, les boutons d'annulation et de soumission) à l'aide de la touche Tab. Cependant, le focus doit rester confiné au modal, empêchant l'utilisateur d'accéder à des éléments extérieurs à moins qu'il ne ferme explicitement le modal. Cela garantit que le focus est piégé dans le modal.</li> </ul> <h3> Gestion du focus au niveau de la page </h3> <ul> <li><p>La concentration doit également être maintenue lorsqu'un utilisateur navigue de page en page.</p></li> <li><p>Chaque fois qu'un utilisateur clique sur un lien pour accéder à une autre page de l'application, le focus est soit conservé au même endroit, soit potentiellement placé complètement ailleurs.</p></li> <li><p>Voici les emplacements de focus suggérés lorsque l'utilisateur navigue d'une page à l'autre.</p></li> <li><p>Placez le focus sur le conteneur principal avec une annonce aria-live.</p></li> <li><p>Remettez le focus sur un lien pour passer au contenu principal.</p></li> <li><p>Déplacez le focus sur l'en-tête de niveau supérieur de la nouvelle page.</p></li> </ul> <h3> Gestion de l'état au niveau des composants </h3> <ul> <li><p>L'état du composant doit être géré à l'aide des attributs ARIA (par exemple, utilisez un attribut aria-expanded pour indiquer à l'utilisateur si un menu déroulant ou une liste est développé ou réduit.).</p></li> <li><p>Il est important d'être sélectif lors de l'application des attributs ARIA. Réfléchissez au flux d'utilisateurs pour comprendre quelles informations critiques doivent être transmises à l'utilisateur.</p></li> </ul> <h3> Gestion de l'état au niveau de la page </h3> <ul> <li><p>Si du contenu est ajouté ou mis à jour dynamiquement sur la page (par exemple, un message d'alerte ou un changement de texte), il doit être annoncé à l'utilisateur.</p></li> <li> <p>Mieux vaut utiliser </p> <ul> <li>React : réagir-aria-live ou réagir-a11y-annonceur </li> <li>Angulaire : LiveAnnouncer </li> <li>Vue : vue-a11y-utils </li> </ul> </li> </ul> <p>(continuer...)</p>
