Créer des applications avec plus d’accessibilité

Grâce à des concepts, des syntaxes et des éléments, vous pouvez rendre les pages Web accessibles aux utilisateurs, notamment aux personnes handicapées. Découvrez comment rendre une application ASP.NET Core plus accessible.

Le Web est un endroit incroyable où nous pouvons tous rechercher n’importe quelle question qui nous vient à l’esprit, ou peut-être acheter quelque chose de nouveau, ou même rechercher les lieux que nous souhaitons visiter. Bref, les possibilités sont infinies.

Mais avez-vous déjà pensé que tout le monde ne peut pas accéder pleinement à cet endroit merveilleux ? C’est pourquoi il est toujours important de s’assurer que la conception de votre application Web est aussi accessible et inclusive.

En plus d’améliorer globalement votre application, la création d’applications inclusives permet aux personnes souffrant de divers types de handicaps d’avoir un accès complet à Internet. Garantir leur droit de participer et de bénéficier des avantages dont bénéficient également les autres utilisateurs est une entreprise très enrichissante.

Heureusement, les normes HTML et Web ont été conçues dans un souci d’accessibilité. Concevoir une application accessible n’est donc pas si difficile. En tant que développeur, vous avez simplement besoin de savoir utiliser correctement les ressources disponibles.

Les modèles ASP.NET Core sont construits avec Amorcer, qui intègre des considérations d’accessibilité. Ils comportent des facteurs importants qui représentent l’accessibilité, tels que la conception réactive, le balisage structurel et le contraste des couleurs. Jetons un coup d’œil à certaines des principales ressources couramment utilisées pour créer une application ASP.NET Core accessible.

Dans cet article, nous allons créer une nouvelle application Web ASP.NET Core, puis examiner les problèmes qui affectent son accessibilité. Nous installerons des outils pour diagnostiquer l’inaccessibilité et nous résoudrons les problèmes liés aux formulaires et à l’accessibilité visuelle. Enfin, nous utiliserons un lecteur d’écran pour mieux comprendre comment les problèmes d’accessibilité peuvent affecter l’expérience utilisateur.

Identification des problèmes d’accessibilité dans une application ASP.NET Core

Plusieurs aspects identifient une conception axée sur l’accessibilité. Tout d’abord, créons une application de base et ajoutons du HTML de base. Nous identifierons ensuite les lacunes dans lesquelles nous pouvons mettre en œuvre des fonctionnalités d’accessibilité.

Vous pouvez accéder au code complet du projet dans ce dépôt GitHub. Notez qu’il existe deux versions de l’application, l’une avec une conception d’accessibilité et l’autre sans.

Pour créer votre projet dans Visual Studio, procédez comme suit :

• Cliquez sur Créer un nouveau projet.
• Choisir Application Web ASP.NET Core (modèle-vue-contrôleur).
• Entrez un nom. Cet exemple utilise DevActualités.
• Choisissez la version .NET appropriée. Cet exemple utilise .FILET 7.
• Cliquez sur Créer.

Dans le projet que vous avez créé, accédez à Vues > Accueil et remplacez le code dans le Index.cshtml déposer comme suit :

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h1 class="display-8">Welcome to the Dev News</h1>
</div>

<style>
    div.button {
        width: 200px;
        height: 50px;
        border-radius: 20px;
        background-color: lightgray;
        text-align: center;
        padding: 10px;
        margin: 50px;
    }
</style>

<div class="text-center">
    <h2 class="display-10">Join our mailing list</h2>
    <p>
        Sign up and follow the news from the dev world
    </p>
    <form name="CustomerInfo">
        <div class="container">
            <div class="row">
                <div class="col-4 text-black-50">
                    Name
                  </div>
                  <div class="col-8">
                    <input type="text" id="Name">
                  </div>
            </div>
            <div class="row">
                <div class="col-4 text-black-50">
                    E-mail
                </div>
                <div class="col-8">
                    <input type="text" id="Email">
                </div>
            </div>
            <div class="button">
                <a href="#" onclick="document.getElementById('CustomerInfo').Submit();">
                    Submit
                </a>
            </div>
        </div>
    </form>
