Procédure pas à pas : création d'une application Web accessible

Article
08/21/2008

Mise à jour : novembre 2007

En créant des pages Web accessibles, vous pourrez toucher une clientèle beaucoup plus nombreuse. Les personnes atteintes de handicaps ne sont pas les seules personnes susceptibles d'apprécier ces pages. Les utilisateurs de navigateurs en texte seul ou les utilisateurs de logiciels qui interprètent le contenu des pages Web peuvent également compter sur les options d'accessibilité. L'accessibilité permet en effet aux outils d'automation, tels que les moteurs de recherche, de rechercher, d'indexer et de manipuler les informations contenues dans vos pages. Enfin, les futures lois de télécommunications peuvent exiger que les informations fournies via Internet soient accessibles, tout comme les logiciels traditionnels. Pour plus d'informations, consultez Prise en charge de l'accessibilité dans ASP.NET et Contrôles et accessibilité ASP.NET.

Pour vous aider à créer des pages Web accessibles, le site Microsoft Accessibility donne les conseils suivants :

Fournissez un texte alternatif (ALT) pertinent pour tous les graphismes.
Utilisez correctement les images interactives.
Fournissez un texte de lien utile.
Concevez une navigation efficace à l'aide du clavier.
Proposez des pages de remplacement n'utilisant pas de cadres.
Utilisez correctement les tableaux et leurs solutions de remplacement.
Prenez en charge les options de mise en forme du lecteur de texte.
N'imposez pas l'utilisation de feuilles de style.
Utilisez des formats de fichier exploitables par le lecteur.
Éviter les textes défilants.
Fournissez des titres pour la plupart des objets.

Si vous ne pouvez pas répondre à ces critères d'accessibilité, une autre solution peut consister à fournir en remplacement des pages Web en texte seul.

Les contrôles ASP.NET prennent en charge de nombreuses règles d'accessibilité. Cela inclut la révélation du focus clavier et des éléments d'écran. Les propriétés des contrôles ASP.NET peuvent être utilisées pour prendre en charge d'autres règles d'accessibilité, comme le montre le tableau suivant.

Propriété du contrôle	Considérations sur l'accessibilité
TabIndex	Utilisez-la pour créer un chemin de navigation cohérent dans le formulaire. Dans le cas des contrôles sans étiquette intrinsèque (zones de texte, par exemple), il est important que l'étiquette qui leur est associée précède immédiatement le contrôle dans l'ordre de tabulation. Dans les cas où ce n'est pas possible ou souhaitable, utilisez la propriété AssociatedControlID d'un contrôle Label pour l'associer à une zone de texte.
Text	Utilisez l'élément u HTML pour afficher le raccourci clavier d'un contrôle. L'accès clavier documenté à toutes les fonctionnalités ainsi qu'à la documentation correspondante est assuré en partie par les touches d'accès rapide. (Utilisez la propriété AccessKey pour activer le raccourci clavier d'un contrôle.)
Font Size	Utilisez des balises de titre plutôt que des tailles spécifiques.
AlternateText	Fournissez un texte de remplacement pour toutes les images qui sont significatives pour la compréhension du contenu de la page Web. Dans certaines instances, ne pas définir le texte de remplacement d'une image est approprié, comme dans le cas d'images utilisées pour la mise en forme graphique. Pour restituer la propriété AlternateText d'une image comme un espace vide, affectez true à la propriété GenerateEmptyAlternateText pour le contrôle Image.
AccessKey	Utilisez-la pour fournir un accès aux contrôles à partir du clavier.

Composants requis

Pour effectuer cette procédure pas à pas, vous aurez besoin des éléments suivants :

Outil de développement Web Microsoft Visual Web Developer.
.NET Framework

Création d'un site et d'une page Web

Dans cette procédure, vous allez créer le site Web d'un cours d'algèbre. L'interface utilisateur utilise les contrôles suivants :

Contrôle Image pour le logo du cours.
Contrôle Panel avec les contrôles HyperLink pour les leçons.
Contrôle GridView qui affiche un tableau qui contient le programme du cours.
Contrôle HyperLink qui lie à une page de description du manuel du cours.

L'objectif de cette procédure pas à pas est d'illustrer l'accessibilité de l'interface utilisateur et de montrer comment utiliser les contrôles serveur Web pour prendre en charge l'accessibilité. Elle illustre les fonctionnalités d'accessibilité de plusieurs contrôles fréquemment utilisés, y compris les contrôles HyperLink, GridView, Image et Label. Les contrôles HyperLink renvoient tous à la même page Web, mais celle-ci est vide.

