Bonnes Pratiques Web & Cloud

A set of accessible front-end components for the Astro static site builder. - GitHub - markteekman/accessible-astro-components: A set of accessible front-end components for the Astro static site builder.

IBM a dévoilé de nouveaux outils open source conçus pour renforcer l’accessibilité de sites web et applications, sans sacrifier la sécurité : Equal Access Toolkit et Accessibility Checker.

Le groupe cible les développeurs et les testeurs appelés à intégrer directement l’accessibilité dans leurs flux de travail. Pour inclure davantage les personnes atteintes d’un handicap.

IBM Equal Access Toolkit fournit un ensemble de lignes directrices à l’attention des équipes de développement en entreprise.

Accessibility Checker est une extension pour les navigateurs web Chrome et Firefox. L’outil permet d’automatiser l’évaluation et la réponse aux problèmes d’accessibilité.

Les outils présentés ici vérifient les critères du WCAG 2.1, selon les 3 niveaux d’exigence : simple A (A), double A (AA), et triple A (AAA).

Ils sont ceux que nous conseillons et utilisons. Bien sûr, des équivalents peuvent exister mais ils sont majoritairement rédigés en anglais et des notions sont donc recommandées.

L'inspecteur d'accessibilité de Firefox fournit sans doute la meilleure prise en charge intégrée du navigateur pour l'accessibilité et a ajouté la prise en charge de la simulation de déficience visuelle dans Firefox 70. Les DevTools de Chrome 83 comblent l'écart en ajoutant la prise en charge de la vision floue et quatre types de déficiences de la vision des couleurs :

Protanopie : incapacité à percevoir la lumière rouge
Deutéranopie : incapacité à percevoir le feu vert
Tritanopie : incapacité à percevoir la lumière bleue
Achromatopsie : incapacité à percevoir n'importe quelle couleur sauf les nuances de gris

Ces outils permettent aux développeurs de visualiser l'expérience des utilisateurs ayant des déficiences visuelles et d'ajuster les schémas de couleurs et les conceptions en conséquence pour offrir une meilleure accessibilité. De nombreux outils existent déjà pour tester ces limitations, mais avoir cette prise en charge directement dans DevTools du navigateur rend cela plus accessible pour tous les développeurs.

Une meilleure prise en charge de la vision de l'accessibilité est disponible dans les navigateurs pour les développeurs tels que Polypane, qui comprend des émulations pour le daltonisme, le glaucome, la prebythie et un soleil éclatant.

La prochaine version 83 de Chrome comprend des mises à jour importantes de DevTools, y compris l'émulation des déficiences visuelles et des paramètres régionaux des utilisateurs, le débogage de cross-origin opener policy (COOP) et le débogage de cross-origin embedder policy (COEP) et le filtrage des requêtes réseau pour les chemins des cookies.

Learn how to get started testing the accessibility status of your website using the world’s foremost screen reader, JAWS (Job Access With Speech).

During QA on almost every web project I’ve worked on, a time comes when somebody files a bug report like this:

These links should open in a new window.

I usually try to have a conversation with them about how opening links in a new window is unexpected behavior, it can be jarring, we should let users decide how to use their browser, et cetera, but I have never won that battle and always end up implementing target="_blank".

On one project I inherited though, a bunch of links were already opening in a new window. I was doing an accessibility audit and remediation. In order to keep the links opening in a new window and meet WCAG guidelines, links that opened in a new window needed:

a visual indication that they open in a new window
textual indication that the link would open in a new window for screen readers
rel="noopener noreferrer" for security

Good practices for HTML and CSS are hard to find. Read about 5 cases where you can create a user-friendly, or clumsy, interface using only HTML and CSS.

Apprendre le HTML, le CSS et le JavaScript est utile si vous voulez devenir développeur web, mais vos connaissances devront aller au delà de la simple utilisation des technologies — vous devrez les utiliser de manière responsable, de la bonne manière, de façon à maximiser l'audience de vos sites web et ne priver personne de leur usage. Pour y parvenir, vous devrez respecter les bonnes pratiques (lesquelles sont démontrées à travers les sujets du HTML, du CSS et du JavaScript), effectuer des tests sur les différents navigateurs et prendre l'accessibilité en considération dès le départ. Dans ce module, nous allons traiter de cette dernière en détail.

Color is a foundational element in any creative work. When I took the challenge to design the Color Accessibility feature for Adobe Color, it wasn’

Ce formulaire vous permet de générer une déclaration sur l'accessibilité.
Instructions

La déclaration sur l'accessibilité doit être facile à trouver pour l'utilisateur. Un lien vers la déclaration sera disponible sur chaque page internet, par exemple dans un pied de page fixe. Nous recommandons de mettre en ligne la déclaration à une adresse de cette forme : https://[nomdusite.lu]/[code-langue]/support/accessibilite.html par exemple : https://sip.gouvernement.lu/fr/support/accessibilite.html Pour les applications mobiles, la déclaration doit être disponible à partir de l’application mobile et éventuellement placée sur le site internet de l'organisme du secteur public qui a développé l'application mobile concernée. Si le site est disponible en plusieurs langues, il est recommandé de fournir la déclaration d’accessibilité dans chaque langue du site.
Générez votre déclaration

Les champs marqués d’un * sont obligatoires.

Tools and techniques I use for manual accessibility testing.