L'article explique comment créer un cas de test HTML simple pour signaler un bug ou un comportement inattendu. Il recommande d'utiliser des outils en ligne comme jsfiddle ou codepen, mais préfère souvent les URLs de type data: pour partager du code rapidement. L'auteur illustre cela avec un exemple de code HTML et JavaScript qui extrait une valeur de style, montrant les différences de résultats entre les navigateurs. Il démontre comment condenser ce code en une seule ligne et l'utiliser directement dans la barre d'URL d'un navigateur. Enfin, il mentionne avoir ouvert un rapport de bug pour le problème discuté.
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