Dans la procédure suivante, vous allez créer le site Web de système de fichiers et ajouter une page nommée Lecture.aspx.

Pour créer un site Web de système de fichiers

Ouvrez Visual Web Developer.
Dans le menu Fichier, cliquez sur Nouveau site Web.

La boîte de dialogue Nouveau site Web s'affiche.
Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.
Dans la zone Emplacement, entrez le nom du dossier dans lequel vous souhaitez conserver les pages du site Web.

Par exemple, tapez le nom du dossier C:\SitesWeb.
Dans la liste Langage, cliquez sur le langage de programmation que vous préférez utiliser.
Cliquez sur OK.

Visual Web Developer crée le dossier et une page nommée Default.aspx.
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du site Web, puis cliquez sur Ajouter Nouvel élément.
Sous Modèles Visual Studio installés, cliquez sur Formulaire Web.
Dans la zone Nom, tapez Lecture.aspx, puis cliquez sur OK.

Création des données à afficher

La page que vous créez affiche des informations sur les leçons d'un cours d'algèbre. Pour cette procédure pas à pas, les données de la classe sont stockées dans un fichier XML.

Pour créer un fichier de données XML

Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le dossier App_Data, puis cliquez sur Ajouter un nouvel élément.

Remarque :

Assurez-vous d'ajouter le fichier XML au dossier App_Data.
Dans la boîte de dialogue Ajouter un nouvel élément, sous Modèles Visual Studio installés, cliquez sur Fichier XML.
Dans la zone Nom, tapez Syllabus.
Cliquez sur Ajouter.

Remarque :
Assurez-vous d'ajouter le fichier XML au dossier App_Data.

Copiez le XML suivant dans le fichier, en remplaçant le contenu par défaut.

<?xml version="1.0" encoding="utf-8" ?>
<entries>
    <lecture 
       date="04/02/2005" 
       topic="Integers and Rational Numbers" />
    <lecture 
        date="04/03/2005"
        topic="Equations and Polynomials" />
    <lecture
        date="04/04/2005"
        topic="Roots and Irrational Numbers" />
</entries>

Enregistrez le fichier XML et fermez-le.

Ajout de contrôles au formulaire

Lorsque vous ajoutez des contrôles à un formulaire pour cette application, tenez compte des règles d'accessibilité suivantes pour rendre une application accessible :

Chaque image qui fournit des informations utilisateur doit avoir un texte de remplacement descriptif.
Lorsque vous utilisez des tableaux, utilisez l'attribut Title pour attribuer des noms à leurs colonnes et à leurs lignes. Vérifiez également que les tableaux sont lisibles de gauche à droite et de haut en bas.
Utilisez les vraies balises de titre au lieu du texte mis en forme, pour prendre en charge les options de mise en forme sélectionnées par l'utilisateur.
Fournissez un texte de lien utile. Par exemple, si le texte est « Click here for Lecture 1 notes », « Lecture 1 notes » constituera un lien plus pertinent que « Click here ».
Fournissez un chemin de navigation cohérent dans la page en suivant le sens normal du texte pour la langue concernée.
Utilisez l'attribut Title pour la plupart des objets.

Pour ajouter des contrôles accessibles à votre page

Basculez en mode Design.
Dans Propriétés, définissez les propriétés suivantes pour DOCUMENT :
- Affectez "Algebra Class" à Title
- Affectez Background à BgColor.
En haut de la page, tapez Algebra Review Class.
Mettez en surbrillance le texte à mettre en forme pour le sélectionner, puis sur la barre d'outils Format, dans la liste la plus à gauche, cliquez sur Heading 1.

À partir de la Boîte à outils, dans le groupe Standard, ajoutez les contrôles suivants et définissez les propriétés comme indiqué.

Remarque :
La disposition de la page n'est pas importante.

Contrôle	Propriété	Valeur
Image	AlternateText	Équations algébriques.
	ImageUrl	URL d'une image.
	TabIndex	0
Panel	ID	Lectures
	TabIndex	0
HyperLink (ajoutez au volet Lectures)	ID	Lecture1
	Text	Lecture 1 notes
	AccessKey	1
	href	~/Lecture.aspx
	TabIndex	1
HyperLink (ajoutez au volet Lectures)	ID	Lecture2
	Text	Lecture 2 notes
	AccessKey	2
	href	~/Lecture.aspx
	TabIndex	2
