L'article explore la notion de sémantique en HTML. Il explique que chaque élément HTML a une signification définie dans le HTML Living Standard, et que cette sémantique est cruciale pour les utilisateurs, notamment pour l'accessibilité. L'auteur distingue trois types de sémantique : celle pour les utilisateurs, pour les développeurs et pour les machines. Il illustre ses propos avec des exemples concrets, montrant comment choisir les bons éléments HTML améliore la compréhension du contenu et l'accessibilité. L'article souligne l'importance de la sémantique pour rendre le Web plus inclusif et fonctionnel.
Cet article discute de l'utilisation de l'élément HTML <abbr> pour les abréviations et des problèmes d'accessibilité qu'il peut poser. Bien que <abbr> semble être la solution parfaite avec son attribut title, celui-ci se comporte de manière incohérente selon les navigateurs et les technologies d'assistance, rendant certaines informations inaccessibles à certains utilisateurs. L'article propose une solution simple et conforme aux WCAG : écrire l'abréviation suivie de sa signification entre parenthèses lors de sa première occurrence, puis utiliser uniquement l'abréviation par la suite. Cette méthode garantit une meilleure accessibilité sans nécessiter de modifications HTML complexes.
Le Hollandais Volant dresse une liste actualisée des pratiques web qui irritent en 2025, soulignant que beaucoup de problèmes persistent malgré les années. Il critique les sites trop lourds, le retour forcé de la publicité, les sites souvent inopérants comme ceux de la SNCF ou de La Poste, et les interfaces confuses où l'on tourne en rond. Il dénonce aussi les sites qui cachent des informations essentielles ou redirigent vers des réseaux sociaux, comme ceux de l'URSSAF ou de Dell. Un constat amer sur l'évolution du web.
L'article critique l'utilisation excessive de balises <div> (divitis) et l'abus de balises HTML sémantiques sans compréhension de leur véritable signification. L'auteur explique que l'HTML sémantique ne se limite pas à remplacer les <div> par d'autres balises, mais nécessite une compréhension approfondie des éléments et de leur usage correct selon les normes HTML. Il souligne l'importance d'aller au-delà des apparences et de se former continuellement pour écrire un HTML vraiment sémantique et accessible.
L'article explore l'importance souvent sous-estimée du titre de page (
Cet article remet en question le slogan souvent répandu "La conformité n’est pas de l’accessibilité". Les auteurs expliquent que, bien que ce slogan soit séduisant et partiellement vrai, il est réducteur et peut prêter à confusion. Ils soulignent que la conformité aux référentiels comme le RGAA est essentielle pour garantir une base d'accessibilité minimale, permettant aux personnes handicapées d'accéder aux services en ligne sans difficultés majeures. L'article illustre également, à travers une expérience vécue, que l'expérience utilisateur peut parfois contredire les évaluations d'experts, mais cela ne remet pas en cause l'importance des normes d'accessibilité.
Cet article partage l'expérience de SNCF Connect dans la mise en place d'une stratégie de service numérique responsable. Il définit un service numérique responsable comme une solution utile, sobre, accessible et respectueuse, reposant sur quatre piliers : accessibilité, sobriété, confidentialité et respect des libertés. L'article souligne l'importance de ces principes, soutenus par des référentiels concrets comme le RGAA, le RGPD et le RGESN, et illustre comment SNCF Connect aligne ses actions sur ces enjeux pour promouvoir des mobilités durables et accessibles. Il présente également des bonnes pratiques pour déployer une telle stratégie, comme la labellisation numérique responsable.
Le design system de la Fabrique de Noël est un article narratif qui illustre, à travers une métaphore festive, les enjeux de l’accessibilité numérique et la mise en place d’un design system. Oli Daynight (designer) et Any Goodcookie (experte accessibilité) sont chargés par le Père Noël de rendre la plateforme de la Fabrique de Noël plus inclusive. Ils optent pour une refonte directe des composants du design system, plutôt qu’un audit préalable, afin de gagner du temps avant Noël. Any insiste sur l’importance de former les équipes, d’intégrer l’accessibilité dès la conception (en s’appuyant sur les WCAG) et de mettre en place des processus collaboratifs, comme des sessions de tests entre pairs (« Dans leurs chaussons »). Malgré des contraintes de temps, les résultats sont encourageants : les composants deviennent plus accessibles, et les équipes s’approprient progressivement ces bonnes pratiques. L’article souligne que l’accessibilité est un travail continu, nécessitant engagement et améliorations itératives. Une lecture ludique et inspirante pour aborder les défis concrets de l’accessibilité web ! 🎄✨
L'article revient sur l'utilisation souvent abusive de l'attribut HTML title, qui sert à afficher des infobulles ou à fournir un nom accessible aux éléments interactifs. Malgré les mises en garde depuis 2013, cet attribut est encore mal employé, posant des problèmes d'accessibilité. Les infobulles sont cachées et nécessitent une interaction précise, ce qui les rend peu intuitives et frustrantes pour les utilisateurs. L'article souligne l'importance de répéter les bonnes pratiques pour ancrer une utilisation correcte de l'attribut title.
Cet article de Guillaume Barbier explore les défis liés à la création de tableaux de données accessibles sur le web en 2025. Il identifie deux principales raisons pour lesquelles les tableaux restent inaccessibles : un manque de culture numérique et des limitations techniques. L'auteur souligne la confusion entre la structuration de l'information et la présentation visuelle, ainsi que les difficultés techniques rencontrées avec certaines combinaisons de navigateurs et lecteurs d'écran. Il propose une synthèse des connaissances pour aider à créer des tableaux accessibles et évoque quelques motifs à éviter. L'article aborde également d'autres critères d'accessibilité comme la redistribution et les mouvements de glissement, avec des techniques pour éviter les déformations sur les écrans étroits.
L'article explore les écarts entre ce que les lecteurs d'écran annoncent et ce qui est visuellement affiché à l'écran, en utilisant des burritos comme métaphore. Il souligne que les emojis et autres éléments visuels peuvent induire en erreur les utilisateurs de lecteurs d'écran, comme dans l'exemple d'un emoji de burrito dans un titre de sandwich. L'auteur fournit des tableaux comparatifs montrant comment les lecteurs d'écran populaires (JAWS, NVDA, VoiceOver) annoncent différents éléments HTML, et discute des éléments que le HTML fournit par défaut et ceux qui nécessitent des ajouts pour des annonces significatives. L'article encourage à mieux documenter et enregistrer les exigences des lecteurs d'écran pour combler les lacunes entre la conception et le code.
Cet article explique comment utiliser les titres pour structurer clairement une page web, améliorant ainsi la compréhension pour tous les utilisateurs, y compris ceux utilisant des technologies d'assistance. L'article aborde trois problèmes courants : utiliser des titres pour du texte non structurel, ne pas utiliser de titres pour du texte structurel, et un ordre de titres incohérent. Les solutions proposées incluent l'utilisation appropriée de HTML et CSS pour garantir une sémantique et une hiérarchie correctes des titres.
Cet article explore les considérations d'accessibilité pour les formules mathématiques sur le web, soulignant l'importance d'une lecture correcte par les lecteurs d'écran. L'article met en avant MathML comme l'une des meilleures options pour représenter les formules, grâce à sa syntaxe dédiée, son bon support par les lecteurs d'écran et son indépendance vis-à-vis de JavaScript. Il compare différentes approches, comme TeX/LaTeX, Unicode math, et les images, en montrant que MathML offre une sémantique claire et une intégration native dans le DOM. L'article aborde également les variations de support des lecteurs d'écran, comme VoiceOver, JAWS et NVDA, et illustre ces concepts avec l'exemple du théorème de Pythagore et une preuve mathématique plus complexe.
L'autrice partage son expérience avec la cataracte, diagnostiquée à 30 ans. Cette condition a modifié son utilisation du web, notamment en développant une photophobie, la poussant à privilégier les thèmes sombres. Elle souligne l'importance de proposer les deux thèmes pour répondre aux besoins variés des utilisateurs, comme son ami sourdaveugle qui préfère un thème inversé. Elle utilise aussi l'extension Dark Reader, bien que parfaite. Son témoignage illustre l'importance de l'accessibilité pour tous.
L'inclusion des personnes Sourdes ne se limite pas à l'accessibilité numérique, mais passe aussi par la reconnaissance et l'utilisation de la Langue des Signes Française (LSF) comme langue à part entière. Cindy Quai, autrice de l'article, explique que la LSF n'est pas une simple traduction du français, mais une culture et une vision du monde distincte. Elle partage son expérience d'apprentissage et d'enseignement, soulignant que la véritable inclusion se fait en utilisant la LSF et en respectant les codes et la culture Sourde. L'article met en lumière l'importance de la pédagogie adaptée et de l'utilisation de la LSF pour une inclusion effective.
L'article souligne l'importance cruciale de l'attribut lang dans la balise <html> pour l'accessibilité web. Cet attribut indique la langue du contenu aux navigateurs et lecteurs d'écran, évitant ainsi des erreurs de prononciation et améliorant l'expérience utilisateur pour les personnes malvoyantes ou dyslexiques. Malgré son importance, l'omission de cet attribut reste un problème récurrent, comme le montre le rapport WebAIM Million. L'auteur insiste sur la nécessité d'une meilleure éducation en accessibilité pour les développeurs.
L'article explique comment associer explicitement des éléments HTML, comme les labels et les champs de formulaire, en utilisant des IDREFs. Il souligne l'importance de cette pratique pour améliorer l'accessibilité, notamment pour les technologies d'assistance. L'auteur détaille les bonnes pratiques, telles que l'unicité et l'existence des IDs, et propose des outils pour détecter les références brisées. Un exemple concret illustre l'utilisation de l'attribut for dans une balise <label> pour référencer l'ID d'un champ <input>.
L'article "Referencing HTML elements inside Shadow DOM" de HTMHell aborde les défis liés à l'accessibilité des composants Web utilisant le Shadow DOM. Il explique comment référencer des éléments HTML encapsulés dans le Shadow DOM, en particulier pour les composants comme les cases à cocher. Le problème principal est que les éléments à l'intérieur du Shadow DOM ne peuvent pas être directement référencés, ce qui pose des problèmes d'accessibilité. L'auteur propose une solution en deux phases, avec la Phase 1 déjà disponible dans Chrome Canary. Cette phase introduit l'attribut shadowRootReferenceTarget pour permettre aux éléments comme les étiquettes (<label>) de référencer correctement les éléments internes du Shadow DOM, améliorant ainsi l'accessibilité et la fonctionnalité des composants Web.
L'article explore l'importance de l'accessibilité numérique des médias d'information, soulignant que 7,7 millions de personnes en France sont en situation d'illectronisme et 14,5 millions ont des limitations fonctionnelles. Il rappelle que l'accessibilité est non seulement une mission des médias mais aussi une obligation légale, encadrée par des lois depuis 2005 et renforcée par l'European Accessibility Act en 2025. L'auteure interroge la pertinence pour les médias de rester inaccessibles, alors que l'information numérique est devenue dominante.
L'article explore les problèmes de superposition des éléments en CSS et les solutions modernes comme les popovers et les dialogs. Il explique comment les contextes de superposition (stacking contexts) peuvent compliquer l'utilisation de z-index et comment les éléments comme les popovers et les dialogs peuvent accéder à la "top layer" pour résoudre ces problèmes. Cependant, l'article met en lumière un conflit potentiel entre les popovers et les dialogs, notamment en matière d'accessibilité, où un utilisateur au clavier peut rencontrer des difficultés pour interagir avec un popover (comme une notification toast) lorsqu'un dialog est ouvert. L'auteur illustre ce problème avec un exemple concret et un CodePen démonstratif.