Fonctionnalités d'accessibilité des guides Anthology Adopt
Grâce à cette page dédiée aux fonctionnalités de « guide » d'Anthology Adopt, découvrez comment rendre vos cours accessibles à tous.
Présentation
Important
Ces suggestions sont des recommandations en matière d'accessibilité fournies par l'entreprise Pendo. Elles sont basées sur les fonctionnalités d'accessibilité disponibles actuellement. Ce document n'a pas pour but de démontrer ou de déclarer la conformité aux normes d'accessibilité WCAG 2.1 AA ou à d'autres normes en la matière. Les fonctionnalités d'accessibilité fournies par Pendo sont conçues pour vous permettre de créer des outils d'accessibilité appelés « guides ». Cependant, Pendo ne garantit pas que le contenu créé sera conforme à une quelconque norme d'accessibilité.
L'accessibilité des contenus Web vise à rendre les contenus sur Internet accessibles à tous. Les guides Pendo fournissent des informations et des communications importantes sur votre application pour les utilisateurs. Les fonctionnalités d'accessibilité des guides visent à aider tous les utilisateurs à trouver et à interagir avec vos guides Pendo.
Certaines fonctionnalités d'accessibilité sont appliquées automatiquement par tous les guides. C'est le cas, par exemple, des attributs de Focus et de saisie (input) pour les badges, ou de la navigation au clavier. D'autres fonctionnalités nécessitent d'être activées et configurées lors de la création du guide. Des fonctionnalités telles que la fonction Auto-focus, les attributs aria-label, le texte de remplacement, le titre et les attributs aria-role peuvent être configurées depuis Visual Design Studio lorsque vous créez un guide. Certaines mesures d'accessibilité obligatoires doivent être implémentées manuellement lors de la conception du guide. C'est notamment le cas du contraste des couleurs, des sous-titres pour les éléments audio ou vidéo, ainsi que de la taille des éléments cliquables.
Recommandations
Activation du guide
Les guides activés par des badges sont plus accessibles. Ces guides sont plus accessibles que les guides automatiques ou les guides d'éléments cibles, car ils laissent le choix à chaque utilisateur de les activer ou non.
La position du badge doit systématiquement être définie sur « inline right » ou « inline left ». Cela limite l'endroit où vous pouvez placer le badge dans votre interface utilisateur, mais cela garantit que vous pouvez y accéder dans un ordre logique à l'aide de la navigation au clavier.
Création de guides
Ajoutez un texte de remplacement ou des attributs aria-label lorsque cela est possible. Ces éléments sont lus par les technologies d'assistance afin de fournir le contexte nécessaire aux utilisateurs.
Les rôles ARIA Dialog, Banner et Complementary sont les plus courants et les plus utiles pour les guides Anthology Adopt.
Le focus automatique doit toujours être activé afin de pleinement tirer parti des guides.
Vérifiez que le rapport de contraste de chaque élément dans le thème du guide est conforme à la norme WCAG AA.
Ajustez la taille des badges à 24 pixels, tel qu'exigé par la norme WCAG 2.2 AA quant à la taille minimale des cibles.
Configuration de l'accessibilité des guides
Configurez les fonctionnalités d'accessibilité dans les paramètres du conteneur et du Building Block d'un guide dans Visual Design Studio. Si des paramètres d'accessibilité sont disponibles pour un élément, ceux-ci se trouvent dans l'onglet Accessibilité du modal Modifier.
Un outil de vérification du contraste de couleurs (Color Contrast Checker) est disponible lors de la création ou de la modification d'un thème depuis Theme Settings (Paramètres du thème) de Visual Design Studio.
Attributs configurables
Vous pouvez modifier les attributs suivants dans les paramètres du conteneur et du Building Block pour améliorer l'accessibilité de vos guides. Chaque attribut répertorié indique les emplacements où ils peuvent être modifiés.
Contraste de couleurs. Couleur de fond et de police des éléments contenant du texte.
alt (Texte alternatif de l'image). Building Block d'une image.
aria-label. Conteneur, bouton de fermeture, bouton, badge, bloc de texte.
aria-modal. Conteneur lorsque la toile de fond est activée.
role. Conteneur pour chaque étape du guide.
titre. Bloc de construction vidéo
Mise au point automatique à cette étape. Conteneur pour chaque étape du guide.
Attributs non configurables (appliqués automatiquement)
h2, h3, p (en-têtes sémantiques). Les blocs de texte de titre, de sous-titre et de paragraphe sont automatiquement attribués à l'élément d'en-tête ou de paragraphe approprié.
aria-labelledby. Crée une relation entre deux éléments, utilisés par le texte ouvert, les sondages oui/non, les sondages à choix multiples, les échelles numériques et les sondages NPS.
aria-describedby. Crée une relation entre deux éléments, utilisée par les sondages à l'échelle numérique et les enquêtes NPS pour relier les premier et dernier chiffres de l'échelle à leurs descriptions textuelles.
aria-expanded. Appliqué automatiquement aux badges des guides et du centre de ressources.
role - role="group". Appliqué automatiquement aux boutons Oui/Non et aux boutons radio à choix multiples dans les blocs de construction du sondage.
Accès à Theme Settings (Paramètres du thème)
1. Sélectionnez Guides dans le panneau latéral, puis Manage theme (Gérer le thème).
2. Dans les zones Typography (Typographie) ou Button (Bouton), sélectionnez l'icône en forme de crayon pour commencer les modifications.
3. Le Color Contrast Checker (Outil de vérification du contraste de couleurs) apparaît lorsque vous effectuez des modifications. Il permet de vérifier que les couleurs choisies et appliquées à vos guides sont conformes aux exigences en matière de rapport de contraste des normes WCAG AA 4.5:1 ou WCAG AAA 7:1. Il est actualisé en temps réel lorsque vous modifiez les couleurs des arrière-plans et des polices. Si les couleurs choisies ne répondent pas aux exigences en matière de rapport de contraste, les balises WCAG sont marquées en rouge. Sinon, les balises WCAG sont marquées en vert.
Modifier les paramètres d'accessibilité du conteneur
Sélectionnez le bord d'une étape individuelle dans un guide pour ouvrir Container settings (Paramètres du conteneur) dans Visual Design Studio.
Chaque étape du guide possède des paramètres uniques pour contrôler l'apparence et les actions de cette étape. Si vous créez un guide d'accessibilité à plusieurs étapes, l'onglet Accessibility (Accessibilité) doit être configuré pour chaque étape du guide.
ARIA Label - Nom accessible. Définissez l'étiquette ARIA pour l'ensemble du conteneur-guide.
Role. Sélectionnez le rôle ARIA dans un menu déroulant des rôles disponibles (aucun rôle, article, bannière, complémentaire, informations de contenu, dialogue, formulaire, principal, navigation, présentation et région).
Mise au point automatique à cette étape. La technologie d'assistance de Traps se concentre sur le guide.
ARIA Label - Bouton de fermeture. Définissez des étiquettes ARIA pour le bouton de fermeture par défaut, qui peut également être activé dans les paramètres du conteneur.
Modification des paramètres du texte ou des boutons
Dans Visual Design Studio, sélectionnez le bouton « plus » de l'élément que vous souhaitez modifier. Cela ouvre le panneau des paramètres des Blocs fonctionnels.
L'attribut aria-label peut être configuré pour les Building Blocks de texte et de bouton.
Les Building Blocks de texte assignent automatiquement des en-têtes sémantiques dans le code HTML en fonction du style de thème sélectionné dans les paramètres du Building Block de texte.
Le style Title (Titre) correspond à un élément h2.
Le style Sub title (Sous-titre) correspond à un élément h3.
Le style Paragraph (Paragraphe) correspond à un élément p.
Le style Custom (Personnalisé) conserve l'en-tête sémantique du dernier style affecté (par exemple, un bloc de texte avec le style Paragraph changé en style Custom restera un élément « p »)
Modification des paramètres d'image
Sélectionnez Building Block Image pour ouvrir les paramètres du Building Block de l'image. Le texte de remplacement d'image peut être configuré depuis le Building Block de l'image. Le texte de remplacement reste la méthode privilégiée pour ajouter du texte accessible aux images. Les attributs aria-label ne sont généralement pas utilisés pour les images.
Modification des paramètres d'une vidéo
Sélectionnez Building Block Vidéo pour ouvrir les paramètres du Building Block de la vidéo. Le titre peut être configuré depuis le Building Block de la vidéo. Le titre reste la méthode privilégiée pour ajouter du texte accessible aux vidéos.
Modification des paramètres d'un sondage
Les différents Building Blocks de sondage contiennent différents paramètres configurables et non configurables visant à les rendre accessibles.
Sélectionnez les champs de réponse au sondage pour ouvrir les paramètres du sondage. Les éléments de texte et de bouton du sondage comportent des champs dédiés aux attributs aria-label.
Les attributs de rôle ARIA-describedby, ARIA-labelledby et group sont automatiquement appliqués pour assigner les réponses au sondage au texte de leur question respectif.
Modification de la taille du badge
Le badge est l'un des moyens par lesquels les utilisateurs peuvent activer un guide Adopt dans Blackboard. La taille par défaut des badges Anthology Adopt est de 14 pixels. La taille minimale de cible requise par la norme WCAG 2.2 AA est de 24 pixels.
Pour modifier la taille du badge, sélectionnez Activation pour ouvrir les paramètres d'activation. Sous Badges, sélectionnez Modifier les paramètres.
Dans l'onglet Styling (Style), dans le champ Size (Taille), vous pouvez ajuster la taille en pixels du badge, entre 8 et 300 pixels. Lorsque vous modifiez le numéro dans le champ, la taille du badge est actualisée en temps réel.
Mise à l'échelle d'images
Les normes WCAG stipulent que le contenu doit être « présenté sans perte d'information ou de fonctionnalité et sans nécessité de défilement dans les deux dimensions ». Les conteneurs de guide mettent automatiquement à l'échelle les Building Blocks d'image pour répondre à cette exigence. Si un utilisateur agrandit un guide, l'image est automatiquement mise à l'échelle proportionnellement à la largeur du conteneur. L'image n'est pas coupée ou n'ajoute pas de barres de défilement horizontales.
Bonne pratique pour les images pleine largeur
Les conteneurs de guide Pendo ont un remplissage de 40 pixels au niveau de la bordure extérieure par défaut pour espacer le contenu du guide et faciliter sa conception Les images dont le remplissage est défini sur 100 % restent dans le remplissage par défaut de 40 pixels. Vous pouvez utiliser des marges négatives pour étaler l'image sur toute la largeur du conteneur. La mise à l'échelle ajuste automatiquement l'image pour qu'elle corresponde à la largeur du conteneur lorsque l'utilisateur effectue un zoom avant ou arrière.
Toutes les valeurs sont des nombres négatifs
Marge de gauche : -40 pixels
Marge droite : -40 pixels
Si vous avez modifié les paramètres de remplissage du conteneur du guide, faites correspondre votre marge négative aux valeurs de remplissage du conteneur.
Important
Lorsque vous utilisez des valeurs personnalisées pour le remplissage et les marges afin d'agencer de manière créative des Building Blocks d'image, dans des emplacements qui ne sont pas pris en charge par le placement par défaut, la mise à l'échelle de l'image peut ne pas respecter la présentation et le placement de ces images. Testez vos guides sous différents niveaux de zoom pour vérifier si vos paramètres personnalisés interfèrent avec la mise à l'échelle automatique de l'image.
Focus
Le Focus permet aux utilisateurs de profiter des applications sans utiliser de souris ni de pavé tactile. Il peut prendre la forme d'anneau autour d'un élément, en fonction de la mise en forme CSS. Les versions 83 et ultérieures de Chrome vous permettent de définir la mise en forme du Focus directement dans l'application. Les navigateurs peuvent parfois activer le Focus sous la forme, par exemple, d'un contour autour d'un élément lorsque vous cliquez dessus ou parcourez la page à l'aide de la touche de tabulation.
Balise HTML : Input
Les badges utilisent la balise input dans le code HTML. Ils hériteront probablement de toutes les propriétés attribuées à input dans votre style CSS. Avant d'ajouter des fonctionnalités d'accessibilité, les badges utilisaient la balise img. Voici un exemple de badge du centre de ressources, inspecté à l'aide des outils pour les développeurs du navigateur Chrome :
<input type=”image” id=”pendo-image-badge-ID" src=”image-URL” data-_pendo-image-1 class=“_pendo-image _pendo-badge-image _pendo-resource-center-badge-image" style=“affichage : bloc ; hauteur : 56 px ; largeur : auto ; ombre de la boîte : rgba(255, 255, 255, 0) 0px 0px 0px 0px ; float : aucun ; alignement vertical : ligne de base ;”>
Autofocus
La fonction Autofocus capte l'attention d'une technologie d'assistance sur une étape du guide, jusqu'à ce qu'elle soit passée. Ce paramètre est configuré dans Container Settings (Paramètres du conteneur) pour chaque étape du guide.
ARIA Label, texte alternatif et titre
L'attribut aria-label, le texte de remplacement et le titre permettent d'identifier les éléments qui ne sont pas décrits de manière accessible dans l'interface utilisateur. Les outils d'accessibilité utilisent ces propriétés de différentes manières. Par exemple, un lecteur d'écran peut lire l'attribut aria-label à haute voix à l'utilisateur. Cet attribut est utilisé pour les Building Blocks des textes et des boutons, le texte de remplacement est utilisé pour les Building Blocks d'images, tandis que le titre est utilisé pour les Building blocks de vidéos. Voici l'attribut aria-label, inspecté à l'aide des outils pour les développeurs du navigateur Chrome :
<div id=“pendo-guide-container" data-editing-id=“f3db5a53-a87a-49b3-949f-e14f9e0eaf" class=“class=“_pendo-guide-container-styles" aria-model=“false” aria-label=“New user walkthrough” role=“dialog” style=“border: 1px solid rgb(187, 187, 187); background-color: rgb(255, 255, 255); border-radius: 0px; box-shadow: rgb(136, 136, 136) 0px 0px 20px 0px; display: block; position: relative; float: none; vertical-align: baseline; padding: 40px;”>...</div>
L'attribut aria-label, le texte de remplacement et le titre sont ajoutés à chaque Building Block.
Pour plus d'informations, reportez-vous aux définitions fournies par W3C pour l'attribut aria-label et le texte de remplacement pour les images (liens en anglais).
Rôle du guide ARIA
L'attribut de rôle Aria permet d'identifier les différents éléments aux technologies d'aide afin de fournir l'aide appropriée à l'utilisateur. Les rôles sont définis dans le modèle d'attributs aria-role et ont des objectifs spécifiques. Par exemple, il existe différents rôles pour les widgets qui identifient les éléments interactifs et documentent la structure du contenu sur la page, qui n'est généralement pas interactif.
Le rôle est défini à chaque étape du guide.
<div id=“pendo-guide-container" data-editing-id=“f3db5a53-a87a-49b3-949f-e14f9e0eaf" class=“class=“_pendo-guide-container-styles" aria-model=“false” aria-label=“New user walkthrough” role=“dialog” style=“border: 1px solid rgb(187, 187, 187); background-color: rgb(255, 255, 255); border-radius: 0px; box-shadow: rgb(136, 136, 136) 0px 0px 20px 0px; display: block; position: relative; float: none; vertical-align: baseline; padding: 40px;”>...</div>
Rôles disponibles
No Role (aucun rôle)
Article
Banner (en-tête)
Complémentaire
Contentinfo (informations de contenu)
Dialog (boîte de dialogue)
Formulaire
Main (principal)
Navigation
Présentation
Région
L'organisation W3C recommande de ne pas modifier les rôles en fonction du comportement de l'utilisateur ou au fil du temps après la publication du contenu. Les plates-formes et les appareils d'assistance ne disposent généralement pas d'API permettant de mettre à jour progressivement les rôles. Le premier rôle visible par la technologie d'assistance est généralement mis en cache et sans jamais être modifié. Si vous devez modifier l'attribut aria-role d'un guide publié, clonez le guide, modifiez le rôle, publiez le guide mis à jour et désactivez la version précédente. Le clonage du guide génère de nouveaux identifiants et le contenu du nouveau guide sera mis en cache par des appareils d'assistance.
Limites des fonctionnalités d'accessibilité
Les boutons comportant des actions avec des liens URL n'avertissent pas l'utilisateur qu'il s'agit d'un lien, mais l'attribut aria-label peut être utilisé pour ajouter un texte descriptif.