,
79 tweets,
53 min read
Read on Twitter
Aujourd’hui, les #WCAG ont 20 ans ! 🎉🎂
Pour fêter ça, voici un p’tit zrèd #accessibilité web où je vais donner une recommandation par jour, en espérant que ça serve à qlq personnes.
Il sera question ici d’accessibilité et pas nécessairement de conformité.
On commence par UX-UI.
Pour fêter ça, voici un p’tit zrèd #accessibilité web où je vais donner une recommandation par jour, en espérant que ça serve à qlq personnes.
Il sera question ici d’accessibilité et pas nécessairement de conformité.
On commence par UX-UI.
👀 Visibilité du texte
Un ratio de contraste d’au moins 4,5 avec la couleur qui l’entoure est nécessaire.
Tolérance d’au moins 3 pour du “grand” texte (rendu équiv. à au moins 24 px ou 18,5 px pour du texte en gras) et les graphs / pictos non décoratifs.
Un ratio de contraste d’au moins 4,5 avec la couleur qui l’entoure est nécessaire.
Tolérance d’au moins 3 pour du “grand” texte (rendu équiv. à au moins 24 px ou 18,5 px pour du texte en gras) et les graphs / pictos non décoratifs.
Quant au texte / picto superposé sur 1 image, vidéo ou dégradé.⚠
Même si le contraste est OK au départ, gros risques pendant la vie du site : déplacement du texte dû à son agrandissement à 200 %, redimension de fenêtre (fluidité du responsive), photo / texte différent (contrib.)
Même si le contraste est OK au départ, gros risques pendant la vie du site : déplacement du texte dû à son agrandissement à 200 %, redimension de fenêtre (fluidité du responsive), photo / texte différent (contrib.)
Certains utilisateurs doivent agrandir le texte ou les espacements ds les préf. du système, du navigateur ou via une appli tiers.
La taille des caractères doit pouvoir être agrandie jusqu’à 200 % sans perte d’information ou de fonctionnalité.
⚠ blocs pensés avec 1 hauteur fixe !
La taille des caractères doit pouvoir être agrandie jusqu’à 200 % sans perte d’information ou de fonctionnalité.
⚠ blocs pensés avec 1 hauteur fixe !
🚥Communication par la couleur.
Pour communiquer une info, un état ou une fonction, ne pas utiliser QUE la couleur.
Il faut y ajouter une différence de forme, de taille ou de texture (par ex. item actif dans un menu, champ de formulaire en erreur, etc.) ...ou du texte. 🤷♀️
Pour communiquer une info, un état ou une fonction, ne pas utiliser QUE la couleur.
Il faut y ajouter une différence de forme, de taille ou de texture (par ex. item actif dans un menu, champ de formulaire en erreur, etc.) ...ou du texte. 🤷♀️
Focus clavier ⌨️
Tout élément qui déclenche une action au clic ou au survol doit être actionnable au clavier et donc prendre le focus.
Toujours charter le focus (pas juste un changement de couleur + contraste d’au moins 3) ou laisser celui par défaut propre à chaque navigateur.
Tout élément qui déclenche une action au clic ou au survol doit être actionnable au clavier et donc prendre le focus.
Toujours charter le focus (pas juste un changement de couleur + contraste d’au moins 3) ou laisser celui par défaut propre à chaque navigateur.
Formulaires✔️ 1/2
Chaque champ doit avoir une étiquette (avec dedans un libellé + aide à la saisie si un format spécifique est attendu) ≠ placeholder (texte facultatif dans le champs qui disparaît lors de la saisie et qui peut contenir une info non essentielle suff. contrastée).
Chaque champ doit avoir une étiquette (avec dedans un libellé + aide à la saisie si un format spécifique est attendu) ≠ placeholder (texte facultatif dans le champs qui disparaît lors de la saisie et qui peut contenir une info non essentielle suff. contrastée).
Formulaires✔️ 2/2
La notion de champ obligatoire / optionnel apparaît en début de formulaire et / ou dans l’étiquette en fonction des cas, soit de façon explicite, soit avec un signe et sa légende avant le formulaire.
La notion de champ obligatoire / optionnel apparaît en début de formulaire et / ou dans l’étiquette en fonction des cas, soit de façon explicite, soit avec un signe et sa légende avant le formulaire.
❌ Ha ! Et les messages d’erreur doivent être explicites et contenir un exemple s’il y a un format attendu.
Ils apparaissent directement sous chaque champ concerné et / ou sont regroupés en haut du formulaire et chaque erreur contient alors une ancre qui pointe vers son champ.
Ils apparaissent directement sous chaque champ concerné et / ou sont regroupés en haut du formulaire et chaque erreur contient alors une ancre qui pointe vers son champ.
⚓ Les liens dans du texte doivent être clairement perceptibles. Ne pas utiliser QUE la couleur du texte pour les différencier.
Un soulignement (avec un contraste de 3 ou + avec le fond) reste la meilleure option.
Liens vers des fichiers : tjrs indiquer le format et la taille.
Un soulignement (avec un contraste de 3 ou + avec le fond) reste la meilleure option.
Liens vers des fichiers : tjrs indiquer le format et la taille.
Plus les intitulés de liens / boutons sont explicites et uniques, plus vous réduirez les hésitations et l’incompréhension des utilisateurs.
S’il y a plusieurs “Lire la suite”, ils devront mettre en contexte visuellement ..ou avec un lecteur d’écran - très contraignant.😕
+ SEO 😍
S’il y a plusieurs “Lire la suite”, ils devront mettre en contexte visuellement ..ou avec un lecteur d’écran - très contraignant.😕
+ SEO 😍
Texte et typographie 📜 1/3
Pour rendre la lecture et la compréhension plus facile pour les personnes av. des troubles cognitifs / intellectuels :
des caractères suffisamment grands et espacés,
des lignes de 80 car. max,
pas de longs passages en italique, gras ou capitales (maj.)
Pour rendre la lecture et la compréhension plus facile pour les personnes av. des troubles cognitifs / intellectuels :
des caractères suffisamment grands et espacés,
des lignes de 80 car. max,
pas de longs passages en italique, gras ou capitales (maj.)
Texte & typographie 📜 2/3
Éviter les polices fantaisistes, celles sans-serif sont préférables.
Ne pas justifier le texte. En drapeau c'est bien.
L’absence d’accents sur les capitales peut changer le sens des mots à la lecture et lors de la vocalisation par les lecteurs d’écran.
Éviter les polices fantaisistes, celles sans-serif sont préférables.
Ne pas justifier le texte. En drapeau c'est bien.
L’absence d’accents sur les capitales peut changer le sens des mots à la lecture et lors de la vocalisation par les lecteurs d’écran.
Texte & typographie 📜 3/3
Il est préférable d'éviter le jargon, d’utiliser des tournures simples et d’expliciter les abréviations lors de leur première évocation dans un texte.
Connaissez-vous le "Facile à lire et à comprendre" (FALC) ? unapei.org/publication/li…
Il est préférable d'éviter le jargon, d’utiliser des tournures simples et d’expliciter les abréviations lors de leur première évocation dans un texte.
Connaissez-vous le "Facile à lire et à comprendre" (FALC) ? unapei.org/publication/li…
Carrousels (sliders) 🎞 1/2
Pour pouvoir naviguer dans un carrousel, prévoir des boutons (et pas que le swipe) pour les utilisateurs qui utilisent le clavier, une commande vocale, etc.
Ça peut être des flèches de type < > (avec un contraste tjrs d’au moins 3 avec leur fond)...
Pour pouvoir naviguer dans un carrousel, prévoir des boutons (et pas que le swipe) pour les utilisateurs qui utilisent le clavier, une commande vocale, etc.
Ça peut être des flèches de type < > (avec un contraste tjrs d’au moins 3 avec leur fond)...
Carrousels 🎞 2/2
...ou des picto / cercles en dessous. Différencier alors l’item actif avec une forme / taille différente (pas que la couleur) + toujours un état de focus (contraste de 3 ou +) et prévoir une surface de touch suffisante.
Connaissez-vous doisjeutiliser.fr/unCarrousel/ ?
...ou des picto / cercles en dessous. Différencier alors l’item actif avec une forme / taille différente (pas que la couleur) + toujours un état de focus (contraste de 3 ou +) et prévoir une surface de touch suffisante.
Connaissez-vous doisjeutiliser.fr/unCarrousel/ ?
🛵 Pouvoir arrêter un contenu en mouvement (de + de 3 secondes).
Il doit pouvoir être stoppé rapidement par l’utilisateur : prévoir un bouton Pause / Play (suffisamment contrasté) et son focus.
Ex. un carrousel ou une vidéo en défilement auto (autoplay)… Arghh !
Il doit pouvoir être stoppé rapidement par l’utilisateur : prévoir un bouton Pause / Play (suffisamment contrasté) et son focus.
Ex. un carrousel ou une vidéo en défilement auto (autoplay)… Arghh !
📱 Mobile / Responsive
Fini l’orientation forcée : l’utilisateur doit pouvoir choisir l’orientation qui lui convient (et certains n'ont pas le choix), portrait ou paysage.
..et puis le Responsive Web Design a tout de même 9 ans. 🦚
Fini l’orientation forcée : l’utilisateur doit pouvoir choisir l’orientation qui lui convient (et certains n'ont pas le choix), portrait ou paysage.
..et puis le Responsive Web Design a tout de même 9 ans. 🦚
🎥 🎙 Les vidéos et fichiers audio 1/2 ont bien :
un titre, un moyen de contrôler la lecture / pause, le volume et l’avancement (à la souris, au touch et au clavier) avec focus visible,
une transcription textuelle soit directement dans le lecteur, juste après ou via un lien,...
un titre, un moyen de contrôler la lecture / pause, le volume et l’avancement (à la souris, au touch et au clavier) avec focus visible,
une transcription textuelle soit directement dans le lecteur, juste après ou via un lien,...
Vidéos - fichiers audio 2/2
...des sous-titres pour les sourds et malentendants (av. toutes les informations sonores indispensables à la compréhension) bien visibles, et une audiodescription si nécessaire.
V. les recommandations Orange pour + de détails : a11y-guidelines.orange.com/others/video-a…
...des sous-titres pour les sourds et malentendants (av. toutes les informations sonores indispensables à la compréhension) bien visibles, et une audiodescription si nécessaire.
V. les recommandations Orange pour + de détails : a11y-guidelines.orange.com/others/video-a…
Ha oui au fait, un lecteur vidéo / audio accessible HTML5 très bien : Able Player, “skinnable” en CSS avec énormément de fonctionnalités disponibles par défaut. 👍
ableplayer.github.io/ableplayer/dem…
PS : ⚠️ pour les personnes épileptiques, pas plus de 3 flash / seconde 💥❌
ableplayer.github.io/ableplayer/dem…
PS : ⚠️ pour les personnes épileptiques, pas plus de 3 flash / seconde 💥❌
#HTML
Rappelons qu’une majorité des problèmes d’accessibilité sont aujourd’hui encore dus à du HTML incorrect : passer son code au validateur pour corriger les erreurs et oublis ne fait jamais de mal.
Commencer aussi par un doctype valide <!DOCTYPE html>.
validator.w3.org
Rappelons qu’une majorité des problèmes d’accessibilité sont aujourd’hui encore dus à du HTML incorrect : passer son code au validateur pour corriger les erreurs et oublis ne fait jamais de mal.
Commencer aussi par un doctype valide <!DOCTYPE html>.
validator.w3.org
👅 Langue
S’assurer que la langue principale de la page est définie avec l’attribut lang=”xx” sur l’élément <html> et sur les mots dans une autre langue (avec un <span> par ex.)
Ça permet entre autres que les lecteurs d’écran (SR - Screen Reader) utilisent la bonne prononciation.
S’assurer que la langue principale de la page est définie avec l’attribut lang=”xx” sur l’élément <html> et sur les mots dans une autre langue (avec un <span> par ex.)
Ça permet entre autres que les lecteurs d’écran (SR - Screen Reader) utilisent la bonne prononciation.
💬 Titre de la page.
Chaque page doit avoir un élément <title> unique, explicite et synthétique. C’est la première chose qu’entendent les utilisateurs de lecteurs d’écran quand ils arrivent ou reviennent sur une page.
+ SEO 😍
Voir
Chaque page doit avoir un élément <title> unique, explicite et synthétique. C’est la première chose qu’entendent les utilisateurs de lecteurs d’écran quand ils arrivent ou reviennent sur une page.
+ SEO 😍
Voir
Régions / landmarks ARIA.
Utiliser les éléments sémantiques <header role=”banner”><nav role=”navigation”><main role=”main”><footer role=”contentinfo”> pour structurer les grandes régions d'une page.
C’est un autre moyen de naviguer pour les ut. de SR.
Voir
Utiliser les éléments sémantiques <header role=”banner”><nav role=”navigation”><main role=”main”><footer role=”contentinfo”> pour structurer les grandes régions d'une page.
C’est un autre moyen de naviguer pour les ut. de SR.
Voir
Titres.
Utiliser des <h1> (un ou +) à <h6> pour introduire une partie de contenu est un autre moyen de structurer une page.
Cela aide certains utilisateurs à comprendre et naviguer dans la page + facilement (comme un sommaire 📖).
Ne pas laisser de trou et éviter les répétitions.
Utiliser des <h1> (un ou +) à <h6> pour introduire une partie de contenu est un autre moyen de structurer une page.
Cela aide certains utilisateurs à comprendre et naviguer dans la page + facilement (comme un sommaire 📖).
Ne pas laisser de trou et éviter les répétitions.
⚓ Lien ≠ 🆗 Bouton.
Un <a href> amène quelque part >> contenu dans la même page ou ailleurs.
Un <button type=”button”> fait / déclenche quelque chose.*
☠️ <div class="button" onClick=… > 🚫
👉 Voir [En] marcysutton.com/links-vs-butto…
* type="submit" pour soumettre un formulaire.
Un <a href> amène quelque part >> contenu dans la même page ou ailleurs.
Un <button type=”button”> fait / déclenche quelque chose.*
☠️ <div class="button" onClick=… > 🚫
👉 Voir [En] marcysutton.com/links-vs-butto…
* type="submit" pour soumettre un formulaire.
Texte agrandi jusqu'à 200 % - 1/2.
Certains utilisateurs ont besoin de grossir la taille du texte ou des espacements (interlignage, etc.) dans les préférences du système, du navigateur ou via une appli tiers.
➡️ Utiliser des unités relatives (rem, em, %) pour les font-size et…
Certains utilisateurs ont besoin de grossir la taille du texte ou des espacements (interlignage, etc.) dans les préférences du système, du navigateur ou via une appli tiers.
➡️ Utiliser des unités relatives (rem, em, %) pour les font-size et…
Texte agrandi - 2/2.
...garder les conteneurs extensibles (utiliser min-height, height en em, etc.) pour que le contenu ne disparaisse pas ou que le texte ne se chevauche pas s’il est grossi à 200 %.
La page doit rester lisible et fonctionnelle même si c'est moins "joli". 🤷♂️
...garder les conteneurs extensibles (utiliser min-height, height en em, etc.) pour que le contenu ne disparaisse pas ou que le texte ne se chevauche pas s’il est grossi à 200 %.
La page doit rester lisible et fonctionnelle même si c'est moins "joli". 🤷♂️
Le fameux ALT ! - 1/2.
L’attribut alt des <img> est obligatoire et doit soit :
- être vide (alt=””) si l’image est décorative ou n’apporte rien de plus que le contenu qui l’entoure,
- contenir la description (ou texte) de ce qu’elle contient,...
L’attribut alt des <img> est obligatoire et doit soit :
- être vide (alt=””) si l’image est décorative ou n’apporte rien de plus que le contenu qui l’entoure,
- contenir la description (ou texte) de ce qu’elle contient,...
Attribut alt - 2/2.
- qd l’image est le seul contenu d’un <a href>, <button> ou dans un <input type=”image”>, la valeur de l'attr. alt doit décrire la destination du lien ou la fonction du bouton et de préférence contenir le texte de l'image.
Voir [En] axesslab.com/alt-texts/ 👍
- qd l’image est le seul contenu d’un <a href>, <button> ou dans un <input type=”image”>, la valeur de l'attr. alt doit décrire la destination du lien ou la fonction du bouton et de préférence contenir le texte de l'image.
Voir [En] axesslab.com/alt-texts/ 👍
Quant aux pictos SVG et icon-fonts en “CSS content”, quand ils accompagnent un texte (visible ou juste exposé aux technologies d’assistance - TA), il faut les rendre invisibles aux TA avec un attr. aria-hidden="true" (+ focusable="false" pour les <svg>).
sarasoueidan.com/blog/accessibl…
sarasoueidan.com/blog/accessibl…
Focus 1/2
Naviguer au clavier entre les élément interactifs : pas de :focus {outline: 0;} / {outline: none;} ou alors comme le disait Eric Meyer en 2008 dans son CSS Reset, définir un style de focus distinct (malheureusement la plupart l’ont ignoré)...
👉 outlinenone.com
Naviguer au clavier entre les élément interactifs : pas de :focus {outline: 0;} / {outline: none;} ou alors comme le disait Eric Meyer en 2008 dans son CSS Reset, définir un style de focus distinct (malheureusement la plupart l’ont ignoré)...
👉 outlinenone.com
Focus 2/2
Donc pour la navigation au clavier entre les <a href>, <button>, <input>...
Soit :
- laisser le focus par défaut (propre à chq navigateur)
- déclarer ensemble :hover, :focus pour un rendu identique*
- créer un focus en accord avec la charte graphique*.
* contraste de 3+
Donc pour la navigation au clavier entre les <a href>, <button>, <input>...
Soit :
- laisser le focus par défaut (propre à chq navigateur)
- déclarer ensemble :hover, :focus pour un rendu identique*
- créer un focus en accord avec la charte graphique*.
* contraste de 3+
Contenu “invisible”.
- display:none / visibility:hidden / attribut HTML hidden ➡️ caché à tous,
- .sr-only (+ .sr-only:focus) ➡️ caché visuellement mais pas aux TA,
- aria-hidden="true" ➡️ caché aux TA seulement.
👉 [En] scottohara.me/blog/2017/04/1…
👉 [Fr] lelutinduweb.fr/alternatives-t…
- display:none / visibility:hidden / attribut HTML hidden ➡️ caché à tous,
- .sr-only (+ .sr-only:focus) ➡️ caché visuellement mais pas aux TA,
- aria-hidden="true" ➡️ caché aux TA seulement.
👉 [En] scottohara.me/blog/2017/04/1…
👉 [Fr] lelutinduweb.fr/alternatives-t…
Toujours laisser un border (même invisible) aux <button> et <input> pour qu’ils restent perceptibles par les utilisateurs sous WHCM (Windows High Contrast Mode).
Attention donc avec Material Design qui a un border: none sur ses boutons et champs au focus (Bootstrap est OK).
Attention donc avec Material Design qui a un border: none sur ses boutons et champs au focus (Bootstrap est OK).
Liens identiques
Si vous *devez* avoir des liens avec des intitulés identiques 😣, rendez-les plus explicites pour les util. de TA avec soit :
- du texte caché visuellement (qui complémente le texte visible),
- un attribut title (dont la valeur commence par le texte visible).
Si vous *devez* avoir des liens avec des intitulés identiques 😣, rendez-les plus explicites pour les util. de TA avec soit :
- du texte caché visuellement (qui complémente le texte visible),
- un attribut title (dont la valeur commence par le texte visible).
Navigation
Certains utilisateurs auront du mal à utiliser un menu, surtout s’il est complexe. Est-il possible de naviguer dans le site autrement ?
Fournir au moins une 2e option pour atteindre les contenus : un moteur de recherche et / ou un plan de site (sitemap) par exemple.
Certains utilisateurs auront du mal à utiliser un menu, surtout s’il est complexe. Est-il possible de naviguer dans le site autrement ?
Fournir au moins une 2e option pour atteindre les contenus : un moteur de recherche et / ou un plan de site (sitemap) par exemple.
☑️ Formulaires 1/x
Bon, la correspondance entre les attr. for et id c’est juste _la base_.
S’il est impossible d’avoir un intitulé visible, au moins le mettre dans un attr. title.
Si une aide à la saisie est nécessaire, la mettre dans le <label>, pas dans l’attr. placeholder…
Bon, la correspondance entre les attr. for et id c’est juste _la base_.
S’il est impossible d’avoir un intitulé visible, au moins le mettre dans un attr. title.
Si une aide à la saisie est nécessaire, la mettre dans le <label>, pas dans l’attr. placeholder…
Formulaires 2/x
S’il y a beaucoup d’info (type contraintes de MdP), la mettre visible pour tous dès le départ, dans un bloc avec un id qui sera référencé par un aria-describedby.
Champ obligatoire = attribut required + aria-invalid=”false” - il est possible de désactiver…
S’il y a beaucoup d’info (type contraintes de MdP), la mettre visible pour tous dès le départ, dans un bloc avec un id qui sera référencé par un aria-describedby.
Champ obligatoire = attribut required + aria-invalid=”false” - il est possible de désactiver…
Formulaires 3/x
...la validation native des navigateurs avec l’attr. novalidate sur le <form>.
Pour scinder des formulaires complexes, qui ont des intitulés répétitifs ou regrouper des checkboxs et boutons radios : utiliser un <fieldset> avec son titre unique dans un <legend>.
...la validation native des navigateurs avec l’attr. novalidate sur le <form>.
Pour scinder des formulaires complexes, qui ont des intitulés répétitifs ou regrouper des checkboxs et boutons radios : utiliser un <fieldset> avec son titre unique dans un <legend>.
Formulaires 4/x
Pour faciliter le remplissage d’un formulaire, il est demandé d’ajouter aux champs un attr. autocomplete qui peut contenir une ou plusieurs valeurs et qui, si l’U a autorisé cette fonctionnalité, remplira automatiquement les champs.
🔎 developer.mozilla.org/fr/docs/Web/HT…
Pour faciliter le remplissage d’un formulaire, il est demandé d’ajouter aux champs un attr. autocomplete qui peut contenir une ou plusieurs valeurs et qui, si l’U a autorisé cette fonctionnalité, remplira automatiquement les champs.
🔎 developer.mozilla.org/fr/docs/Web/HT…
Formulaires 5/x - 🛑Erreurs.
Quand il y a 1 ou plusieurs erreurs après soumission d’un formulaire, elles peuvent être soit :
- présentées en bloc juste avant le formulaire,
- à proximité de chaque champ en erreur.
Les messages d’erreurs doivent être soit :
- générés à la volée...
Quand il y a 1 ou plusieurs erreurs après soumission d’un formulaire, elles peuvent être soit :
- présentées en bloc juste avant le formulaire,
- à proximité de chaque champ en erreur.
Les messages d’erreurs doivent être soit :
- générés à la volée...
6/x
...en JS (pas dans le code source)
- présents mais avec l’attribut hidden.
Quand c’est un bloc :
- il se trouve juste avant le <form> dans le code,
- il a un attr. tabindex="-1",
- il doit contenir le nombre total d’erreurs,
- chaque message d’erreur est explicite (avec un...
...en JS (pas dans le code source)
- présents mais avec l’attribut hidden.
Quand c’est un bloc :
- il se trouve juste avant le <form> dans le code,
- il a un attr. tabindex="-1",
- il doit contenir le nombre total d’erreurs,
- chaque message d’erreur est explicite (avec un...
7/x
...expl si nécessaire) et devrait être une ancre vers le champ concerné.
Quand chaque erreur est positionnée à proximité de son champ, elle est soit :
- dans le <label>,
- dans un <p id=”xyz”> juste après l’<input> / <select> auquel il sera ajouté un aria-describedby=”xyz”.
...expl si nécessaire) et devrait être une ancre vers le champ concerné.
Quand chaque erreur est positionnée à proximité de son champ, elle est soit :
- dans le <label>,
- dans un <p id=”xyz”> juste après l’<input> / <select> auquel il sera ajouté un aria-describedby=”xyz”.
8/x
Sur chaque champ en erreur, lui ajouter un aria-invalid=”true” (ou modifier la valeur du aria-invalid=”false”).
👉 developer.paciellogroup.com/blog/2019/02/r…
Si la page est rechargée après soumission du formulaire, le <title> de la nouvelle page doit indiquer qu’il y a des erreurs...
Sur chaque champ en erreur, lui ajouter un aria-invalid=”true” (ou modifier la valeur du aria-invalid=”false”).
👉 developer.paciellogroup.com/blog/2019/02/r…
Si la page est rechargée après soumission du formulaire, le <title> de la nouvelle page doit indiquer qu’il y a des erreurs...
9/x
...(ex. “Erreurs - Contact - Monsite.com”).
Si la page n’est pas rechargée (requête AJAX), soit les erreurs sont renseignées dans le bloc avant le formulaire et le focus est alors déplacé dessus, ou bien :
- un message caché visuellement doit annoncer le nombre...
...(ex. “Erreurs - Contact - Monsite.com”).
Si la page n’est pas rechargée (requête AJAX), soit les erreurs sont renseignées dans le bloc avant le formulaire et le focus est alors déplacé dessus, ou bien :
- un message caché visuellement doit annoncer le nombre...
10/x
...d’erreurs (par ex. un <p aria-live=”assertive” class=”sr-only”></p> rempli à la volée en JS),
- les erreurs sont renseignées dans leur <p> respectifs ou bien leur attr. hidden est retiré,
- enfin le focus est déplacé sur le 1er champ en erreur.
...d’erreurs (par ex. un <p aria-live=”assertive” class=”sr-only”></p> rempli à la volée en JS),
- les erreurs sont renseignées dans leur <p> respectifs ou bien leur attr. hidden est retiré,
- enfin le focus est déplacé sur le 1er champ en erreur.
11/x
Une dernière chose : c’est une mauvais idée de désactiver 1 bouton de soumission de formulaire (attr. disabled) pour indiquer que certains champs ne sont pas remplis car il devient “invisible” pour les TA (il ne prend plus le focus).
👉 axesslab.com/disabled-butto…
Il est donc...
Une dernière chose : c’est une mauvais idée de désactiver 1 bouton de soumission de formulaire (attr. disabled) pour indiquer que certains champs ne sont pas remplis car il devient “invisible” pour les TA (il ne prend plus le focus).
👉 axesslab.com/disabled-butto…
Il est donc...
12/x
...préférable d’utiliser un attr. aria-disabled="true" avec un style CSS d’apparence désactivé (mais suffisamment contrasté), s’assurer que l’action de soumission n’est pas possible et éventuellement donner un message d’alerte / erreur explicite…
...préférable d’utiliser un attr. aria-disabled="true" avec un style CSS d’apparence désactivé (mais suffisamment contrasté), s’assurer que l’action de soumission n’est pas possible et éventuellement donner un message d’alerte / erreur explicite…
Formulaires 13/13 (ouf !)
...avec un id qui sera pointé par un attr. aria-describedby sur le bouton.
👉 a11y-101.com/development/ar…
Quelques ressources sur les formulaires accessibles :
- deque.com/blog/accessibl…
- accessuse.eu/en/forms-error…
- scottaohara.github.io/a11y_styled_fo…
...avec un id qui sera pointé par un attr. aria-describedby sur le bouton.
👉 a11y-101.com/development/ar…
Quelques ressources sur les formulaires accessibles :
- deque.com/blog/accessibl…
- accessuse.eu/en/forms-error…
- scottaohara.github.io/a11y_styled_fo…
Quick win : datepicker. 📅
Même s’il en existe qlqs-uns "accessibles", cela reste trop contraignant à utiliser en naviguant au clavier.
S’assurer plutôt que la saisie dans le champ date est libre (avec une aide à la saisie et une gestion des erreurs).
➡️ blog.atalan.fr/datepicker-et-…
Même s’il en existe qlqs-uns "accessibles", cela reste trop contraignant à utiliser en naviguant au clavier.
S’assurer plutôt que la saisie dans le champ date est libre (avec une aide à la saisie et une gestion des erreurs).
➡️ blog.atalan.fr/datepicker-et-…
Tableaux de données 📊 1/2
- titre de préférence dans un <caption>,
- corps du tableau dans un <tbody>,
- en-têtes dans des <th>,
- attribut scope="col"/"row" pour les en-têtes de colonnes et de lignes...
- titre de préférence dans un <caption>,
- corps du tableau dans un <tbody>,
- en-têtes dans des <th>,
- attribut scope="col"/"row" pour les en-têtes de colonnes et de lignes...
Tableaux de données 2/2
Pour des tableaux complexes, les associations peuvent se faire avec
- <thead>, <tfoot>, <colgroup>,
- les attributs colspan, headers (av. multiples valeurs d’id).
👀 Ressources (En) :
inclusive-components.design/data-tables/
webaim.org/techniques/tab…
w3.org/WAI/tutorials/…
Pour des tableaux complexes, les associations peuvent se faire avec
- <thead>, <tfoot>, <colgroup>,
- les attributs colspan, headers (av. multiples valeurs d’id).
👀 Ressources (En) :
inclusive-components.design/data-tables/
webaim.org/techniques/tab…
w3.org/WAI/tutorials/…
Tableau de mise en page ? 🤢 (Des fois on récupère du vieux code...)
- role=”presentation” sur le <table>,
- à l’intérieur : pas de <caption>, <th>, <thead>, <tfoot>, <colgroup>...
- #CSS grid FTW! => gridbyexample.com
- role=”presentation” sur le <table>,
- à l’intérieur : pas de <caption>, <th>, <thead>, <tfoot>, <colgroup>...
- #CSS grid FTW! => gridbyexample.com
☠️ CAPTCHA ☠️ 1/2
Les U de lecteurs d'écran le disent : c'est le plus gros bloquant sur le Web (voir [En] webaim.org/projects/scree…) en plus d'un vrai problème d'UX pour tout le monde.
Le W3C planche sur des alternatives [En] w3.org/TR/turingtest/
Parfois, des solutions…
Les U de lecteurs d'écran le disent : c'est le plus gros bloquant sur le Web (voir [En] webaim.org/projects/scree…) en plus d'un vrai problème d'UX pour tout le monde.
Le W3C planche sur des alternatives [En] w3.org/TR/turingtest/
Parfois, des solutions…
CAPTCHA 😤 2/2
...comme un honeypot peuvent aider + des solutions côté serveur, une double authentification etc.
TOUT devrait être fait pour ne pas infliger ce supplice aux visiteurs de vos sites ...et à vos taux de conversion.
- axesslab.com/captchas-suck/
- dtelepathy.com/blog/design/ca…
...comme un honeypot peuvent aider + des solutions côté serveur, une double authentification etc.
TOUT devrait être fait pour ne pas infliger ce supplice aux visiteurs de vos sites ...et à vos taux de conversion.
- axesslab.com/captchas-suck/
- dtelepathy.com/blog/design/ca…
<iframe> (cadre).
Il faut tjrs 1 attr. title qui indique ce que contient l’iframe pour les U de TA.
Si c’est 1 contenu non pertinent (tag, tracking...) le mentionner (ex. ”Contenu technique”, “Pas de contenu”).
Sinon “Vidéo XYZ”, “Fil d’actu Twitter”, “Boutons de partage RS” etc.
Il faut tjrs 1 attr. title qui indique ce que contient l’iframe pour les U de TA.
Si c’est 1 contenu non pertinent (tag, tracking...) le mentionner (ex. ”Contenu technique”, “Pas de contenu”).
Sinon “Vidéo XYZ”, “Fil d’actu Twitter”, “Boutons de partage RS” etc.
Liens d’évitement / skip links 1/2.
Ils permettent aux U naviguant au clavier de se rendre directement à un section de la page, le plus souvent la partie principale. Ils peuvent apparaître à la 1ère tabulation dans la page ou être tout le temps visibles...
knowbility.org/blog/2019/skip…
Ils permettent aux U naviguant au clavier de se rendre directement à un section de la page, le plus souvent la partie principale. Ils peuvent apparaître à la 1ère tabulation dans la page ou être tout le temps visibles...
knowbility.org/blog/2019/skip…
Skip links 2/2
En 1er dans le <body> sauf bannière cookie etc.
Éviter pour les mobiles car encore très buggy à ce jour.
- axesslab.com/skip-links/
- webaim.org/techniques/ski…
Facile à implémenter avec class CSS "sr-only-focusable"
- ffoodd.fr/cache-cache-cs…
- a11y-guidelines.orange.com/web/inc-dev-li…
En 1er dans le <body> sauf bannière cookie etc.
Éviter pour les mobiles car encore très buggy à ce jour.
- axesslab.com/skip-links/
- webaim.org/techniques/ski…
Facile à implémenter avec class CSS "sr-only-focusable"
- ffoodd.fr/cache-cache-cs…
- a11y-guidelines.orange.com/web/inc-dev-li…
📱👆 Touch 1/3.
Pour éviter les actions accidentelles, il est recommandé que la surface d’interaction des composant d'interface soit de 44 x 44 pixels ou plus (sauf liens dans du texte, checkbox et boutons radio natifs) au moins pour leur première occurrence.
Un espacement...
Pour éviter les actions accidentelles, il est recommandé que la surface d’interaction des composant d'interface soit de 44 x 44 pixels ou plus (sauf liens dans du texte, checkbox et boutons radio natifs) au moins pour leur première occurrence.
Un espacement...
Touch 2/2
...de quelques pixels entre eux est également préférable.
Si une action requiert un mouvement / geste complexe (swipe, pinch…) et / ou avec plusieurs doigts, il faut laisser à l’utilisateur la possibilité de la faire avec un geste simple et 1 seul ...
...de quelques pixels entre eux est également préférable.
Si une action requiert un mouvement / geste complexe (swipe, pinch…) et / ou avec plusieurs doigts, il faut laisser à l’utilisateur la possibilité de la faire avec un geste simple et 1 seul ...
Touch 3/3.
...« point de contact » : clic ou tap simple, double ou long.
Par ex. un carrousel où il est possible de naviguer entre les items au swipe, des boutons < > ou / et des boutons de pagination.
...« point de contact » : clic ou tap simple, double ou long.
Par ex. un carrousel où il est possible de naviguer entre les items au swipe, des boutons < > ou / et des boutons de pagination.
Tabulation ⬇️⬆️ 1/3
L’ordre de tabulation dans la page doit rester cohérent dans les 2 sens.
Ne pas enfermer le focus dans un élément au point d’avoir à rafraîchir la page pour en sortir.
Il est fortement déconseillé d’utiliser des valeurs positives pour l’attribut tabindex ...
L’ordre de tabulation dans la page doit rester cohérent dans les 2 sens.
Ne pas enfermer le focus dans un élément au point d’avoir à rafraîchir la page pour en sortir.
Il est fortement déconseillé d’utiliser des valeurs positives pour l’attribut tabindex ...
Tabulation 2/3.
...et de façon générale, d’altérer l’ordre logique des éléments par-rapport à leur ordre dans le DOM.
Quand l’attr. tabindex a une valeur de 0, l’élément rentre dans l’ordre de tabulation du document et peut recevoir le focus clavier.
Quand sa valeur est de -1, …
...et de façon générale, d’altérer l’ordre logique des éléments par-rapport à leur ordre dans le DOM.
Quand l’attr. tabindex a une valeur de 0, l’élément rentre dans l’ordre de tabulation du document et peut recevoir le focus clavier.
Quand sa valeur est de -1, …
Tabulation 3/3.
...l’élément ne peut pas prendre le focus par tabulation mais uniquement via JavaScript. Utile dans les cas il est nécessaire de déplacer le focus sur un élément qui ne le prend pas nativement (items de certains carrousels ou composants show/hide, etc.)
...l’élément ne peut pas prendre le focus par tabulation mais uniquement via JavaScript. Utile dans les cas il est nécessaire de déplacer le focus sur un élément qui ne le prend pas nativement (items de certains carrousels ou composants show/hide, etc.)
Dernière ligne droite. 1/x
Impossible de ne pas parler d’#ARIA mais le format 280 car. de Twitter s’y prête tellement peu. Je vais donc faire court et donner des pistes.
Pour comprendre ce qu’est WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications)...
Impossible de ne pas parler d’#ARIA mais le format 280 car. de Twitter s’y prête tellement peu. Je vais donc faire court et donner des pistes.
Pour comprendre ce qu’est WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications)...
ARIA 2/x
...il faut savoir ce que sont le Document Object Model (DOM) et l’Accessibility Tree.
Le DOM est une représentation de la page une fois le code (HTML+CSS+JS) interprété par le navigateur, un groupe structuré comme un arbre inversé de nœuds et d'objets (c’est le code...
...il faut savoir ce que sont le Document Object Model (DOM) et l’Accessibility Tree.
Le DOM est une représentation de la page une fois le code (HTML+CSS+JS) interprété par le navigateur, un groupe structuré comme un arbre inversé de nœuds et d'objets (c’est le code...
...qui apparaît dans le DevTool de votre navigateur).
[Fr] developer.mozilla.org/fr/docs/Web/AP…
À côté du DOM est construit l’Accessibility Tree dans lequel sont exposés certains éléments qui seront à leur tour exposés (via l’API accessibilité de l’OS) aux TA.
👉 [En] hiddedevries.nl/en/blog/2019-0…
[Fr] developer.mozilla.org/fr/docs/Web/AP…
À côté du DOM est construit l’Accessibility Tree dans lequel sont exposés certains éléments qui seront à leur tour exposés (via l’API accessibilité de l’OS) aux TA.
👉 [En] hiddedevries.nl/en/blog/2019-0…
L’API #ARIA permet aux sites web “dynamisés” en JS d’être plus accessibles aux pers. utilisant des TA.
C’est une surcouche sémantique passive qui ajoute des rôles, états et propriétés à des composants d’interfaces. Un polyfill accessible qui combles certaines limites du HTML…
C’est une surcouche sémantique passive qui ajoute des rôles, états et propriétés à des composants d’interfaces. Un polyfill accessible qui combles certaines limites du HTML…
...en exposant ces propriétés à l’Accessibility Tree.
[En] developers.google.com/web/fundamenta…
[Fr] disic.github.io/guide-developp…
Toutefois certaines règles sont à connaître avant de mettre du ARIA partout : [En] deque.com/blog/top-5-rul…
Intro to ARIA (A11ycasts) [En]
[En] developers.google.com/web/fundamenta…
[Fr] disic.github.io/guide-developp…
Toutefois certaines règles sont à connaître avant de mettre du ARIA partout : [En] deque.com/blog/top-5-rul…
Intro to ARIA (A11ycasts) [En]
The Accessibility Tree (1’25”) [En]
Ici @LeonieWatson explique en 20 min #ARIA, l’AT et démontre pourquoi il vaut mieux utiliser un <button> Vs un <span> : [En]
PS1 ARIA n’altère en rien le SEO.
PS2 faites une rech. "#a11y #ARIA".
Ici @LeonieWatson explique en 20 min #ARIA, l’AT et démontre pourquoi il vaut mieux utiliser un <button> Vs un <span> : [En]
PS1 ARIA n’altère en rien le SEO.
PS2 faites une rech. "#a11y #ARIA".
@LeonieWatson Composants 1/2.
Voici quelques ressources pour vous aider à créer des composants accessibles (j'ai dû en oublier mais y'a déjà de quoi faire) :
- designsystem.gov.au/components/
- inclusive-components.design
- whatsock.com/tsg/#hd2
- a11yproject.com/patterns
- a11y-style-guide.com/style-guide/
…
Voici quelques ressources pour vous aider à créer des composants accessibles (j'ai dû en oublier mais y'a déjà de quoi faire) :
- designsystem.gov.au/components/
- inclusive-components.design
- whatsock.com/tsg/#hd2
- a11yproject.com/patterns
- a11y-style-guide.com/style-guide/
…
@LeonieWatson Composants 2/2.
...
- pattern-library.dequelabs.com
- a11ymatters.com/patterns/
- accessuse.eu/fr/composants.…
- van11y.net
- a11y.switch.paris
Et les Design Pattern ARIA mais bon... pas très user-friendly et pas adaptés aux mobiles ds certains cas : w3.org/TR/wai-aria-pr…
...
- pattern-library.dequelabs.com
- a11ymatters.com/patterns/
- accessuse.eu/fr/composants.…
- van11y.net
- a11y.switch.paris
Et les Design Pattern ARIA mais bon... pas très user-friendly et pas adaptés aux mobiles ds certains cas : w3.org/TR/wai-aria-pr…
@LeonieWatson Zi end 1/3
Nous y voilà, c’est la fin de ce zrèd.
J’espère que vous pourrez retenir (et appliquer !) certaines choses et surtout rappelez-vous que l’impact de petites améliorations est parfois énorme pour les personnes handicapées. Allez à votre rythme, #améliorationProgressive..
Nous y voilà, c’est la fin de ce zrèd.
J’espère que vous pourrez retenir (et appliquer !) certaines choses et surtout rappelez-vous que l’impact de petites améliorations est parfois énorme pour les personnes handicapées. Allez à votre rythme, #améliorationProgressive..
2/3
...et en parlant de rythme j’ai un Soundcloud 😜 mais y’a pas gd chose et c’est vieux soundcloud.com/arnauddelafoss…
Plus sérieusement vous pouvez revoir “Ne parlons plus d'accessibilité !” une conf de 20 m que j’ai faite fin 2017 (sous-titres à terminer 🥺)
...et en parlant de rythme j’ai un Soundcloud 😜 mais y’a pas gd chose et c’est vieux soundcloud.com/arnauddelafoss…
Plus sérieusement vous pouvez revoir “Ne parlons plus d'accessibilité !” une conf de 20 m que j’ai faite fin 2017 (sous-titres à terminer 🥺)
3/3
Remerciements à toute l’équipe @Temesis #teamFrelons Eric, Claire @accesbilis et Jean-Pierre et tout particulièrement à Aurélien Levy @goetsu, pour leur disponibilité et leur générosité à partager leurs connaissances.
Merci d’avoir lu jusque là 👋
Remerciements à toute l’équipe @Temesis #teamFrelons Eric, Claire @accesbilis et Jean-Pierre et tout particulièrement à Aurélien Levy @goetsu, pour leur disponibilité et leur générosité à partager leurs connaissances.
Merci d’avoir lu jusque là 👋
