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
.
5 attributs HTML pour améliorer l'accessibilité :
- hreflang -> indique la langue de la page pointée par un lien
- translate -> si on met "no" on indique que le terme ne doit pas être traduit (pratique pour les noms de ville, etc.)
- reversed -> utile pour les éléments ordonnées
- controls -> affiche les contrôles pour les vidéos ou la musique
- autocomplete -> indique au navigateur d'afficher l'autocomplétion, on peut même préciser où chercher (nom du champ)
L'auteur rappelle le principe de moindre pouvoir : choisir le langage le moins puissant pour un but donné — on permet ainsi de laisser le navigateur la manière d'accomplir ce que l'on souhaite.
Il présente ensuite quelques éléments / fonctionnalités pour lesquelles JavaScript peut être remplacé avantageusement par du HTML / CSS :
- Custom Switches
- Datalist, un composant avec autocomplétion native
- Un Color picker
- Accordions
- Dialog modals
Il rappelle à chaque fois les meilleures pratiques d'accessibilité.
Utilisation de l'attribut "rel" et des différentes valeurs permises
Tout est dans le titre
L'autrice explique son cheminement / sa réflexion pour la transformation d'un wireframe en HTML : plan, choix des éléments, accessibilité, etc.
Comment écrire une "bonne" bannière d'acceptation des cookies
Exemple de mauvaise et de bonne structuration d'une section de page
TLDR : si vous avez besoin d'un élément bouton, utilisez un élément bouton
Utilisation des bons éléments HTML pour créer une card accessible
Utilisation des bons éléments HTML pour la navigation d'un site
L'auteur montre un extrait de HTML avec une mauvaise utilisation de titre hX et des div inutiles. Il s'agit d'un code généré par un framework JavaScript. Or ceux ci fournissent généralement des mécanismes pour éviter d'avoir des éléments en trop (comme les fragments dans React)
L'auteur explique quand utiliser l'élément legend
L'auteur montre le mauvais usage de balises de titre h6 pour afficher une liste de liens... et il présente une meilleure façon de faire
Bonnes pratiques sur la structuration du contenu HTML
Utilisation correcte de li / ol / ul
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre