, 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.
👀 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.
Une échelle graduée de 1 à 21 avec le curseur sur 4,5. En dessous c'est pas bon, au dessus c'est bon.
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.)
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 !
🚥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. 🤷‍♀️
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.
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).
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. Tous les champs sont requis.Tous les champs sont requis sauf indication contraire. + libellé (optionnel)Les champs marqués d’un * sont requis. + * libelléLibellé (obligatoire)
❌ 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. Message d'erreur explicite sous le champ.Bloc qui regroupe les messages d'erreur situé avant le formulaire.
⚓ 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.
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 😍 Quatre pancartes dans un parc qui pointent dans des directions opposées mais qui ont la même indication inscrite dessus.Une fenêtre de vocalisation de VoiceOver de navigation par liens avec que des Un exemple de 2 blocs de texte avec chacun un lien (CTA) unique et explicite.
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.)
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. UN CRS EBORGNE - UN CRS ÉBORGNÉ
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…
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)...
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/ ?
🛵 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 !
📱 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. 🦚 Contenu qui s'adapte aux orientations paysage et portrait dans un smartphone.
🎥 🎙 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,... Able Player pour un podcast (fichier audio).Une ancre Extrait de la transcription textuelle d'une vidéo dans une page.
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… Captures d'écran des Inconnus Logo
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 💥❌ Il est facile de changer l'apparence du lecteur audio / vidéo Able Player en CSS.Capture de l'épisode de Pokémon qui a déclenché des centaines de crises d'épilepsie au Japon.
Voilà pour les grands points de l’UX-UI qui, s’ils sont adressés, rendront vos pages / interfaces déjà beaucoup plus accessibles. Il en manque quelques-uns mais déjà s'il y a tout ça, vous serez bien au-dessus du lot. 🏔😉

