Intelligence de données générative

Code

Démystifier les lecteurs d'écran : formulaires accessibles et meilleures pratiques

Réédité par Platon
Réédité par Platon

Date :

Vues: 0

Il s'agit du troisième article d'une petite série que nous rédigeons sur l'accessibilité des formulaires. Si vous avez manqué le 3ème message, consultez Gérer le focus utilisateur avec :focus-visible. Dans cet article, nous allons examiner l'utilisation d'un lecteur d'écran lors de la navigation dans un formulaire, ainsi que quelques bonnes pratiques.

Qu'est-ce qu'un lecteur d'écran ?

Vous avez peut-être entendu le terme « lecteur d’écran » en parcourant le Web. Vous utilisez peut-être même un lecteur d'écran en ce moment pour exécuter des tests d'accessibilité manuels sur les expériences que vous créez. Un lecteur d’écran est un type d’AT ou de technologie d’assistance.

Un lecteur d'écran convertit le texte numérique en parole synthétisée ou en sortie Braille, généralement observée avec un lecteur Braille.

Dans cet exemple, j'utiliserai Mac VO. Mac VO (VoiceOver) est intégré à tous les appareils Mac ; Systèmes iOS, iPadOS et macOS. Selon le type d'appareil sur lequel vous exécutez macOS, l'ouverture de VO peut différer. Le Macbook Pro qui exécute VO sur lequel j'écris ceci n'a pas de barre tactile, j'utiliserai donc les touches de raccourci en fonction du matériel.

Faire tourner la VO sur macOS

Si vous utilisez un Macbook Pro mis à jour, le clavier de votre ordinateur ressemblera à l'image ci-dessous.

Vous commencerez par maintenir enfoncée la touche cmd puis en appuyant trois fois rapidement sur Touch ID.

Clavier MacBook Pro avec étapes pour démarrer la voix off sur Mac.

Si vous êtes sur un MBP (MacBook Pro) avec une TouchBar, vous utiliserez le raccourci cmd+fn+f5 pour activer la VO. Si vous utilisez un clavier traditionnel avec votre ordinateur de bureau ou portable, les touches doivent être les mêmes ou vous devrez activer la VO dans les paramètres d'accessibilité. Une fois la VO activée, vous serez accueilli avec cette boîte de dialogue accompagnée d'un message vocalisé. introduction à la VO.

Bienvenue dans la boîte de dialogue VoiceOver lors de l'ouverture de la voix off.

Si vous cliquez sur le bouton « Utiliser VoiceOver », vous êtes sur la bonne voie pour utiliser VO pour tester vos sites Web et vos applications. Une chose à garder à l’esprit est que VO est optimisé pour être utilisé avec Safari. Cela étant dit, assurez-vous lorsque vous exécutez le test de votre lecteur d'écran que Safari est le navigateur que vous utilisez. Cela vaut également pour l'iPhone et l'iPad.

Il existe deux manières principales d’utiliser VO dès le début. Personnellement, je l'utilise en naviguant vers un site Web et en utilisant une combinaison des tab, control, option, shift et les touches fléchées, je peux naviguer efficacement dans l'expérience avec ces seules touches.

Une autre façon courante de naviguer dans l'expérience consiste à utiliser le Rotor de voix off. Le Rotor est une fonctionnalité conçue pour naviguer directement là où vous souhaitez être dans l'expérience. En utilisant le Rotor, vous évitez d'avoir à parcourir l'ensemble du site, considérez-le comme une « Choisissez votre propre aventure ».

Touches de modification

Les touches de modification sont la façon dont vous utilisez les différentes fonctionnalités de VO. La touche de modification par défaut ou VO is control + option mais vous pouvez le changer en verrouillage des majuscules ou choisir les deux options à utiliser de manière interchangeable.

Utilitaire VoiceOver pour modifier les touches de modification.

Utilisation du rotor

Pour utiliser le Rotor, vous devez utiliser une combinaison de vos touches de modification et de la lettre « U ». Pour moi, ma touche de modification est caps lock. j'appuie caps lock + U et le rotor tourne pour moi. Une fois que le Rotor apparaît, je peux accéder à n'importe quelle partie de l'expérience que je souhaite en utilisant les flèches gauche et droite.

Fonction de rotor VoiceOver affichant la navigation par titres.
[Contenu intégré]
Utiliser le rotor dans VoiceOver

Une autre façon intéressante de naviguer dans l’expérience consiste à classer le niveau de titre. Si vous utilisez la combinaison de vos touches de modification + cmd + H vous pouvez parcourir la structure du document en fonction des niveaux de titre. Vous pouvez également remonter le document en appuyant sur shift dans la séquence comme ceci, touches de modification + shift + cmd + H.

[Contenu intégré]
Utilisation du raccourci du niveau de titre avec VoiceOver

Histoire et meilleures pratiques

Les formulaires sont l’un des éléments natifs les plus puissants dont nous disposons en HTML. Que vous recherchiez quelque chose sur une page, que vous soumettiez un formulaire pour acheter quelque chose ou que vous soumettiez une enquête. Les formulaires sont la pierre angulaire du Web et ont été un catalyseur qui a introduit l’interactivité dans nos expériences.

L'histoire du formulaire Web remonte à septembre 1995, date à laquelle il a été introduit dans le Spécification HTML 2.0. Certains disent que c’était le bon vieux temps du web, c’est du moins moi qui le dis. Stephanie Stimac a écrit un article génial sur Smashing Magazine intitulé "Standardisation de Select et au-delà : le passé, le présent et l'avenir des contrôles de formulaire HTML natifs ».

Voici 5 bonnes pratiques à suivre lors de la création d’un formulaire accessible pour le Web.

  1. Assurez-vous que vous utilisez un élément de formulaire. Les formulaires sont accessibles par défaut et doivent être utilisés à tout moment sur les div.
