L’éditeur HTML Brightspace dispose d’un vérificateur d’accessibilité intégré qui facilite plus que jamais l’amélioration de l’accessibilité de vos pages de contenu. Voici sept conseils simples pour créer des sujets de contenu plus accessibles à l’aide de Vérificateur d’accessibilité.
Exécutez le vérificateur d’accessibilité Brightspace
Le vérificateur d’accessibilité est disponible dans l’éditeur Brightspace lorsque vous créez ou modifiez des pages de contenu HTML. Il est situé juste à côté de la Vérification orthographique bouton. Vous pouvez sélectionner Vérifier l’accessibilité à tout moment lors de l’édition de votre contenu.
Le vérificateur d’accessibilité détecte les problèmes d’accessibilité courants sur le contenu HTML statique et propose des suggestions pour vous aider à résoudre les problèmes sur place.
Remarque : le vérificateur d’accessibilité ne remplace pas les tests réels, en particulier lorsque vous avez des activités interactives importées dans le cours. Les tests pour les utilisateurs réels sont toujours nécessaires pour la navigation sur clavier uniquement et les tests de lecture d’écran.
Ajouter une image appropriée Texte de remplacement
Le problème d’accessibilité le plus courant est l’absence de texte alternatif d’image (texte de remplacement). Le texte de remplacement est lu par un lecteur d’écran à la place de l’image, ce qui permet aux apprenants ayant une déficience visuelle d’accéder à l’information. En tant qu’exigence de la norme HTML, chaque image doit avoir un alt attribut.
Comment entrer du texte de remplacement
Lors de l’insertion d’une image dans l’éditeur Brightspace, vous êtes invité à entrer le texte alternatif qui sera automatiquement intégré dans le code HTML. Par exemple:
<em>img src="Scoops.jpg » </em><em><strong>alt="crème glacée »</strong></em><em> /></em>
Le vérificateur d’accessibilité affiche un message d’erreur Les images doivent avoir un texte de remplacement si le texte de remplacement est manquant. Il vous donnera ensuite la possibilité de réparer le problème en ajoutant du texte de remplacement dans le panneau de rapport.
Utilisez le vérificateur de contraste de couleur
Le faible contraste des couleurs est un autre problème d’accessibilité courant. Lignes directrices pour l’accessibilité des contenus Web (WCAG) 2.1 Le niveau AA nécessite un rapport de contraste de 4,5:1 pour le texte normal et de 3:1 pour le texte volumineux.
Comment vérifier le contraste des couleurs.
La plupart d’entre vous savent déjà qu’il existe un vérificateur de couleurs intégré dans l’éditeur HTML Brightspace. Lorsque vous sélectionnez une couleur de police pour votre texte, la couleur Rapport de contraste est calculé et indique s’il est conforme aux repères WCAG 2.1.
Sur la base du même principe, le vérificateur d’accessibilité peut détecter les problèmes suivants :
- Le texte volumineux doit avoir un rapport de contraste d’au moins 3:1.
- La présentation visuelle doit avoir un rapport de contraste d’au moins 4,5:1.
Conseil : Pour ajuster le contraste des couleurs, vous pouvez utiliser le WebAIM : Vérificateur de contraste de couleur pour éclaircir ou assombrir les options pour modifier légèrement les couleurs.
Utilisez correctement les en-têtes
Les en-têtes permettent aux apprenants ayant une déficience visuelle de comprendre la structure logique de la page et de naviguer vers ou de sauter des sections. Si les en-têtes de page ne sont faits que de texte en gras ou de grande taille de police, le lecteur d’écran ne peut pas donner un sens à la hiérarchie ou aider les utilisateurs à accéder rapidement à la section qu’ils voulaient.
Chaque page doit avoir un en-tête H1 (généralement le titre de la page), puis un en-tête H2 comme titres de section principaux, jusqu’à H3, H4, etc. Les titres doivent également être utilisés dans le bon ordre.
Comment utiliser correctement les en-têtes
Sélectionnez le texte, puis définissez-le sur l’en-tête approprié à l’aide du menu déroulant Format. Ne sautez pas un niveau.
Si les niveaux d’en-tête ne sont pas en ordre, le vérificateur d’accessibilité signalera L’ordre des en-têtes doit être séquentiel.
Utiliser les listes de manière appropriée
Les listes transmettent une structure de contenu hiérarchique aux utilisateurs de lecteurs d’écran. La liste non ordonnée
doit être utilisée lorsque les éléments de la liste peuvent être organisés de manière aléatoire, tandis que la liste ordonnée
doit être utilisée lorsqu’un ordre séquentiel est important.
Comment utiliser les listes
Sélectionnez les éléments, puis choisissez le Liste non ordonnée si l’ordre n’a pas d’importance ou sélectionnez Liste ordonnée à partir du menu déroulant s’il est séquentiel.
Le vérificateur de l’accessibilité suggérera de : Utiliser le balisage de liste pour les listes si les listes n’étaient pas vraies liste.
Créer un texte d’hyperlien descriptif
Rendre les hyperliens accessibles est l’un des aspects les plus importants de l’accessibilité du Web.
Comment utiliser les hyperliens
Sélectionner Insérer un lien rapide , puis sélectionnez L’URL dans la fenêtre contextuelle, entrez l’URL et le titre qui décrivent la destination du lien.
Pratiques exemplaires :
- Créer un texte d’hyperlien unique et descriptif
- Évitez d’utiliser l’URL comme texte de lien hypertexte
- Évitez les expressions telles que « cliquez ici », « plus », « cliquez pour plus de détails »
- Évitez de fournir deux liens juste à côté l’un de l’autre qui pointent vers le même emplacement (cela peut être déroutant pour les utilisateurs de lecteurs d’écran). Essayez de combiner les liens lorsque cela est possible.
Tables de balisage de manière appropriée
Une table contient des colonnes ou des lignes qui montrent la signification des données dans la grille. L’utilisateur voyant peut rapidement faire une association visuelle entre les données et les en-têtes de ligne / colonne, mais les utilisateurs qui ne peuvent pas voir le tableau ne peuvent pas faire les associations visuelles, ils comptent sur le lecteur d’écran pour naviguer dans les cellules une à la fois, et entendre les en-têtes de colonne / ligne si le tableau est marqué correctement. Pour une explication détaillée, reportez-vous à l’article WebAIM – Création de tables accessibles.
Comment marquer les tables
Sélectionnez les cellules à marquer comme en-tête de tableau, sélectionnez Propriétés des cellules du tableau puis a choisi Le type de cellule comme En-tête de colonne ou En-tête de ligne.
Voici quelques erreurs courantes qui peuvent être détectées par le vérificateur d’accessibilité :
Les tableaux doivent avoir des légendes.
Comment corriger : définissez un bref texte descriptif pour indiquer le contenu du tableau. Cela
s’ajoutera à l’intérieur de l’élément.Les tables doivent avoir au moins un en-tête.
Comment corriger : Définissez l’en-tête du tableau sur « Ligne d’en-tête » ou « Colonne d’en-tête », ce qui changera les cellules de données en cellules d’en-tête.Les en-têtes de tableau doivent être associés à des cellules.
Comment corriger : Définissez l’étendue de l’en-tête sur « Row » ou « Column » pour l’en-tête de tableau simple, ce qui ajoutera l’attribut scope ( ou De plus, vous pouvez utiliser des modèles HTML accessibles pour créer de nouvelles pages afin d’obtenir une apparence cohérente tout en maintenant l’accessibilité. Chez D2L, nous reconnaissons les besoins en modèles non adaptés aux développeurs. Renseignements supplémentairesWebAIM – Structure sémantiqueWebAIM – Texte alternatifWebAIM – Création de tables accessiblesPCC – Créez votre page Web D2L