</div>

<p style="font-size: 30px"><b>All about programming</b></p>
<p class="bg-light text-muted">
    Here you will find the best content about current technology<br><br>
</p>

<div class="text-center">
    <img width="120" src="https://raw.githubusercontent.com/zangassis/dev-news/main/assets/dev-news-icon.jpg">
</div>

<p style="font-size: 30px"><b>Main topics</b></p>
<p class="bg-light text-muted">
    - ASP.NET Core<br>
    - Web development<br>
    - .NET
</p>

<p style="font-size: 30px"><b>We take your privacy seriously!</b></p>
<p class="bg-light text-muted">
    We care about your privacy.<br><br>
    Want to know more? <a href="https://www.telerik.com/Privacy">Click here.</a>
</p>

Analyser les problèmes d’accessibilité

À première vue, le code ci-dessus ne ressemble à rien d’extraordinaire. Il ne contient qu’un formulaire et quelques paragraphes. Cependant, il présente un certain nombre de problèmes d’accessibilité.

Pour identifier ces problèmes, vous pouvez utiliser des outils comme Informations sur l’accessibilité pour le Web. Vous pouvez le télécharger et l’installer ou l’utiliser comme plugin dans Chrome ou Edge. Cet exemple l’utilise comme plugin dans Chrome.

Exécutez l’application via Visual Studio. Dans un navigateur avec la page d’accueil de l’application ouverte, cliquez sur l’icône Informations sur l’accessibilité pour le Web icône du plugin. Trois options apparaîtront :

• Fast Pass est un processus simple en deux étapes qui aide les développeurs à identifier les problèmes d’accessibilité courants à fort impact. Ceux-ci incluent, entre autres, les onglets manquants, les pièges du clavier et l’ordre des onglets incorrect.
• Évaluation permet à toute personne ayant des compétences en HTML de vérifier qu’une application ou un site Web est conforme aux directives pour l’accessibilité du contenu Web (WCAG) 2.1 niveau AA.
• Pour ça les outils fournissent un accès rapide aux vues qui aident à identifier les problèmes d’accessibilité.

Pour cet exemple, cliquez sur Fast Pass. Vous pouvez voir en rouge tous les éléments qui ont un problème d’accessibilité :

Notez qu’il existe plusieurs problèmes d’accessibilité dans notre application qui ont été identifiés par le plugin. Si vous cliquez sur la zone surlignée en rouge, vous pouvez voir les détails de chaque erreur. Nous traiterons chacun d’eux jusqu’à ce que notre application soit compatible avec une conception orientée accessibilité.

Règles échouées

Informations sur l’accessibilité pour le Web définit deux listes de règles ayant échoué qui sont utilisés pour identifier les problèmes d’accessibilité trouvés dans l’application. Une liste concerne les applications Web et l’autre les appareils Android. Nous analyserons chacune des règles défaillantes présentes dans notre application et les corrigerons.

Règle échouée : contraste des couleurs

Le plugin signale qu’il y a un échec de contraste des couleurs dans certains éléments de code. Cela se produit parce que nous avons défini une couleur de texte à afficher avec un faible contraste. Dans ce cas, le text-black-50 La classe donne au texte une couleur gris clair, ce qui peut rendre la lecture impossible aux personnes malvoyantes.

Pour résoudre ce problème, définissez une couleur plus foncée pour le texte. Dans tous les éléments qui ont l’erreur color-contrastajoutez la classe native ASP.NET Core text-primary. Supprimer la classe text-black-50 selon l’exemple ci-dessous :

Accessibilité

 <div class="row">
                <div class="col-4 text-black-50" >
                    Name
                </div>
                <div class="col-8">
                    <input type="text" id="Name">
                </div>
