Accessibilité des lecteurs d'écran – Vérifier le texte alt en C#

Le lecteur d’écran comme technologie d’assistance

L’accessibilité des lecteurs d’écran est un aspect crucial de l’accessibilité du web qui vise à rendre le contenu numérique, en particulier les sites web et les applications, accessible aux personnes aveugles ou malvoyantes.

Un lecteur d’écran est une technologie d’assistance conçue pour lire le contenu en ligne à haute voix. Il transforme le texte numérique et le contenu visuel en parole ou en braille, ce qui permet aux utilisateurs souffrant d’un handicap visuel de naviguer, d’interagir avec le contenu numérique et de le comprendre. Les lecteurs d’écran sont nécessaires non seulement pour les personnes aveugles et malvoyantes, mais aussi pour les utilisateurs souffrant de troubles cognitifs, pour qui il est plus facile de traiter l’information à l’oreille.

Les lecteurs d’écran peuvent lire n’importe quel contenu d’une page. Par exemple, le texte des paragraphes et des titres, les listes, les descriptions alternatives d’images, les liens, les boutons radio et autres éléments interactifs. Par conséquent, pour que les lecteurs d’écran puissent lire des informations qui seront accessibles et compréhensibles pour l’utilisateur, il est nécessaire de fournir un texte alternatif, ainsi que des titres informatifs.

Utilisez les recommandations suivantes, basées sur les WCAG, pour vous assurer que votre site web est accessible aux personnes qui utilisent des lecteurs d’écran. Ce n’est pas seulement important pour les personnes handicapées. Elle améliorera l’expérience de l’utilisateur pour tous et permettra à votre site d’être mieux classé dans les résultats des moteurs de recherche.

Texte alternatif

Les lecteurs d’écran ne peuvent pas traduire une image en mots qui seront lus par l’utilisateur, même si l’image n’est constituée que de texte. Pour l’accessibilité du web, les images doivent être accompagnées d’un texte alternatif court et descriptif afin que les utilisateurs de lecteurs d’écran comprennent clairement le contenu et l’objectif de l’image. Outre l’importance du texte alternatif pour les personnes ayant des problèmes de vue, il remplit plusieurs autres fonctions essentielles :

Le navigateur affiche un texte alternatif à la place de l’image si celle-ci n’est pas chargée ou bloquée.
Les moteurs de recherche utilisent des textes alternatifs et en tiennent compte lorsqu’ils évaluent l’objectif et le contenu d’une page.

Texte alternatif pour les images – attribut alt dans la balise img

Veillez à ce que tous les éléments informatifs <img> aient un texte alternatif court et descriptif et que tous les éléments décoratifs <img> aient des attributs alt vides (par exemple, alt=""). Lorsque vous rédigez un texte alternatif, n’oubliez pas que son objectif est de transmettre aux utilisateurs aveugles des informations sur le contenu et l’objectif de l’image, de sorte qu’ils obtiennent autant d’informations à partir du texte alternatif qu’un utilisateur voyant à partir de l’image elle-même. Le texte alt doit indiquer l’intention, l’objectif et la signification de l’image.

Dans l’exemple ci-dessous, le contenu de l’image indique à l’utilisateur qu’il s’agit d’un portrait d’une fille et ce à quoi elle ressemble :

1<img src="vermeer-girl-with-perl.png" alt="A European girl is depicted in an exotic dress, oriental turban and with a very large pearl as an earring">

A European girl is depicted in an exotic dress, oriental turban and with a very large pearl as an earring

Pour éviter que votre texte alt n’énerve les personnes qui utilisent des lecteurs d’écran, utilisez un minimum de mots, soyez précis et ne bourrez pas le texte alt de phrases clés. Ce n’est pas l’endroit où placer des mots-clés. N’annoncez pas qu’il s’agit d’une image. La tâche principale est de décrire avec des mots et d’aider les personnes aveugles à comprendre le but de l’image sur la page.

Attribut Alt dans les boutons – texte alt des boutons

L’utilisation de l’attribut alt dans les boutons et les boutons-images est une pratique cruciale pour l’accessibilité du web. Les boutons-images utilisent l’attribut alt comme étiquette. La valeur de l’attribut alt doit être claire, concise et représentative de l’action effectuée lorsque l’utilisateur active le bouton, et non une description de l’image elle-même. Ce texte est lu à haute voix par les lecteurs d’écran, ce qui permet aux personnes aveugles ou malvoyantes de comprendre la fonctionnalité du bouton et d’interagir avec elle.

