Balises <strong>, <b>, <em>, <i> : quand et pourquoi les utiliser ?
En HTML, le choix entre ces balises dépend avant tout de la sémantique : <strong> et <em> apportent du sens (importance ou emphase, utiles pour les lecteurs d’écran), tandis que <b> et <i> servent à une distinction visuelle ou typographique sans valeur sémantique. <strong> souligne un contenu crucial (avertissements, instructions), <em> modifie le sens d’une phrase par l’emphase. <b> attire l’attention sans importance particulière, et <i> s’emploie pour des termes techniques, noms d’œuvres ou mots étrangers. Pour un style purement décoratif, privilégiez le CSS avec <span>. L’objectif : séparer structure (HTML) et présentation (CSS) pour un code propre et accessible.

L’attribut HTML hidden="until-found" permet de masquer du contenu tout en le rendant accessible via la recherche dans la page (Ctrl+F). Contrairement à display: none ou visibility: hidden, il utilise content-visibility: hidden en interne, ce qui cache visuellement le contenu sans l’exclure des résultats de recherche. Utile pour des cas comme des accordéons ou des sections cachées, il est déjà supporté par Chrome, Firefox et bientôt Safari. Une alternative à <details> pour des contenus masqués mais "trouvables", avec des polyfills possibles via le Shadow DOM en attendant une adoption universelle. Une future pseudo-classe ::search-text pourrait même permettre de styliser les correspondances de recherche.

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é :

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)

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