</div>

Meilleure accessibilité

 <div class="row text-primary">
                <div class="col-4" >
                    Name
                </div>
                <div class="col-8">
                    <input type="text" id="Name">
                </div>
</div>

Notez que le bouton div a un CSS personnalisé qui définit la couleur d’arrière-plan du bouton sur lightgray. Cela pose un autre problème. Lors de la construction d’un design axé sur l’accessibilité, il faut privilégier les couleurs à fort contraste, comme les couleurs complémentaires, qui s’opposent dans le cercle chromatique. Par exemple, bleu et orange, ou vert et rouge.

Dans cet exemple, remplacez lightgray avec black pour donner un contraste élevé au texte du bouton. Remplacez cet extrait de code :

background-color: lightgray;

avec le code ci-dessous :

background-color: black;

Notez que d’autres éléments de notre code ne respectent pas non plus la règle de contraste des couleurs, comme <p> balises à la fin du bloc de code. Cela se produit parce que nous utilisons la classe bg-light. Pour résoudre ce problème, supprimez la classe bg-light partout dans le code.

Échec de la règle : étiquette

Ce problème est signalé car nous n’utilisons pas le <label> étiquette pour le Nom et E-mail des champs.

Pour que les technologies d’assistance puissent associer un élément à un objet d’interface utilisateur spécifique, nous devons utiliser un nom accessible pour les champs de l’application. Cela permet aux personnes qui utilisent une technologie d’assistance de connaître l’objectif spécifique de l’élément.

A noter que dans l’exemple avec accessibilité, le type de balise a également été modifié. Ce qui était auparavant text et c’est maintenant email, ce qui est plus approprié. Le required class est également utilisé pour rendre obligatoire le remplissage du champ.

Remplacez le code suivant :

 <div class="row">
                <div class="col-4 text-primary">
                    Name
                  </div>
                  <div class="col-8">
                    <input type="text" id="Name">
                  </div>
            </div>
            <div class="row">
                <div class="col-4 text-primary">
                    E-mail
                </div>
                <div class="col-8">
                    <input type="text" id="Email">
                </div>
            </div>

avec le code ci-dessous :

     <div class="row">
                <div class="col-4 text-primary">
                    <label for="Name">Name</label>
                  </div>
                  <div class="col-8">
                    <input type="text" id="Name" required>
                  </div>
            </div>
            <div class="row">
                <div class="col-4 text-primary">
                    <label for="Email">E-mail</label>
                </div>
                <div class="col-8">
                    <input type="text" id="Email" required>
                </div>
            </div>

Règle échouée : image-alt

Les images ne peuvent pas être interprétées directement par les technologies d’assistance. Au lieu de cela, ils utilisent un texte alternatif qui doit être saisi dans l’élément image. Sur la base de ce texte, la technologie d’assistance peut communiquer la signification de l’image aux utilisateurs.

L’image dans notre code n’a pas le "alt="image-description" propriété, donc il échoue à la règle image-alt. Pour résoudre ce problème, ajoutez simplement la propriété alt au <img> balisez et ajoutez du texte dedans.

Remplacez cet extrait de code :

    <img width="120" src="https://raw.githubusercontent.com/zangassis/dev-news/main/assets/dev-news-icon.jpg">

avec celui-ci:

    <img width="120" src="https://raw.githubusercontent.com/zangassis/dev-news/main/assets/dev-news-icon.jpg" alt="Dev News icon">

Si vous avez suivi toutes les étapes précédentes, tous les problèmes d’accessibilité devraient être résolus lorsque vous exécutez votre application et ouvrez la fonctionnalité Accessibility Insights for Web FastPass. Votre résultat devrait être similaire à l’image suivante :

Taquets de tabulation

Les taquets de tabulation sont un élément très important pour l’accessibilité du Web. Par exemple, une personne malvoyante peut les utiliser pour naviguer dans la page en utilisant le Languette touche de leur clavier. Vérifions si ceux-ci sont correctement implémentés dans notre application.