HyperLink (ajoutez au volet Lectures)	ID	Lecture3
	Text	Lecture 3 notes
	AccessKey	3
	href	~/Lecture.aspx
	TabIndex	3
Label	ID	TextbookLabel
	Text	Textbook:
	AssociatedControlID	TextbookLink
Hyperlink	ID	TextbookLink
	Text	Algebra Review, J. A. Smith
	href	~/Lecture.aspx
	TabIndex	4

Cliquez sur le contrôle Panel, puis affectez Lecture Notes à la propriété GroupingText.
Basculez en mode Source.
Cliquez à l'intérieur de l'élément HTML, puis dans Propriétés, affectez en à lang pour indiquer que la langue de la page est l'anglais.

La balise doit se présenter de la façon suivante :
```
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
```

Ajout d'un contrôle GridView

Les informations sur les leçons sont stockées dans un contrôle GridView. Le contrôle GridView récupère des données du fichier XML que vous avez créé dans la section précédente.

Pour ajouter un contrôle GridView et le lier au fichier XML

Basculez en mode Design.
À partir du groupe Données de la Boîte à outils, faites glisser un contrôle XmlDataSource sur la page.

Le positionnement n'est pas important.

Le contrôle XmlDataSource lit un fichier XML et rend les données disponibles aux contrôles de la page.
Cliquez avec le bouton droit sur XmlDataSource, cliquez sur Afficher la balise active, puis dans le menu Tâches XmlDataSource, cliquez sur Configurer la source de données.

La boîte de dialogue Configurer la source de données s'affiche.
Dans la zone Fichier de données, tapez ~/App_Data/Syllabus.xml, puis cliquez sur OK.
À partir du groupe Données de la Boîte à outils, ajoutez un contrôle GridView à la page.
Dans Propriétés, définissez les propriétés comme le montre le tableau suivant.

Propriété

Paramètre

ID

SyllabusGrid

DataSourceId

XmlDataSource1

TabIndex

9

Propriété	Paramètre
ID	SyllabusGrid
DataSourceId	XmlDataSource1
TabIndex	9

Ajout de titres aux cellules du contrôle GridView

Une condition requise pour l'accessibilité est que les colonnes et les cellules de tableaux HTML aient des titres. Le contrôle GridView restitue un tableau HTML au moment de l'exécution. Par conséquent, vous devez vous assurer que les colonnes qui sont restituées par le contrôle comportent des titres. Pour effectuer cette tâche, vous écrirez le code qui gère l'événement RowCreated. Dans le gestionnaire d'événements, vous ajouterez des attributs Title aux cellules de tableau qui sont créées par le contrôle GridView.

Pour ajouter des titres aux colonnes du contrôle GridView

Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom de la page (Default.aspx) puis cliquez sur Afficher le code.

Ajoutez le code ci-dessous.

Protected Sub SyllabusGrid_RowCreated _
        (ByVal sender As Object, _
        ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) _
        Handles SyllabusGrid.RowCreated
        Dim cells As TableCellCollection = e.Row.Cells
        If e.Row.RowType = DataControlRowType.Header Then
            cells(0).Attributes("title") = "Date"
            cells(1).Attributes("title") = "Topic"
        ElseIf e.Row.RowType = DataControlRowType.DataRow Then
            cells(0).Attributes("title") = _
                DataBinder.Eval(e.Row.DataItem, "date").ToString()
            cells(1).Attributes("title") = _
                DataBinder.Eval(e.Row.DataItem, "topic").ToString()
        End If
    End Sub

protected void SyllabusGrid_RowCreated
        (object sender, 
        System.Web.UI.WebControls.GridViewRowEventArgs e)
    {
        TableCellCollection cells = e.Row.Cells;
        if (e.Row.RowType == DataControlRowType.Header)
        {
            cells[0].Attributes["title"] = "Date";
            cells[1].Attributes["title"] = "Topic";
        }
        else if (e.Row.RowType == DataControlRowType.DataRow)
        {
            cells[0].Attributes["title"] = 
                DataBinder.Eval(e.Row.DataItem, "date").ToString();
            cells[1].Attributes["title"] = 
                DataBinder.Eval(e.Row.DataItem, "topic").ToString();
        }
    }

En mode Design, cliquez sur le contrôle GridView, puis dans la fenêtreProperties, définissez l'événement RowCreated sur "SyllabusGrid_RowCreated".

Cela connecte l'événement au gestionnaire d'événements.