Next, on regarde le code : #HTML, #CSS, #JS et #ARIA 👨‍💻 Une pyramide
#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 HTML Checker message HTML Checker errors and warnings messages.
👅 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. Exemple de l'usage de l'attribut lang.Message de warning du validateur W3C sur l’absence d'attribut lang sur l'élément html.
💬 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 Exemples de contenus pour l'élément <title>.
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 Capture de l'accueil du Monde avec les régions surlignées par l'extension Landmarks.
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. Exemple de code HTML structuré avec des <h1> et <h2>.Deux exemples de structure de titres de page : Amazon incorrect et Légifrance correct.
⚓ 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. Tweet de @davidmacd Un clic droit sur un lien ouvre un menu contextuel :
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… Menu de Firefox : Affichage > Zoom > Zoom texte seulement.Agrandir le texte dans Windows 10.Paramétrage de l'extension de Chrome Dyslexia Formatter.
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". 🤷‍♂️ Blocs produits sur Darty avec des bouts de texte illisibles et manquants quand les caractères sont grossis à 200 pour cent.Agrandissement du texte dans les paramètres Accessibilité d'iOS.Comparatif de deux blocs de texte, l’un qui s’adapte à l'agrandissement des espacements et l’autre pas.
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,... Exemple d'une image avec l'attribut alt absent.Exemple d'une image avec la valeur de l’attribut alt qui est un doublon d’un titre.Exemple d'une image de décoration avec l'attribut alt vide.
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/ 👍 Exemple d'une image-lien qui contient du texte et un attribut alt qui est absent (Fnac).Exemple d'une image-lien avec une valeur de l’attribut alt qui est le texte contenu dans l’image.
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… Deux exemples de pictogrammes cachés aux TA avec l'attribut aria-hidden true.
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 Extrait du CSS Reset d’Eric Meyer avec le commentaire
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+ Touche Tab d'un clavier.Focus par défaut dans Edge, Firefox, Chrome et Safari.Focus créé en CSS, identique dans tous les navigateurs.
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…
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). Exemple d’un formulaire dans WHCM quand les bordures des champs et boutons ont été effacées.Champ de formulaire Material Design incompréhensible dans WHCM.Déclaration CSS qui applique une bordure transparente aux boutons, champs, etc.
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). Trois blocs avec des liens Exemple de liens en contexte avec du texte caché visuellement (classe CSS sr-only sur un span).Exemple de liens en contexte avec un attribut title plus explicite.
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. Champ de recherche.Lien vers le plan du site en bas de page.Extrait de plan du site.
☑️ 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… Exemple de code avec l'attribut for sur le label qui a la même valeur que l'id sur l'input.Champ de recherche sans libellé visible mais avec une infobulle au survol grâce à l'attribut title.
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… Informations sur le format attendu d’un mot de passe données trop tard (dans un message d’erreur après soumission du formulaire).Exemple de code avec les informations sur le format attendu d’un mot de passe visible par tous, juste après le champ de saisie.Exemple de code d’un champ obligatoire.
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>. Champs avec intitulés identiques regroupés dans 2 fieldsets.Checkboxs regroupées dans un fieldset.
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… Exemple de code avec l’attribut autocomplete.Exemple de formulaire où l’attribut autocomplete a été utilisé sur les champs.
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... Bloc de messages d’erreur avec ancres, situé avant le formulaire.Deux exemples de messages d’erreur situés juste après le champ.
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...
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”.
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...
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...
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. Deux façons de signaler les erreurs dans un formulaire et de déplacer le focus.
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... Un formulaire avec les champs vides et le bouton de soumission désactivé.
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… Exemple de code et rendu dans VoiceOver pour rendre un bouton désactivé de façon accessible.
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…
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-… Exemple de champ date avec datepicker et saisie libre.
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... Exemple de tableau de données simple.HTML d’un tableau de données simple.
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/…
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
☠️ 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… Graphique des éléments les plus problématique selon le sondage WebAIM des utilisateurs de lecteurs d'écran, avec CAPTCHA largement en tête.Exemple de reCaptcha Google.Exemple d’un CAPTHCA pourri.
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…
<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. Exemple d'iframe avec un attribut title bien renseigné.
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… Exemples de skip links.
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… Exemple de code HTML d'un lien pour aller au contenu.
📱👆 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... Mauvais et bon exemples de tailles et d’espacements de liens dans une liste.Boutons dans YouTube suffisamment grands et espacés.
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 ... Trois boutons sans espacement entre eux sur Amazon.Carrousel fonctionnant au swipe avec des boutons de navigation en dessous.
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. Deux exemples de boutons de navigation de carrousel : un avec des boutons < > de chaque côté, l’autre avec des boutons de pagination en dessous.
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 ... Touche Tab.Représentation de l'ordre de tabulation sur le site web d'A book apart.
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, … Deux mains : une actionnant un clavier d'ordinateur et l'autre sur une tablette braille.Touches Tab et Maj sur un clavier Mac.
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.) Représentation de l'ordre de tabulation sur Smashing Magazine.Représentation de l'ordre de tabulation sur CSS Tricks.
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)... Pyramide avec de bas en haut HTML, CSS, JavaScript et ARIA.
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... Le code d’une page (HTML, CSS et JS) passe par le moteur de rendu du navigateur pour donner le DOM.
...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… Chaîne avec l'application (page web), l'accessibility tree, la technologie d'assistance et l'utilisateur.
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… ARIA modifie certaines caractéristiques de certains nœuds dans l’accessibility tree.
...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]
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". Certains éléments du DOM sont exposés à l’Accessibility Tree, mais pas les <div> par exemple.
@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/
@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…
@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..
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 🥺)
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à 👋 “That’s all folks” transformé en “That’s a11y folks”.
Missing some Tweet in this thread?
You can try to force a refresh.

Like this thread? Get email updates or save it to PDF!

Subscribe to Arnaud Delafosse
Profile picture

Get real-time email alerts when new unrolls are available from this author!

This content may be removed anytime!

Twitter may remove this content at anytime, convert it as a PDF, save and print for later use!

Try unrolling a thread yourself!

how to unroll video

1) Follow Thread Reader App on Twitter so you can easily mention us!

2) Go to a Twitter thread (series of Tweets by the same owner) and mention us with a keyword "unroll" @threadreaderapp unroll

You can practice here first or read more on our help page!

Follow Us on Twitter!

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just three indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3.00/month or $30.00/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!