Dans le menu FastPass du plug-in Accessibility Insights for Web, procédez comme suit :

• Accéder Taquets de tabulation.
• Activez la fonction Visual Helper.
• Dans l’onglet avec l’écran initial de l’application, appuyez sur la touche Languette touche du clavier pour suivre le flux, comme le montre l’image ci-dessous.

Tester l’accessibilité avec un lecteur d’écran

Le Narrateur est une fonctionnalité native de Windows utilisée pour lire l’écran, permettant aux utilisateurs d’effectuer des tâches courantes sans souris.

Pour activer le Narrateur sous Windows, utilisez la combinaison de raccourcis clavier Touche du logo Windows + Ctrl + Entrée. Pour désactiver le Narrateur, appuyez à nouveau sur ces touches. Vous pouvez également activer le Narrateur manuellement en appuyant sur Touche du logo Windows + Ctrl + N pour ouvrir les paramètres du Narrateur, puis activez ou désactivez la fonctionnalité via la bascule.

Avec l’application en cours d’exécution et le Narrateur activé, accédez à la page sur laquelle l’application est en cours d’exécution.

Sélectionnez 1 sur le clavier. Cela demande au Narrateur de lire le <h1> titre sur la page, et vous devriez entendre le Narrateur prononcer la phrase « Bienvenue dans les Dev News ». Appuyez à nouveau sur la touche 1 et le Narrateur signale qu’il n’y en a plus.
<h1> éléments. C’est correct pour cette application : la page ne doit contenir qu’un seul <h1> élément.

Sélectionnez la touche 2 du clavier pour que le narrateur lise le <h2> titre. Vous devriez entendre le narrateur prononcer la phrase « Rejoignez notre liste de diffusion ». Appuyez à nouveau sur la touche 2 et le Narrateur signale qu’il n’y a plus <h2> éléments.

Cependant, c’est incorrect. Il y a d’autres points importants sur la page, mais comme ils ne figurent pas dans un titre, le Narrateur les ignore. Pour résoudre ce problème, apportez les modifications de code suivantes :

Remplacer:

Here you will find the best content about current technology

avec:

<h2>Here you will find the best content about current technology<h2>

Remplacer:

<b>We take your privacy seriously!</b>

avec:

<h2>We take your privacy seriously!</h2>

Un autre problème est le lien avec le texte Click here. Le narrateur lit ce texte, qui n’indique rien de spécifique pour le lecteur. On leur dit simplement de cliquer ici. Pour que les choses soient plus claires, remplacez le code :

Want to know more? <a href="https://www.telerik.com/Privacy">Click here.</a>

avec:

Please visit our <a href="https://www.telerik.com/Privacy">privacy policy</a> for more information.

Maintenant, exécutez à nouveau l’application, activez le Narrateur et sélectionnez à nouveau la touche 2 du clavier. Cette fois, vous devriez entendre tous les titres définis comme <h2> qui offrent désormais plus d’informations.

Clique le Languette jusqu’à ce que vous atteigniez le lien de confidentialité en bas de la page. Le narrateur doit prononcer à haute voix le texte « politique de confidentialité ».

Conclusion

Si vous effectuez un examen complet du code de cet exemple d’application, vous remarquerez peut-être qu’il existe encore quelques problèmes d’accessibilité mineurs sur la page. Les résoudre tous dépasse le cadre de cet article, alors n’hésitez pas à creuser plus profondément et à les résoudre par vous-même.

Dans cet article, vous avez été initié au sujet de l’accessibilité, un sujet très important dans le développement de logiciels. Chaque fois que vous développez une nouvelle application, pensez à ajouter des éléments accessibles grâce aux conseils donnés dans cet article. Profitez des avantages de l’accessibilité Web, tant pour vous-même en tant que développeur que pour ceux qui utiliseront votre logiciel.