Vérifiez que l’attribut <input type="image"> a un attribut alt non vide.

1<input type="image" src="print.jpg" name="submit" alt="Print">

Utilisez des descriptions spécifiques et significatives. Évitez les termes génériques tels que “bouton” ou “image”. Si le bouton effectue une action, décrivez cette action. Par exemple, “Soumettre”, “Rechercher” ou “Voir les détails” Si le bouton est décoratif et n’a pas de fonction, utilisez un attribut alt vide (alt="") ou supprimez l’attribut alt.

1<button type="submit">
2    <img src="submit-button.png" alt="Submit Form">
3</button>

Texte alternatif pour le contenu rendu à l’aide d’un élément `<object>`

L’élément <object> incorpore du contenu externe, tel que des images, des vidéos ou des applications interactives, dans une page web. Pour rendre ce contenu accessible aux personnes handicapées, vous devez utiliser l’attribut alt sur le type de contenu incorporé.

Si le contenu est une image, utilisez l’attribut alt dans l’élément <objet> pour fournir un texte alternatif. Le texte alternatif doit décrire l’objectif du contenu ou donner une description significative. Par exemple :

1<object >
2    <img src="aspose.gif" alt="Logo Aspose company" />
3</object> 
4
5<object data="companylogo.gif" type="image/gif">
6    <p>Company name</p>
7</object>

Si le contenu est purement décoratif et ne transmet pas d’informations significatives, envisagez d’utiliser un attribut alt vide ou de l’omettre.

éléments `<label>` pour associer des étiquettes de texte aux contrôles de formulaires

L’utilisation d’éléments <label> pour associer des étiquettes de texte aux contrôles de formulaires est une pratique fondamentale du développement web et un aspect essentiel de l’accessibilité du web. Cette méthode améliore la convivialité et garantit que les utilisateurs, y compris les personnes handicapées, peuvent comprendre les formulaires et interagir avec eux.

L’élément <label> permet d’associer un contrôle de formulaire à une étiquette de manière explicite. L’étiquette est attachée à un contrôle de formulaire particulier à l’aide de l’attribut for. La valeur de l’attribut for doit être la même que celle de l’attribut id du contrôle de formulaire.

1<label for="firstname">First name:</label>
2<input type="text" id="firstname">
3
4<label for="password">Enter password:</label>
5<input type="password" id="password">

Le lecteur d’écran annonce une étiquette lorsque le contrôle est mis en évidence, ce qui permet aux utilisateurs handicapés de comprendre le contexte et l’objectif du contrôle. Les étiquettes sont importantes pour divers types de contrôles de formulaires, tels que les entrées de texte, les boutons radio, les cases à cocher et les listes déroulantes. Utilisez toujours des étiquettes pour ces contrôles afin de garantir une expérience utilisateur claire et accessible. Les étiquettes explicitement associées sont utilisées pour tous les éléments <input> sauf :

boutons – les boutons sont auto-étiquetés
entrées cachées – Entrées dont l’attribut de type valeur est caché, par exemple, type="hidden"
input type=“image” – l’étiquette est fournie par l’attribut alt
input type=“reset” – l’étiquette est fournie par l’attribut value
input type=“submit” – l’étiquette est fournie par l’attribut value.

attribut `title` pour identifier les contrôles de formulaires lorsqu’un élément `<label>` ne peut pas être utilisé

Utilisez l’attribut title pour fournir un nom accessible aux contrôles de formulaires lorsque la conception visuelle n’inclut pas de texte à l’écran pouvant être associé au contrôle en tant qu’étiquette. Les agents utilisateurs, y compris les technologies d’assistance, peuvent prononcer cet attribut title.

Succès

Payment card details

1<fieldset><legend>Payment card details</legend>
2<input id="cardnumber" name="cardnumber" title="Enter Card number" type="text" >
3<input id="cvc" name="cvc" title="Enter CVC code" type="text" >
4</fieldset>

Echec

Il n’y a pas d’étiquette pour le champ de saisie et l’attribut title est également absent :

1<label>Search for:</label>
2<input id="searchTerm" type="text" value="" name="searchTerm">

Texte alternatif pour les emojis, les émoticônes, l’art ASCII et le leetspeak

