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

Utilisation correcte de li / ol / ul

Bonnes pratiques d'accessibilité sur l'affichage d'informations supplémentaires pour les ancres