<form>
  <!-- Form controls are nested here. -->
</form>
  1. Assurez-vous d'utiliser le for ainsi que id attributs sur label'le sable inputC'est pour qu'ils soient liés. De cette façon, si vous cliquez/appuyez sur l’étiquette, le focus se déplacera sur l’entrée et vous pourrez commencer à taper.
<label for="name">Name:</label>
<input type="text" id="name" name="name" required aria-required/>
  1. Si un champ est obligatoire pour que le formulaire soit complet, utilisez l'attribut obligatoire et l'attribut aria-requis. Cela limitera la soumission du formulaire. L'attribut aria-required indique explicitement au technicien d'assistance que le champ est obligatoire.
<input type="text" id="name" name="name" required aria-required/>
  1. Utilisez le, :focus, :focus-within ainsi que :focus-visible Pseudo-classes CSS pour gérer et personnaliser la manière dont un utilisateur reçoit le focus.
form:focus-within {
 background-color: #cfffcf;
}

input:focus-within {
 border: 10px solid #000000;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
 outline: 2px solid crimson;
 border-radius: 3px;
}
  1. A button est utilisé pour invoquer une action, comme soumettre un formulaire. Utilise le! Ne créez pas de boutons en utilisant div's. UN div par définition est un diviseur. Il n’a aucune propriété d’accessibilité inhérente.

Démo

[Contenu intégré]
Naviguer dans un formulaire Web avec VoiceOver

Si vous souhaitez consulter le code, accédez au Dépôt GitHub de la démo VoiceOver. Si vous souhaitez essayer la démo ci-dessus avec le lecteur d'écran de votre choix, consultez Naviguer dans un formulaire Web avec VoiceOver.

Logiciel de lecture d'écran

Vous trouverez ci-dessous une liste des différents types de logiciels de lecture d'écran que vous pouvez utiliser sur votre système d'exploitation donné. Si un Mac n'est pas votre machine de prédilection, il existe des options pour Windows et Linux, ainsi que pour les appareils Android.

NVDA

NVDA est un lecteur d'écran de NV Access. Il n'est actuellement pris en charge que sur les PC exécutant Microsoft Windows 7 SP1 et versions ultérieures. Pour plus d'accès, consultez le Page de téléchargement de NVDA version 2024.1 sur le site Web NV Access!

MÂCHOIRES

"Nous avons besoin d'un meilleur lecteur d'écran"

- Anonyme

Si vous avez compris la référence ci-dessus, vous êtes en bonne compagnie. Selon le site Web JAWS, voici en résumé ce que cela signifie :

« JAWS, Job Access With Speech, est le lecteur d'écran le plus populaire au monde, développé pour les utilisateurs d'ordinateurs dont la perte de vision les empêche de voir le contenu de l'écran ou de naviguer avec une souris. JAWS fournit une sortie vocale et braille pour les applications informatiques les plus populaires sur votre PC. Vous pourrez naviguer sur Internet, rédiger un document, lire un e-mail et créer des présentations depuis votre bureau, votre bureau distant ou depuis votre domicile.

Site Web de JAWS

Découvrez JAWS par vous-même et si cette solution répond à vos besoins, essayez-la !

narrateur

Narrateur est une solution de lecteur d'écran intégrée fournie avec WIndows 11. Si vous choisissez de l'utiliser comme lecteur d'écran de votre choix, le lien ci-dessous renvoie à la documentation d'assistance sur son utilisation.

Guide complet du Narrateur

Orca

Orca est un lecteur d'écran qui peut être utilisé sur différentes distributions Linux exécutant GNOME.

« Orca est un lecteur d'écran gratuit, open source, flexible et extensible qui permet d'accéder au bureau graphique via la parole et le braille actualisable.

Orca fonctionne avec des applications et des kits d'outils qui prennent en charge l'interface AT-SPI (Assistive Technology Service Provider Interface), qui constitue la principale infrastructure technologique d'assistance pour Linux et Solaris. Les applications et boîtes à outils prenant en charge l'AT-SPI incluent la boîte à outils GNOME Gtk+, la boîte à outils Swing de la plate-forme Java, LibreOffice, Gecko et WebKitGtk. La prise en charge d'AT-SPI pour la boîte à outils KDE Qt est en cours.

Site Web d'Orque

Réagissez

Google TalkBack est le lecteur d'écran utilisé sur les appareils Android. Pour plus d'informations sur son activation et son utilisation, consultez cet article sur le site d'assistance pour l'accessibilité Android.

Support du navigateur

Si vous recherchez une prise en charge réelle par le navigateur des éléments HTML et des attributs ARIA (Accessible Rich Internet Application), je suggère caniuse.com pour HTML ainsi que Prise en charge de l’accessibilité pour ARIA pour obtenir le dernier 4-1-1 sur la prise en charge des navigateurs. N'oubliez pas que si le navigateur ne prend pas en charge la technologie, il est probable que le lecteur d'écran ne le fera pas non plus.

NumériqueA11Y peuvent aider à résumer les informations du navigateur et du lecteur d'écran avec leur article,  Lecteurs d'écran et navigateurs ! Quelle est la meilleure combinaison pour les tests d’accessibilité ?

https://support.apple.com/guide/voiceover/with-the-voiceover-rotor-mchlp2719/mac

https://www.w3.org/TR/wai-aria/

https://www.w3.org/WAI/standards-guidelines/aria/

https://support.google.com/accessibility/android/answer/6283677?hl=en

https://support.google.com/accessibility/android/answer/6283677?hl=en

spot_img

Dernières informations

spot_img

Copyright @ 2024 Platon Technologies Inc.

Discutez avec nous

Salut! Comment puis-je t'aider?