Les technologies d’assistance telles que les lecteurs d’écran ne pouvant interpréter directement les images, elles s’appuient sur un texte alternatif pour communiquer aux utilisateurs la signification du contenu non textuel. Si une image ASCII, un emoji ou une émoticône est utilisée, elle doit également être accompagnée d’une explication textuelle. Comme il est impossible d’utiliser un attribut alt sur <span>, <div>, etc., et que la recommandation ARIA interdit les noms accessibles pour les éléments génériques, les emoji sont définis comme des images avec la propriété ARIA role="img", ce qui permet de créer un nom accessible à l’aide de la propriété aria-label, afin de leur donner des noms accessibles.

L’attribut role="img" est utilisé pour identifier le conteneur d’une collection d’éléments qui, ensemble, forment une seule image significative. Le texte alternatif est un mot ou une phrase codé(e) de manière à ce que les technologies d’assistance puissent l’associer à un objet spécifique non textuel et transmettre la même information que l’objet non textuel.

Succès

1<abbr title="sad">:(</abbr>
2<span aria-label="sad" role="img">:(</span>
3<img alt="sad" src="./sad.png">
4
5<div role="img" aria-label="scared face">(ㆆ _ ㆆ)</div>

Echec

1<div role="img">(ㆆ _ ㆆ)</div>

Il faut toujours viser un texte alternatif clair et significatif qui transmet l’essence de l’emoji, de l’émoticône, de l’art ASCII ou du leetspeak tout en conservant le ton émotionnel ou expressif voulu.

`<figure>` et `<figcaption>`

Un élément <figure>, conçu pour contenir <img> et <figcaption>, est autonome et est généralement référencé en un seul bloc dans le flux principal du document. La <figure> peut être séparée du flux principal du document sans que sa signification en soit affectée.

La <figure> crée une association sémantique avec la <figcaption> qu’elle contient, qui peut fournir un résumé ou des informations supplémentaires sur la figure et/ou la relier au document. Cependant, la <img> a toujours besoin d’un texte alt, et pour éviter la redondance, cette information ne doit pas être transmise par la <figcaption>.

1<figure>
2    <img src="./sunset.jpg" alt="Sunset on the sea" />
3    <figcaption>Sunset on the sea</figcaption>
4</figure>

Comment vérifier le texte Alt d’une image avec Aspose.HTML for .NET

Examinons un extrait de code relatif à la vérification du texte alternatif pour les images et les étiquettes. Pour vérifier que votre page contient un texte alternatif et respecte les critères d’accessibilité, vous devez suivre les étapes suivantes :

Utilisez le constructeur WebAccessibility() pour créer une instance de la classe WebAccessibility responsable de la validation de l’accessibilité du web.
Utilisez la propriété Rules de l’objet webAccessibility qui donne accès à une collection de règles d’accessibilité du web.
Appelez la méthode CreateValidator() pour créer un objet validateur. Il s’agit essentiellement de configurer un validateur qui vérifiera le contenu web en fonction des lignes directrices spécifiques en matière d’accessibilité et des critères de réussite associés à la ligne directrice que vous avez spécifiée.
Charger un document HTML en utilisant l’un des constructeurs HTMLDocument().
Utilisez la méthode Validate(document) pour vérifier l’accessibilité du document HTML. Le résultat est stocké dans la variable validationResult.
Vérifier si la validation a réussi. Imprimer les informations détaillées sur les erreurs, y compris l’élément HTML associé.

Prenons l’exemple du fichier HTML alt-tag.html :

 1<html>
 2    <body>
 3        <img src="./resourses/login.png" alt="Login icon">
 4
 5        <label>Enter login:</label>
 6        <!--error: for input missing label with for="login" -->
 7        <input type="text" id="login">
 8
 9        <label for="password">Enter password:</label>
10        <input type="password" id="password">
11    
12        <!--error: for image alt attribute must not be empty -->
13        <img src="./resourses/sign.png" alt="">
14    </body>
15</html>

L’extrait de code C# suivant montre les étapes de base pour créer un validateur, charger un document HTML et le valider par rapport aux exigences d’accessibilité du web, à savoir les règles “1. Perceivable” et “1.1 Text Alternatives” :

 1// Validate HTML image alt text accessibility with detailed error reporting using C#
 2
 3// Prepare a path to a source HTML file
 4string documentPath = Path.Combine(DataDir, "alt-tag.html");
 5
 6// Initialize webAccessibility container
 7WebAccessibility webAccessibility = new WebAccessibility();
 8
 9// Get from the rules list Principle "1. Perceivable" by code "1" and get guideline "1.1 Text Alternatives"
10Guideline guideline = webAccessibility.Rules.GetPrinciple("1").GetGuideline("1.1");
11
12// Create an accessibility validator - pass the found guideline as parameters and specify the full validation settings
13AccessibilityValidator validator = webAccessibility.CreateValidator(guideline, ValidationBuilder.All);
14
15// Initialize an HTMLDocument object
16using (HTMLDocument document = new HTMLDocument(documentPath))
17{
18    ValidationResult validationResult = validator.Validate(document);
19    if (!validationResult.Success)
20    {
21        // Get all the result details 
22        foreach (RuleValidationResult ruleResult in validationResult.Details)
23        {
24            // If the result of the rule is unsuccessful
25            if (!ruleResult.Success)
26            {
27                // Get an errors list 
28                foreach (ITechniqueResult result in ruleResult.Errors)
29                {
30                    // Check the type of the erroneous element, in this case, we have an error in the HTML Element
31                    if (result.Error.Target.TargetType == TargetTypes.HTMLElement)
32                    {
33                        HTMLElement rule = (HTMLElement)result.Error.Target.Item;
34                        Console.WriteLine("Error in rule {0} : {1}", result.Rule.Code, result.Error.ErrorMessage);
35                        Console.WriteLine("HTML Element: {0}", rule.OuterHTML);
36                    }
37                }
38            }
39        }
40    }
41}

Example-CheckHtmlImageAltTextAccessibility.cs hosted with ❤ by GitHub

Le résultat de la vérification du fichier sera une liste de résultats contenant une erreur de type IError. Le programme affichera une sortie sur la console :

1    Error in rule H37 : Img element missing an alt attribute. The value of this attribute is referred to as "alt text".
2    HTML Element: <img src="./resourses/sign.png" alt="">
3    Error in rule H44 : Check that the label element contains for attribute.
4    HTML Element: <label>Enter login:</label>
5    Error in rule H65 : Check that the title attribute identifies the purpose of the control and that it matches the apparent visual purpose.
6    HTML Element: <input type="text" id="login">
7    Error in rule F65 : Absence of an alt attribute or text alternative on img elements, area elements, and input elements of type "image".
8    HTML Element: <img src="./resourses/sign.png" alt="">

Références

Voir aussi

Dans le chapitre Vérification de l’accessibilité du Web, vous apprendrez à vérifier l’accessibilité d’un site Web pour qu’il soit conforme aux WCAG ou qu’il réponde uniquement à des critères spécifiques en utilisant les classes et les méthodes des espaces de noms Aspose.Html.Accessibility et Aspose.Html.Accessibility.Results.
Consultez l’article Vérifier le contraste des couleurs en C# si vous souhaitez apprendre à ajuster correctement le contraste de votre contenu web conformément aux normes WCAG, l’autorité mondiale en matière d’accessibilité du web. Vous découvrirez comment tester l’accessibilité du contraste des couleurs à l’aide de C# et rendre votre contenu web facile à lire pour tous les utilisateurs.
Consultez l’article sur l’ Accessibilité multimédia, si vous souhaitez apprendre comment rendre le contenu multimédia inclusif et accessible à un public plus large, y compris aux personnes handicapées. Cet article contient des exemples en C# permettant de vérifier les meilleures pratiques en matière d’accessibilité multimédia conformément aux normes WCAG.
Dans l’article Accessibility Validator, vous découvrirez la classe AccessibilityValidator qui peut être utilisée pour tester les règles d’accessibilité du web telles que les principes, les lignes directrices et les critères.
L’article Erreurs et avertissements traite des classes et des interfaces qui permettent de collecter des informations sur les erreurs et les avertissements lors des tests d’accessibilité des sites web. Il se concentre sur les critères d’échec et les méthodes qui signalent les erreurs, et fournit un exemple en C# pour récupérer les erreurs d’accessibilité du web après avoir testé un document HTML.

Aspose.HTML propose gratuitement en ligne Vérificateur d’accessibilité Web. Cet outil analyse les pages web, valide leur conformité aux WCAG, identifie les problèmes et suggère des améliorations. Il vous permet de déterminer l’ampleur des corrections nécessaires et l’écart entre l’état actuel de votre site web ou de votre document HTML et les exigences des WCAG.

Comment améliorer l'accessibilité des sites web Contraste des couleurs Accessibilité