Aller sur YuJa
  1. Centre d'aide YuJa
  2. Plateforme d'accessibilité Web EqualGround
  3. Fonctionnalités d'accessibilité

Utiliser DevAssist d'EqualGround pour améliorer l'accessibilité du code

Avatar
YuJa
  • Mise à jour

Le plugin YuJa EqualGround DevAssist s'appuie sur l'IA pour vous aider à résoudre les problèmes d'accessibilité HTML directement dans l'IDE VS Code, ce qui vous fait gagner le temps qu'exige la correction manuelle après coup, une fois les sites Web et les applications Web mis en ligne. YuJa DevAssist vérifie le respect des normes WCAG 2.1 et 2.2, niveaux A, AA et AAA, afin de contribuer à assurer une conformité complète.

Configuration de YuJa EqualGround DevAssist

Le plugin YuJa EqualGround DevAssist peut être téléchargé depuis le site Web d'EqualGround, puis installé dans Visual Studio Code.

  1. Dans le menu latéral d'EqualGround, accédez à Configuration > DevAssist.

    downloading dev assist.png

  2. Cliquez sur le bouton Télécharger le plugin à l'étape 1 pour télécharger le plugin EqualGround pour VS Code.

    downloading dev assist 2.png

  3. Ouvrez Visual Studio Code.

  4. Sélectionnez l'onglet Extensions dans la barre latérale.

    downloading dev assist 3.png

  5. Cliquez sur le menu Plus d'actions et choisissez Installer à partir de VSIX.

    downloading dev assist 4.png

  6. Repérez le fichier du plugin EqualGround téléchargé, puis sélectionnez Installer pour terminer l'installation.

    downloading dev assist 5.png

  7. Ouvrez n'importe quel fichier HTML pour lancer l'analyse d'accessibilité en temps réel.

Comment utiliser YuJa EqualGround DevAssist

YuJa EqualGround DevAssist corrige les erreurs de code en proposant des corrections rapides. Sélectionner une correction rapide applique instantanément les changements à votre code. Les suggestions de correction rapide se reconnaissent à une icône d'ampoule jaune.

  1. Ouvrez Visual Studio Code.
  2. Ouvrez n'importe quel fichier HTML pour lancer l'analyse d'accessibilité en temps réel. Les problèmes sont signalés directement dans votre code par un soulignement rouge ondulé.

  3. Survolez un problème pour en savoir plus à son sujet et comprendre pourquoi il est important.

    how to use dev assist.png

  4. Utilisez Correction rapide pour apporter des corrections instantanées à votre code. Pour ouvrir la correction rapide :

    • Utilisez le raccourci clavier Ctrl +.

      Remarque : Il s'agit du raccourci par défaut; votre combinaison de touches peut être différente.

    • Faites défiler jusqu'au bas de la fenêtre contextuelle et cliquez sur Correction rapide…

      how to use dev assist 2.png

    • Sélectionnez la ligne contenant l'erreur, puis cliquez sur l'icône d'ampoule bleue.

      how to use dev assist 3.png

Problèmes que YuJa DevAssist peut résoudre

Consultez le tableau ci-dessous pour connaître les différents problèmes WCAG 2.2 que YuJa DevAssist peut résoudre.

Ligne directrice WCAG Numéro du critère de succès WCAG Problème
1.1 Alternatives textuelles 1.1.1 Contenu non textuel Il manque un texte alternatif ou des étiquettes ARIA aux images, aux icônes et aux éléments non textuels.
1.2 Médias temporels 1.2.1 Contenu uniquement audio ou uniquement vidéo (préenregistré) Le contenu audio ou vidéo préenregistré n'a pas d'alternative sous forme de transcription textuelle.
1.2.2 1.2.2 Sous-titres (préenregistrés) Il manque des sous-titres synchronisés à la vidéo préenregistrée.
1.3 Adaptable 1.3.1 Information et relations Le HTML sémantique est mal utilisé (p. ex., <div> au lieu de <nav>, champs de saisie sans étiquettes, hiérarchie des titres non respectée).
1.3.4 Orientation Le contenu se verrouille sur une orientation d'écran précise (portrait ou paysage uniquement).
1.3.5 Identifier la finalité de la saisie Il manque aux champs de formulaire des attributs autocomplete pour les données personnelles (nom, courriel, etc.)
1.4 Distinguable 1.4.10 Redistribution du contenu Le contenu se dégrade ou déborde lorsqu'il est agrandi à 400 % ou affiché dans une zone d'affichage de 320 px de large (mauvaise redistribution du contenu).
1.4.12 Espacement du texte Le texte est tronqué ou se chevauche lorsque l'espacement est modifié (interligne, espacement des lettres ou espacement des mots).
2.2 Délai suffisant 2.2.1 Délai ajustable Les limites de temps (sessions, quiz) ne peuvent pas être désactivées, prolongées ni ajustées.
2.2.2 Mettre en pause, arrêter, masquer Les contenus qui se lancent automatiquement ou qui sont en mouvement (carrousels, animations) n'ont pas de commande de pause ou d'arrêt.
2.4 Navigable 2.4.2 Titre de page Il manque un élément <title> pertinent aux pages.
2.4.3 Parcours du focus L'ordre de focus du clavier est illogique et ne correspond pas à la disposition visuelle.
2.4.9 Fonction du lien (lien uniquement) Les liens dont l'étiquette est vague, comme « cliquez ici » ou « lire la suite », sont ambigus hors contexte.
2.4.10 En-têtes de section Il manque aux longues sections de contenu des titres qui permettent aux utilisateurs d'y naviguer.
3.1 Lisible 3.1.1 Langue de la page L'élément <html> n'a pas d'attribut lang.
3.2 Prévisible 3.2.5 Changement à la demande Des changements de contexte inattendus se produisent lors d'une saisie (p. ex., redirections de page ou envois de formulaire déclenchés sans intention de l'utilisateur).
4.1 Compatible 4.1.2 Nom, rôle et valeur Il manque aux éléments interactifs (boutons, champs de saisie, composants personnalisés) des attributs de nom, de rôle ou de valeur destinés aux technologies d'assistance.


Articles associés

Contacter le support