Test de l'application

Visual Web Developer inclut la validation d'accessibilité, un outil qui vérifie la page Web et détermine si celle-ci satisfait les règles d'accessibilité. L'outil examine le HTML dans la page au moment du design. Vous pouvez également examiner la sortie de la page, ce qui permet de vérifier que le balisage restitué par les contrôles ASP.NET satisfait les règles d'accessibilité.

Pour tester l'accessibilité de l'application

Assurez-vous que la page est en mode Design.
Dans le menu Outils, cliquez sur Vérification de l'accessibilité.

La boîte de dialogue Validation de l'accessibilité s'affiche.

Remarque :

L'outil de vérification de l'accessibilité n'est pas disponible dans Microsoft Visual Web Developer Express.
Activez les cases à cocher des normes d'accessibilité auxquelles vous souhaitez vous conformer, puis cliquez sur Valider.

Visual Web Developer examine la page, puis affiche un rapport concernant les erreurs de validation, si approprié. Notez que le rapport de validation de l'accessibilité ne peut pas déterminer si le tableau qui sera restitué par le contrôle GridView satisfait les règles d'accessibilité.
Appuyez sur CTRL+F5 pour exécuter la page.
Testez les touches d'accès rapide.

Dans cette application, vous avez défini les touches d'accès rapide ALT+1, ALT+2 et ALT+3 (ALT+MAJ+1, ALT+MAJ+2 et ALT+MAJ+3 sur les claviers azerty) pour les contrôles HyperLink. Les touches d'accès rapide atteignent les liens. Appuyez sur ENTRÉE pour activer les liens.
Désactivez les graphismes pour vérifier que le texte de remplacement rend la page utilisable. Pour cela :
1. Dans Microsoft Internet Explorer 6.0, dans le menu Outils, cliquez sur Options Internet.
2. Sous l'onglet Avancé, sous Multimédia, désactivez les options relatives aux graphismes.
Vous devez mettre à jour la page afin de voir le texte de remplacement.
Désactivez le son pour vérifier qu'aucune instruction importante n'est perdue. Pour cela :
1. Dans Internet Explorer 6.0, dans le menu Outils, cliquez sur Options Internet.
2. Sous l'onglet Avancé, sous Multimédia, désactivez les options relatives au son.
Affichez l'application dans un navigateur qui vous permet de désactiver les feuilles de style, puis désactivez les feuilles de style pour vous assurer que la page est encore lisible.
1. Dans Internet Explorer 6.0, dans le menu Outils, cliquez sur Options Internet.
2. Sous l'onglet Général, cliquez sur Accessibilité pour définir les options de feuille de style.
Utilisez l'option Contraste élevé de Microsoft Windows et vérifiez que la page est toujours lisible. Pour tester l'option Contraste élevé :
1. Dans Windows, cliquez sur Démarrer, pointez sur Panneau de configuration, puis cliquez sur Options d'accessibilité.
2. Cliquez sur l'onglet Affichage et activez la case à cocher Utiliser le contraste élevé.
3. Parcourez tous les éléments de l'interface utilisateur pour vérifier que les modifications de couleur et de police ont bien été prises en compte. Vérifiez également que les images et les motifs placés en arrière-plan du texte sont bien omis.
Utilisez la plus grande taille de police prise en charge (disponible uniquement lorsque Contraste élevé est activé) pour faire en sorte que que la page soit toujours lisible. Pour cela :
1. Dans Windows, cliquez sur Démarrer, pointez sur Panneau de configuration, puis cliquez sur Affichage.
2. Sous l'onglet Apparence, dans la liste Taille de police, cliquez sur Extra Large.
Redimensionnez la fenêtre du navigateur et vérifiez la lisibilité.
Utilisez le clavier pour parcourir la page Web pour vérifier que l'ordre de navigation est cohérent, que la touche TAB passe par tous les liens et que la combinaison de touches CTRL+TAB entraîne bien un déplacement entre les volets ou les sections.
Sélectionnez tout le texte et copiez-le dans le Presse-papiers pour vérifier qu'il est cohérent.

Remarque :
L'outil de vérification de l'accessibilité n'est pas disponible dans Microsoft Visual Web Developer Express.

Voir aussi

Concepts

Prise en charge de l'accessibilité dans ASP.NET

Contrôles et accessibilité ASP.NET

Vue d'ensemble des menaces de sécurité des applications Web

Autres ressources

Web Content Accessibility Guidelines 1.0 (W3C)

Partager via