Draft UI is a collection of simply designed React components focused on making web accessibility as easy as copy & paste.
Faire un bouton SVG accessible : tout un art !
Un exemple de piège au clavier.
Ici, c'est la zone de recherche dont on ne peut pas sortir au clavier (tab)
Bonnes pratiques pour faire une note de bas de page accessible.
Les superpositions d'accessibilité (qui modifient le contraste, la police...) ne rendent pas un site web accessible ni conforme à la législation européenne, alerte le Forum européen des personnes handicapées qui pointe les limites de ce dispositif.
1 juin 2023 • Par Cassandre Rogeret / Handicap.fr
Diplômé d'un master 2 MIAGE en Systèmes d'Information, Multimédia et internet, je m'efforce depuis 20 ans à explorer toutes les facettes du monde numérique dans lequel nous évoluons au quotidien pour vous apporter la meilleure expertise possible dans vos projets. Que ce soit un site web ou une application, je saurai trouver la solution idéale pour répondre à vos besoins.
Ostendo est une extension navigateur qui permet d’afficher, dans vos résultats de recherches Google, le niveau de conformité au RGAA des sites français.
Les sites concernés par le RGAA sont tenus d’avoir une déclaration d’accessibilité sur leur site avec l’état de conformité visible et présent en page d’accueil. Cet état de conformité découle d’un audit d’accessibilité du site (externe ou internet).
C'est compliqué de faire un bloc (card) entièrement cliquable, accessible et avec son texte sélectionnable...
@media (prefers-reduced-motion: no-preference) {
img {
animation-play-state: running;
/ turn animations on if user doesn't mind /
}
}
@media not (update: fast) {
img {
animation-play-state: paused;
/ except, turn them off again if the browser can't draw them effectively anyway /
}
}
Ainsi donc, le menu-builder de WordPress ne produit pas nativement un menu accessible, et il faut beaucoup de contorsions pour obtenir un résultat accessible.
Où l'on découvre en filigrane que les menus de WordPress ne sont pas accessibles par défaut.
Dans cette première partie nous allons voir comment mettre en place un menu accessible simple, sans sous-menu : récapitulatif des bases, explications des notions importantes et des moyens pour rendre notre menu à un niveau accessible. C’est parti !
Une police de caractères optimisée pour sa lisibilité en toutes circonstances
Un ensemble d'outils et de méthodes pour tester manuellement l'accessibilité d'une page web.
Ressources pour concevoir des services utiles et utilisables pour tous.
(Avec un travers côté écriture inclusive)
Une revue de plein de composant classique pour une page web et comment les rendre accessibles.
Tout ce qu'il faudrait faire pour rendre accessible des notes de bas de page.
Parce qu’il est parfois difficile de s'y retrouver parmi toutes les informations que nous fournit notre moteur de recherche préféré, cet article a pour objectif de présenter un ensemble de sites (avec présentation brève) dont vous aurez besoin pour mettre en place l'accessibilité numérique dans vos pages web.
Pour bien utiliser abbr, il faut mettre l'explication après (en dehors du tag) et pas en title parce que title ne fonctionne pas partout (loin de là)
The Functional Accessibility Evaluator (FAE) evaluates a website or a single web page based on the W3C Web Content Accessibility Guidelines (WCAG) 2.0 Level A and AA requirements.
Un bookmarklet pour tester l'accessibilité d'un site
Il s’agit purement et simplement d’un détournement de caractères. Donc, ce n’est pas aux logiciels de s’adapter à vos bêtises. C’est à vous d’arrêter de faire des bêtises.
« Il s’agit purement et simplement d’un détournement de caractères. Donc, ce n’est pas aux logiciels de s’adapter à vos bêtises. C’est à vous d’arrêter de faire des bêtises. »
NB : ceci s'applique logiquement aussi à l'écriture inclusive (nouveaux mots, graphie avec points médians…)
Accessible et ergonomique : 2 enjeux pour un objectif : rendre un tableau triable
Une (future) nouveauté en CSS permettant d'ajuster le contraste en CSS (non, ça n'est pas automatique, c'est juste un choix entre plusieurs valeurs).
Une enquête sur un dossier un peu chaud du domaine de l'accessibilité en France et des outils de surcouche.
Un media player en javascript, accessible et configurable
la webextention Tanaguru permet d'analyser une partie des critères d'accessibilité du RGAA directement dans votre navigateur web.
Et si vous découvriez à l'aide d'un petit jeu les problèmes de navigation que l'on peut rencontrer sur un site web lorsqu'on ne peut naviguer qu'au clavier.
Un outil très visuel pour trouver des combinaisons de couleurs accessibles.
TL;DR #
aria‑label, aria‑labelledby, and aria‑describedby can all be used to bring extra clarity to a given element when it's exposed to assistive technology.
aria‑label overrides an element's name with contents you specify.
aria‑labelledby replaces an element's name with contents from another node on the page. You'd use this when you'd already have a visible label anyways.
aria‑describedby sets your element's description to the contents of another node on the page. This is great for noncritical, supplemental information.
Un guide sur l'accessibilité avec des cas d'usage pour bien comprendre les enjeux. (en anglais)
Un fork de slick slider vraiment respectueux des normes d'accessibilité.
Cette checklist est un point de départ pour concevoir un produit accessible. Elle vous aidera à améliorer l’expérience utilisateur des personnes en situation de handicap.
Intimidation via avocat. Une pratique navrante.
Si vous voulez vraiment utiliser l'écriture inclusive abrégée, remplacez le point médian par le point d'hyphénation pour une meilleure accessibilité.
Explications de comment rendre accessible des éléments canvas avec Aria
Quelques principes pour rendre un graphique en barres accessible.
Il y a plein de choses à prendre en compte :
Gérez à distance le quotidien de votre proche
Agenda A2 est le dispositif qui :
structure les journées des personnes en perte de repères temporels
soulage le quotidien des aidants
Remplissez à distance l’agenda de votre proche. Il le consulte à domicile grâce à son VisioAgenda, sans manipulation.
Simplifiez vos appels visio, votre proche décroche sans manipulation !
Dans ce dossier nous vous présentons les outils qui vont vous permettre de tester et vérifier l'accessibilité de vos pages web.
Faire une palette de couleurs accessible à tous est nécessaire pour garantir une consultation de votre site web dans le maximum de contextes (en particulier au soleil avec un mobile, ou dans le train).
Cet article décrit une méthode pour créer une palette accessible à partir de 2 couleurs contraintes.
Une Prez et sa vidéo : https://www.youtube.com/watch?v=Jz16GvX6aAE
Un FavLet pour valider le HTML généré (très utile pour valider l'accessibilité d'une page web)
Une police de caractère dessinée pour être lue facilement, même dans des conditions difficiles.
Idéale pour améliorer l'accessibilité d'un texte imprimé (ou web).
Les carousels sont une plaie d'un point de vue accessibilité.
Un bibliothèque de composants React conçus dans le respect de l'accessibilité.
Exploration de solutions pour que les différentes formes d'écritures inclusive restent accessibles à tous.
Nous sommes régulièrement contactés pour savoir comment utiliser un « langage non genré » de manière accessible. Afin de vous aider à y voir plus clair, cet article vous propose un tour d’horizon des possibilités et de leur restitution par les lecteurs d’écran.
Vincent Valetin propose une synthèse sur l’accessibilité des graphies de l’inclusivité.
Certaines formes d'écriture inclusives (celles avec les · ou . ou -) posent de gros problèmes d'accessibilité (en plus de poser des problèmes de SEO).