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
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 ». Cette mesure limite certes la position du badge dans l'interface utilisateur, mais elle permet de garantir que le badge est accessible 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 attributs aria-role « 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 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, ils se trouvent dans l'onglet Accessibilité de la fenêtre modale 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.
- Color contrast (contraste de couleurs) : couleur d'arrière-plan et de police des éléments qui contiennent du texte.
- alt (texte de remplacement d'une image) : Building Block d'une image.
- aria-label : conteneur, bouton Fermer, bouton, badge, Building Block d'un texte.
- aria-modal : conteneur, lorsque l'option "Backdrop" est activée.
- role : conteneur de chaque étape d'un guide.
- titre : Building Block d'une vidéo
- Autofocus this step (activer le focus automatique pour cette étape) : conteneur de chaque étape d'un 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 affectés à l'élément d'en-tête ou de paragraphe approprié.
- aria-labelledby : crée une relation entre deux éléments. Utilisé par du texte en saisie libre, questionnaires oui/non, questionnaires à choix multiples, sondages à échelle numérique et sondages NPS.
- aria-describedby : crée une relation entre deux éléments. Utilisé par les sondages NPS et à échelle numérique NPS pour relier le premier et le dernier nombre 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 de questionnaires à choix multiples dans les Building Blocks de 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.
Paramètres d'accessibilité du conteneur
- ARIA Label - Accessible Name : permet de définir l'attribut aria-label pour l'ensemble du conteneur du guide.
- aria-role : permet de sélectionner un attribut aria-role dans un menu déroulant, parmi les rôles disponibles (aucun rôle, article, banner, complementary, contentinfo, dialog, form, main, navigation, presentation et region).
- Autofocus this step : capte l'attention d'une technologie d'assistance sur le guide.
- ARIA Label - Close Button : permet de définir les attributs aria-label pour le bouton Fermer 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. Le panneau avec les paramètres Building Blocks s'ouvre.
L'attribut aria-label peut être configuré pour les Building Blocks de texte et de bouton.
HTML sémantique pour les Building Blocks de texte
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 Edit settings (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.
Paramètres de marge pleine largeur
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.
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 donc probablement de toutes les propriétés de la balise input définies dans le fichier 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=“display: block; height: 56px; width: auto; box-shadow: rgba(255, 255, 255, 0) 0px 0px 0px 0px; float: none; vertical-align: baseline;”>
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.
Attribut aria-label, texte de remplacement 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).
Navigation au clavier
Certains utilisateurs peuvent ne pas être en mesure d'utiliser un curseur ou un écran tactile pour interagir avec la page. La navigation au clavier est un paramètre important pour l'accessibilité du contenu. Les utilisateurs peuvent naviguer au travers des contenus des guides à l'aide des touches de clavier.
- Appuyez sur Échap pour ignorer le guide actif.
- Appuyez sur la touche de tabulation pour passer d'un élément à l'autre dans une étape de guide.
Attribut aria-role des guides
L'attribut aria-role permet d'identifier aux technologies d'assistance d'identifier les différents éléments 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)
- Complementary (repère complémentaire)
- Contentinfo (informations de contenu)
- Dialog (boîte de dialogue)
- Form (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.
