Améliorer l'accessibilité de votre démarque —

Markdown est un petit langage de conversion de texte en HTML. Il a été créé par John Gruber en 2004 dans le but de faciliter l'écriture de texte formaté dans un éditeur de texte brut. Vous pouvez trouver Markdown dans de nombreux endroits sur Internet, en particulier dans les endroits où les développeurs sont présents. Deux exemples notables sont les commentaires sur GitHub et le code source des publications sur Smashing Magazine !

Comment fonctionne Markdown

Markdown utilise des dispositions spéciales de caractères pour formater le contenu. Par exemple, vous pouvez créer un lien en mettant un caractère, un mot ou une phrase entre crochets. Après le crochet fermant, vous incluez ensuite une URL entre parenthèses pour créer une destination pour le lien.

En tapant :

[I am a link](https://www.smashingmagazine.com/)

Créerait ce qui suit Balisage HTML :

Je suis un lien

Vous pouvez également mélanger du HTML avec Markdown, et tout se résumera au HTML une fois compilé. L'exemple suivant :

Je suis une phrase qui inclut le formatage HTML et __Markdown__.

Génère ceci en tant que balisage HTML :

Je suis une phrase qui inclut HTML et Mise en forme Markdown.

Markdown And Accessibility

L'accessibilité est une préoccupation holistique, ce qui signifie qu'elle affecte tous les aspects de la création et du maintien d'expériences numériques. Étant donné que Markdown est un outil numérique, il doit également prendre en compte des considérations d'accessibilité.

• La bonne nouvelle :
  Markdown génère un balisage HTML simple, et le balisage HTML simple peut être facilement lu par une technologie d'assistance.[19659016]La moins bonne nouvelle :
  La démarque inconnue n'est pas exhaustive, ni normative. En outre, l'accessibilité ne se limite pas à la technologie d'assistance.

Quand il s'agit de garantir l'accessibilité de votre contenu Markdown, il existe deux problèmes majeurs :

1. Il existe certains types de contenu que Markdown ne prend pas en charge, et
2. Il n'y a pas d'expérience Clippy-esque pour vous accompagner pendant que vous écrivez, ce qui signifie que vous ne recevrez pas d'avertissement si vous faites quelque chose qui créera un contenu inaccessible.

À cause de cela. deux considérations, il y a des choses que nous pouvons faire pour nous assurer que notre contenu Markdown est aussi accessible que possible.

Les trois choses les plus importantes que vous pouvez faire

Il peut être difficile de savoir par où commencer pour rendre votre contenu accessible. Voici trois choses que vous pouvez faire dès maintenant pour avoir un impact important et significatif.

1. Utilisez des titres pour décrire votre contenu

La navigation par titre est de loin la méthode la plus populaire que de nombreux utilisateurs de technologies d'assistance utilisent pour comprendre le contenu de la page ou la vue qu'ils consultent.

À cause de cela, vous voulez utiliser les options de Format d'en-tête de Markdown (# , ######## ###### et ######) pour créer une structure d'en-tête logique :

# Le titre, une rubrique de premier niveau

Teneur

## Un titre de second niveau

Teneur

### Un titre de troisième niveau

Teneur

## Un autre titre de deuxième niveau

Contenu

Cela crée un contour hiérarchique facile à analyser :

1. Le titre, un titre de premier niveau
    une. Un titre de second niveau
        je. Un titre de troisième niveau
    b. Un autre titre de deuxième niveau

La ​​rédaction de niveaux de titres efficaces est un peu un arten ce sens que vous voulez suffisamment d'informations pour communiquer la portée globale de la page, mais ne pas submerger quelqu'un en sur-décrivant. Par exemple, une recette peut n'avoir besoin que de quelques éléments h2 pour répartir les ingrédients, les instructions et la trame de fond, tandis qu'un article universitaire peut avoir besoin des six niveaux de titre pour communiquer pleinement les nuances.

Être capable de rapidement numériser tous les titres d'une page ou d'une vue et passer à un titre spécifique est une technique qui ne se limite pas non plus aux lecteurs d'écran. J'apprécie et je profite d'extensions telles que headingsMap qui vous permettent de profiter de cette fonctionnalité.

2. Rédigez des descriptions alternatives significatives pour vos images.

Les descriptions alternatives aident les personnes malvoyantes ou qui naviguent avec des images désactivées à comprendre le contenu de l'image que vous utilisez.

Dans Markdown, une description alternative est placée entre les deux. les crochets ouvrants et fermants du code de formatage d'image :

 ![A sinister-looking shoebill staring at the camera.](https://live.staticflickr.com/3439/3259412053_92f822bee2_b.jpg)

Une description alternative doit clairement et décrivez de manière concise le contenu de l'image et le contexte dans lequel elle a été incluse. De plus, n'oubliez pas d'ajouter la ponctuation  !

Certains sites Web et applications Web qui utilisent la saisie Markdown essaieront également d'ajouter un texte de description alternatif pour vous. Par exemple, GitHub utilisera le nom du fichier que vous téléchargez pour l'attribut alt :

Malheureusement, cela ne fournit pas suffisamment de contexte pour une personne qui ne peut pas voir l'image. Dans ce scénario, vous souhaitez expliquer pourquoi l'image est suffisamment importante pour être incluse.

Des exemples que vous verrez couramment sur GitHub incluent :

• Un bogue visuel, où quelque chose ne ressemble pas à ce qu'il est censé à,
• Une nouvelle fonctionnalité qui est proposée,
• Une capture d'écran annotée fournissant des commentaires,
• Graphiques et organigrammes qui expliquent les processus, et
• GIFs de réaction pour communiquer l'émotion.

Ces images ne sont pas décoratifs. Étant donné que GitHub est public par défaut, vous ne savez pas qui accède à votre référentiel, ni leurs circonstances. Mieux vaut les inclure de manière proactive.

Si vous avez besoin d'aide pour rédiger d'autres descriptions, je vous recommande avec enthousiasme l'arbre de décision alternatif du W3C et le guide ultime d'Axess Lab sur les textes alternatifs .

3. Utilisez un langage clair

Un langage simple et direct aide tout le monde à comprendre votre contenu. Cela inclut les personnes :

• Avec des considérations cognitives,
• Qui n'utilisent pas l'anglais comme langue principale,
• Ne connaissent pas les concepts que vous communiquez,
• Qui sont stressés ou multitâche et ont une capacité d'attention limitée,
• Et ainsi de suite.

Plus il est facile pour quelqu'un de lire ce que vous écrivez, plus il est facile pour lui de le comprendre et de l'intérioriser. Cela aide avec toutes les formes de contenu Markdown écrit, qu'il s'agisse de billets de blog, de tickets Jira, de notes Notion, de commentaires GitHub, de cartes Trello, etc.

Tenez compte de la longueur de vos phrases et de vos mots. Pensez également à qui est votre public cible et pensez à des choses comme le jargon et les expressions idiomatiques que vous utilisez.

Si vous avez besoin d'aide pour simplifier votre langage, trois outils que j'aime utiliser sont Hemingway L'analyseur de lisibilité de Datayze et le xkcd Simple Writer . Un autre site qui vaut le détour est plainlanguage.gov.

Autres considérations

Vous voulez faire un effort supplémentaire ? Super! Voici certaines choses que vous pouvez faire :

Images

En plus de fournir des descriptions alternatives, il y a quelques autres choses que vous pouvez faire pour rendre vos images insérées Markdown accessibles.

Marquer correctement les images SVG[19659069]SVG est un excellent format pour les graphiques, les icônes, les illustrations simples et d'autres types d'images qui utilisent des formes simples et des lignes nettes.

Il existe deux façons de rendre SVG dans Markdown. Les deux approches ont des éléments spécifiques que vous devrez rechercher :

1. Lien vers une image avec une extension de fichier .svg

Note : Le bug que je m'apprête à décrire a été corrigécependant, je recommande toujours les conseils suivants pour les deux prochaines années. Cela est dû à la tactique douteuse de Safari consistant à lier les mises à jour du navigateur aux mises à jour du système, ainsi qu'à l'hésitation à mettre à jour le logiciel pour certaines personnes qui utilisent la technologie d'assistance.

Si vous créez un lien vers un SVG en tant qu'image, vous Je veux utiliser l'élément HTML imget non le code de formatage d'image de Markdown (![]()).

La raison en est que certains lecteurs d'écran ont des bogues lorsque ils essaient d'analyser un élément img lié à un fichier SVG. Au lieu de l'annoncer comme prévu en tant qu'image, il l'annoncera en tant que groupe, ou sautera l'annonce de l'image entièrement . Pour résoudre ce problème, déclarez role="img" sur l'élément image :

2. Utilisation du code SVG en ligne

Il existe plusieurs raisons de déclarer une image en tant que code SVG en ligne au lieu d'utiliser un élément img. La raison que je rencontre le plus souvent est la prise en charge du mode sombre.

Tout comme avec l'utilisation d'un élément img, vous devez inclure quelques attributs pour vous assurer que la technologie d'assistance l'interprète comme une image et non comme un code. Les deux déclarations d'attributs sont role="img" et aria-labelledby :

Vous devez également vous assurer d'utiliser un élément title (à ne pas confondre avec the title attribut) pour décrire l'image, similaire à l'attribut alt d'un élément img. Contrairement à un attribut altvous devrez également associer le id de l'élément title à son élément parent svg en utilisant aria-labelledby.

Si vous souhaitez approfondir le balisage accessible de SVG, je vous recommande Accessible SVGs de Heather Migliorisiet SVG accessibles : modèles parfaits pour les utilisateurs de lecteurs d'écran le plus souvent, elles sont utilisées par un développeur pour exprimer sa joie et sa frustration lorsqu'il discute d'un sujet technique.

Le fait est que ces animations peuvent être gênantes et nuire à quelqu'un qui essaie de lire votre contenu. Les considérations cognitives telles que le TDAH sont particulièrement affectées ici.

La bonne nouvelle est que vous pouvez toujours inclure du contenu animé ! Il existe quelques options :

1. Utilisez l'élément pictureen utilisant des types de fichiers tels que .mp4 et .webm qui peuvent charger en état de pause, ou
2. Utilisez une solution qui donne une fonctionnalité de lecture/pause à un .giftelle que Steve Faulkner's details/summary hackou la bibliothèque freezeframe.js.

Ce petit détail peut grandement aider les gens sans avoir à abandonner un moyen pour vous de vous exprimer.

Liens

Si vous écrivez du contenu en ligne, tôt ou tard, vous devrez utiliser des liens. Voici quelques points à prendre en compte :

Utilisez des noms de liens uniques et descriptifs

Certaines formes de technologie d'assistance peuvent naviguer dans une liste de liens sur une page ou afficher de la même manière qu'elles peuvent naviguer dans les en-têtes. Pour cette raison, vous souhaitez que vos liens indiquent ce que quelqu'un peut s'attendre à trouver s'il le visite.

En savoir plus sur [how to easily poach an egg](https://lifehacker.com/this-is-the-chillest-easiest- façon de pocher un œuf-1825889759).

Vous voudrez également éviter les phrases ambiguës, surtout si elles se répètent. Des termes comme « cliquez ici » et « en savoir plus » sont des coupables courants. Ces termes n'ont pas de sens lorsqu'ils sont séparés du contexte de leur contenu sans lien environnant. De plus, l'utilisation du terme plus d'une fois peut créer des expériences comme celle-ci :

Évitez d'ouvrir des liens dans un nouvel onglet ou une nouvelle fenêtre

Certaines variantes de Markdown telles que Kramdown vous permettent d'écrire du code pouvant ouvrir des liens dans un nouvel onglet ou une nouvelle fenêtre :

[link name] (url){:target="_blank"}

Cela crée un risque de sécurité. De plus, cette expérience est tellement déroutante et indésirable qu'elle est un critère de réussite des Web Content Accessibility Guidelines (WCAG). Il est de loin préférable de laisser tous les utilisateurs de votre site Web ou de votre application Web choisir eux-mêmes s'ils souhaitent ou non ouvrir un lien dans un nouvel onglet.

Utiliser les liens ignorés avec discrétion

Un lien de sautou « skipnav » est un moyen de contourner de grandes sections de contenu. Vous les rencontrerez généralement comme un moyen de contourner le logo et la navigation principale sur une page Web, permettant à quelqu'un d'accéder rapidement au contenu principal.

Les liens de saut ne se limitent pas à ce cas d'utilisation ! Deux autres exemples pourraient être une table des matières et des commandes de tri/filtrage sur un site de commerce électronique.

Une autre grande utilité pour les liens ignorés est de permettre à quelqu'un de contourner le contenu intégré comportant plusieurs éléments interactifs :

C'est également une excellente technique pour permettre à quelqu'un de contourner un "piège de clavier", quelque chose que l'on trouve couramment dans le contenu intégré.

Les pièges de clavier sont ceux où quelqu'un n'utilise pas de souris ou de touchpad ne peut pas échapper à un composant interactif en raison de la façon dont il est construit. Vous les trouverez généralement avec des widgets iframe intégrés.

Un bon moyen de tester les pièges du clavier ? Utilisez la touche Tab !

Sans lien de saut, une personne utilisant une technologie d'assistance peut avoir à actualiser la page ou la vue pour échapper au piège. Ce n'est pas génial et est particulièrement troublant si des problèmes de contrôle moteur sont ajoutés au mélange. Je suis de l'école de pensée que la plupart des gens fermeront simplement l'onglet s'ils se heurtent à ce scénario, plutôt que d'essayer de le faire fonctionner.

En plus de son excellent article sur les tests avec le Touche TabManuel Matuzović nous parle de son utilisation des liens de saut, ainsi que d'autres améliorations dans Amélioration de l'accessibilité du clavier d'Embedded CodePens.

Soyez prudent avec automatiquement Liens d'ancrage de titre générés

Certains générateurs de démarques ajoutent automatiquement un lien d'ancrage pour accompagner chaque titre que vous écrivez. C'est ainsi que vous pouvez attirer l'attention de quelqu'un sur la section pertinente d'une page ou d'une vue lors du partage de contenu.

Le problème est qu'il peut y avoir des problèmes de technologie d'assistance avec cela, selon la façon dont ce lien d'ancrage est construit. Si le lien d'ancrage est uniquement enroulé autour d'un glyphe tel que #, ¶ ou §, nous rencontrons deux problèmes :

1. Le nom du lien n'a pas de sens lorsqu'il est retiré de son contexte environnant, et
2. Le nom du lien est répété.

Cette question est discutée plus en détail par Amber Wilson dans son message, Are your Anchor Links Accessible? Son message détaille également différentes solutions, ainsi que leurs inconvénients potentiels.

Indiquer la présence de téléchargements

La plupart du temps, les liens vous dirigent vers une autre page ou vue. Parfois, cependant, la destination est un téléchargement. Lorsque cela se produit, le navigateur :

1. Ouvre une application associée au type de fichier de requête pour l'afficher, ou
2. Vous invite à l'enregistrer dans le système de fichiers du système d'exploitation.

Ces deux les expériences peuvent être choquantes, surtout si vous ne pouvez pas voir l'écran. Un bon moyen d'éviter cette expérience loin d'être idéale est de faire allusion à la présence du téléchargement dans le nom du lien. Par exemple, voici comment procéder dans Markdown lorsque vous créez un lien vers un PDF :

Téléchargez notre [2020 Annual Report (PDF)](https://mycorp.biz/downloads/2020/annual-report.pdf).

Couleur[19659026]La couleur n'est pas liée à Markdown en soi, mais elle affecte beaucoup de contenu généré par Markdown. Les principales préoccupations liées à la couleur sont les éléments que vous pouvez généralement modifier si vous utilisez un service de blog tel que WordPress, Eleventy, Ghost, Jekyll, Gatsby, etc.

Utilisez un thème en mode sombre

Fournir une bascule pour le mode sombre permet à quelqu'un de choisir une expérience qui l'aide à lire. Pour certains, cela pourrait être une préférence esthétique, pour d'autres, cela pourrait être un moyen d'éviter des choses comme les migraines, la fatigue oculaire et la fatigue.

L'important ici est le choix. Laissez quelqu'un qui a activé le mode sombre utiliser le mode clair pour votre site Web, et vice-versa (et assurez-vous que l'interface utilisateur pour le faire est accessible).

Le fait est que vous ne pouvez pas savoir quels sont les besoins, les désirs d'une personne. , ou les circonstances sont lorsqu'ils visitent votre site Web ou votre application Web, mais vous pouvez leur donner la possibilité de faire quelque chose à ce sujet.

Rappelons également que Markdown exporte du HTML simple et direct, et qu'il est facile de travailler avec CSS. Cela facilite grandement le développement de votre thème en mode sombre. ]). Il peut également créer du contenu en ligne enveloppé dans l'élément code en enveloppant un caractère, un mot ou une phrase dans des backticks simples.

Pour les deux exemples, de nombreuses personnes ajoutent des bibliothèques de coloration syntaxique telles que PrismJS pour aider les gens à comprendre l'exemple de code qu'ils fournissent.

Certains thèmes utilisent des valeurs clair-sur-clair ou foncé-sur-foncé comme choix esthétique. Malheureusement, cela signifie que le code peut être difficile ou impossible à voir pour certaines personnes. L'astuce ici consiste à sélectionner un thème de coloration syntaxique qui utilise des valeurs de couleur suffisamment contrastées pour que les utilisateurs puissent réellement voir chaque glyphe du code.

Un moyen de déterminer si le contraste est suffisamment élevé consiste à utiliser un outil tel que WebAIM's et vérifier manuellement les valeurs de couleur fournies par le thème. Si vous recherchez une suggestion plus rapide et que cela ne vous dérange pas un peu d'auto-promotion, je maintiens un thème de mise en évidence de la syntaxe compatible avec les contrastes de couleurs.

Contenu non pris en charge par Markdown

Comme vous pouvez utiliser HTML dans Markdown, vous verrez certains types de contenu plus souvent que d'autres dans Markdown. Voici quelques considérations pour quelques-uns d'entre eux.

Utilisez l'attribut title pour décrire l'attribut iframe Content

HTML's title est couramment utilisé à mauvais escient pour créer un effet d'info-bulle. Malheureusement, cela cause beaucoup de maux de tête aux utilisateurs de technologies d'assistanceet son utilisation de cette façon est considérée comme un anti-modèle.

Le seul bon usage d'un attribut title est de fournir un description concise et significative de ce que contient l'iframe. Cette description fournit aux utilisateurs de technologies d'assistance un indice sur ce à quoi s'attendre s'ils naviguent dans l'iframe pour vérifier son contenu.

Pour Markdown, la forme la plus courante de contenu iframe sera être des intégrations telles que des vidéos YouTube :

Tout comme votre texte de lien, vous voudrez également éviter le contenu générique et répétitif titre. Le code d'intégration de YouTube est par défaut Lecteur vidéo YouTube ce qui n'est pas si génial. Nous pouvons faire un peu mieux et mettre à jour cela vers YouTube : Titre de la vidéo. Cela sera particulièrement utile s'il y a plus d'une vidéo YouTube intégrée à la page ou à la vue.

Pourquoi YouTube procède ainsi alors qu'il connaît déjà les informations sur le titre de la vidéo est un tout autre problème.

Fournir des légendes et des transcriptions pour Vidéos et audio enregistrés

En parlant de YouTube, une autre chose que vous voudrez faire est de vous assurer que votre vidéo et votre audio ont des sous-titres et des transcriptions.

Sous-titres

Les sous-titres affichent une version texte du contenu vidéo en temps réel tel qu'il est. étant parlé, permettant à quelqu'un qui, biologiquement ou de manière circonstancielle, ne peut pas entendre l'audio, de pouvoir comprendre le contenu de la vidéo. Les sous-titres peuvent également inclure des effets sonores, de la musique et d'autres signaux importants pour communiquer le sens.

La plupart des fournisseurs d'hébergement vidéo ont des fonctionnalités pour prendre en charge le sous-titragey compris leur affichage dans un contexte intégré. La partie importante ici est d'éviter les craptions—examinez manuellement les légendes générées automatiquement pour vous assurer qu'elles ont un sens pour un être humain.

Transcripts

Transcripts sont le frère de la légende. Ils prennent tous les dialogues parlés, les effets sonores et la musique pertinents, ainsi que d'autres détails importants et les répertorient en dehors de la vidéo ou de l'audio intégré. Cela présente de nombreux avantages, notamment en permettant à quelqu'un de :

• Lire le contenu vidéo et audio à son propre rythme ;
• Modifier la taille et la présentation du contenu ;
• Imprimer le contenu ou le convertir dans un format plus facile à digérer ;
• Découvrez plus facilement le contenu via les moteurs de recherche ;
• Traduisez plus facilement le contenu.

Mode lecteur

Comme d'autres préoccupations adjacentes à Markdown, le mode lecteur peut offrir beaucoup des avantages du point de vue de l'accessibilité.

Si vous n'êtes pas familier, le mode lecteur est une fonctionnalité offerte par de nombreux navigateurs qui supprime tout autre que le contenu principal. La plupart des modes de lecture fournissent également des commandes pour ajuster la taille du texte, la police, la hauteur de la ligne, la couleur du premier plan et de l'arrière-plan, la largeur des colonnes, même pour que votre appareil lise le contenu à voix haute pour vous !

Vous ne pouvez pas déclencher directement le mode Lecteur en utilisant Markdown. Le contenu Longform Markdown, cependant, est souvent rendu dans des modèles qui peuvent être configurés pour les rendre compatibles avec le mode Lecteur.

Mandy Michael nous apprend comment procéder dans son article, Créer des sites Web pour Safari Reader Mode et autres applications de lecture . Une combinaison de code HTML sémantique, d'éléments de sectionnement et d'un trait de microdonnées structurées sont tout ce qu'il faut pour déverrouiller cette fonctionnalité exceptionnelle.

Vous n'avez pas à tout faire en même temps.

Ceci est un long article qui couvre différents aspects de Markdown et comment il interagit avec d'autres technologies. Cela peut sembler intimidant, dans la mesure où il y a beaucoup de contenu à couvrir dans quelques domaines différents.

Le problème avec le travail d'accessibilité est que chaque petit geste compte. Vous n'êtes pas obligé d'aborder toutes les considérations que j'ai dans cet article dans un grand changement radical. Au lieu de cela, essayez de choisir une chose sur laquelle vous concentrer et construisez à partir de là.

Sachez que chaque ajustement et mise à jour aura un impact direct sur la qualité de vie de quelqu'un lors de l'utilisation du Web, et c'est énorme.

Continuer la lecture sur Smashing. Magazine

(vf, yk, il)