L'article propose un guide complet pour créer une barre de recherche conforme aux normes d'accessibilité RGAA. Il inclut des bonnes pratiques, des erreurs à éviter, et des exemples de code en HTML et React/MUI pour aider les développeurs à concevoir des interfaces utilisateur inclusives et fonctionnelles
.

La navigation au clavier est un aspect crucial de la conception web accessible, permettant aux utilisateurs d'interagir avec un site uniquement via le clavier, en utilisant des raccourcis et en sélectionnant des éléments avec les touches Tab et Entrée. Cela rend le site plus accessible aux personnes ayant des troubles moteurs ou visuels, améliore l'efficacité pour tous les utilisateurs et peut éviter des complications légales liées à l'accessibilité. Pour rendre un site navigable au clavier, il est essentiel d'inclure des indicateurs de focus visibles, un ordre de tabulation logique, des liens de navigation rapide et des éléments interactifs accessibles via le clavier. Tester la navigabilité au clavier en utilisant uniquement le clavier permet de s'assurer que le site répond aux normes d'accessibilité.

Cet article explique comment créer un menu hamburger accessible et fonctionnel sans utiliser JavaScript, en s'appuyant sur l'API Popover. Cette approche permet de garantir une navigation fluide et accessible pour tous les utilisateurs, y compris ceux utilisant des lecteurs d'écran. L'article détaille les étapes pour structurer le menu en HTML sémantique, utiliser les attributs Popover pour gérer l'affichage du menu, et ajouter des attributs ARIA pour améliorer l'accessibilité. Des exemples de code et des conseils pratiques sont fournis pour animer l'ouverture et la fermeture du menu, tout en respectant les bonnes pratiques d'UX.

Cet article explore l'importance de prendre en compte les préférences des utilisateurs en matière d'animations sur les sites web, notamment grâce à la propriété CSS prefers-reduced-motion. Intégrée dans les navigateurs entre 2018 et 2020, cette préférence permet aux utilisateurs de réduire ou de supprimer les animations non essentielles, améliorant ainsi l'accessibilité pour ceux qui peuvent être gênés par les mouvements à l'écran. L'article explique comment utiliser cette propriété en CSS et JavaScript pour adapter les interfaces en fonction des préférences des utilisateurs, tout en fournissant des exemples de code pratiques.

Très intéressant

5 attributs HTML pour améliorer l'accessibilité :

1. hreflang -> indique la langue de la page pointée par un lien
2. translate -> si on met "no" on indique que le terme ne doit pas être traduit (pratique pour les noms de ville, etc.)
3. reversed -> utile pour les éléments ordonnées
   1. controls -> affiche les contrôles pour les vidéos ou la musique
   2. autocomplete -> indique au navigateur d'afficher l'autocomplétion, on peut même préciser où chercher (nom du champ)

Tout est dans le titre

Une présentation très complète de l'élément meter : accessibilité, sémantique, etc.

L'auteur explique la sémantique des éléments header, main, aside, etc.et comment ils aident à la fois à structurer la page web mais aussi à faciliter son accessibilité

<span class="nav-toggle"> ☰ Menu </span> est mauvais pour l'accessibilité. L'auteur explique comment résoudre ces problèmes

Comment utiliser proprement un input de type "radio"

TLDR : ne pas mettre un lien dans un label

Comment trouver un compromis entre accessibilité et effet visuel

Quand utiliser ou ne pas utiliser les attributs aria

Utilisation des bons éléments HTML pour créer une card accessible

Comment ajouter un bouton "fermer" à une modale proprement

L'auteur explique pourquoi ne pas utiliser une div pour faire un lien

Tout est dans le titre

Tout est dans le titre

Bonnes et mauvaises pratiques sur un lien contenant une image de bouton