Exporter (0) Imprimer
Développer tout
Cet article a fait l'objet d'une traduction manuelle. Déplacez votre pointeur sur les phrases de l'article pour voir la version originale de ce texte.
Traduction
Source

Procédure pas à pas : directives d'accessibilité pour l'utilisation du contrôle ListView

.NET Framework 4

Cette procédure pas à pas montre comment utiliser le contrôle ListView ASP.NET de manière à rendre une page Web accessible aux personnes qui utilisent un logiciel de lecteur d'écran. Ces techniques peuvent vous aider à respecter les directives WCAG (Web Content Accessibility Guidelines) 2.0 suivantes :

  • Séparation de la structure de la présentation (instruction WCAG 1.3).

Pour plus d'informations sur l'accessibilité et WCAG 2.0, consultez Accessibilité dans Visual Studio et ASP.NET.

Pour suivre cette procédure pas à pas, les composants suivants doivent être installés :

Cette procédure pas à pas est la troisième d'une série de procédures qui présentent les techniques qui peuvent permettre de rendre un site Web ASP.NET conforme aux directives d'accessibilité WCAG 2.0. Cette série de procédures pas à pas crée une application Web que vous pouvez utiliser pour afficher les paramètres de configuration ASP.NET. Si vous souhaitez exécuter toutes les procédures pas à pas, commencez par Procédure pas à pas : directives d'accessibilité pour l'utilisation de contrôles Image, Menu et AutoPostBack. Si vous ne voulez pas effectuer d'autres procédures pas à pas dans la série, suivez les autres instructions qui sont fournies pour certaines des étapes. Les mêmes fonctionnalités d'accessibilité sont illustrées lorsque vous choisissez d'effectuer la procédure pas à pas dans le cadre de la série ou de façon indépendante.

La page Web que vous créez dans cette procédure pas à pas affiche les éléments d'une section du fichier de configuration machine.config. Vous pouvez spécifier la section dans un paramètre de requête. Pour plus d'informations sur les fichiers de configuration ainsi que les groupes de sections, sections et éléments qu'ils contiennent, consultez Fichiers de configuration ASP.NET. Toutefois, il n'est pas nécessaire de se familiariser avec le système de fichiers de configuration ASP.NET pour utiliser ces procédures pas à pas comme illustrations de la création de pages Web qui respectent les directives d'accessibilité.

Note de sécuritéNote de sécurité

Les informations de configuration affichées par l'application que vous créez dans ces procédures pas à pas sont utiles pour les développeurs, mais vous ne devez pas les afficher sur un site Web de production pour des raisons de sécurité. Les paramètres de configuration peuvent inclure des informations sensibles qui ne doivent s'afficher que pour les utilisateurs autorisés.

Un projet de site Web Visual Studio contenant du code source est disponible pour accompagner cette rubrique : Télécharger.

Les données à afficher dans le contrôle ListView que vous utilisez dans cette procédure pas à pas proviennent du système de configuration ASP.NET. Dans la procédure qui suit, vous allez créer une classe qui extrait un objet Configuration spécifié, sélectionne une section dans cet objet et retourne la liste des éléments contenus dans la section.

RemarqueRemarque

Cette section de la procédure pas à pas n'illustre pas les fonctionnalités d'accessibilité spécifiquement. Elle indique simplement les données que vous pouvez utiliser dans le contrôle GridView.

Pour créer une classe qui retourne une liste de sections de configuration

  1. Si le site Web ne possède pas de dossier App_Code, dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du projet, cliquez sur Ajouter le dossier ASP.NET, puis sur App_Code.

  2. Cliquez avec le bouton droit sur App_Code, puis cliquez sur Ajouter un nouvel élément.

  3. Sous Modèles installés, cliquez sur Visual Basic ou Visual C#, puis sur Classe.

  4. Dans la zone de texte Nom, entrez SectionDataSource.vb ou SectionDataSource.cs, puis cliquez sur OK.

  5. Supprimez tout le code dans le nouveau fichier de classe.

  6. À sa place, insérez le code suivant :

    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Configuration;
    using System.Configuration;
    using System.ComponentModel;
    using System.Collections;
    using System.Reflection;
    
    /// <summary>
    /// Retrieves a list of elements in a section. 
    /// </summary>
    public class SectionDataSource
    {
        public SectionDataSource()
        {
        }
        public List<ElementInfo> GetProperties(
            string sectionName,
            string virtualPath,
            string site,
            string locationSubPath,
            string server)
        {
            List<ElementInfo> sectionList = new List<ElementInfo>();
    
            Configuration config =
                WebConfigurationManager.OpenWebConfiguration(
                    virtualPath, site, locationSubPath, server);
    
            ConfigurationSection cs = config.GetSection(sectionName);
            Type sectionType = cs.GetType();
            PropertyInfo[] sectionProperties = sectionType.GetProperties();
    
            foreach (PropertyInfo rpi in sectionProperties)
            {
                if (rpi.Name != "SectionInformation" &&
                    rpi.Name != "LockAttributes" &&
                    rpi.Name != "LockAllAttributesExcept" &&
                    rpi.Name != "LockElements" &&
                    rpi.Name != "LockAllElementsExcept" &&
                    rpi.Name != "LockItem" &&
                    rpi.Name != "ElementInformation" &&
                    rpi.Name != "CurrentConfiguration")
                {
                    ElementInfo ei = new ElementInfo();
                    ei.Name = rpi.Name;
                    ei.TypeName = rpi.PropertyType.ToString();
    
                    if (rpi.PropertyType.BaseType == 
                        typeof(ConfigurationElement))
                    {
                        ei.NameUrl = "Element.aspx?Section=" + 
                            sectionName + "&Element=" + rpi.Name;
                        ei.Value = "Element";
                    }
                    else if (rpi.PropertyType.BaseType == 
                        typeof(ConfigurationElementCollection))
                    {
                        ei.NameUrl = "Element.aspx?Section=" + 
                            sectionName + "&Element=" + rpi.Name;
                        ei.Value = "Element Collection";
                    }
                    else
                    {
                        ParameterInfo[] indexParms = rpi.GetIndexParameters();
                        if (rpi.PropertyType == typeof(IList) || 
                            rpi.PropertyType == typeof(ICollection) || 
                            indexParms.Length > 0)
                        {
                            ei.Value = "Collection";
                        }
                        else
                        {
                            object propertyValue = rpi.GetValue(cs, null);
                            ei.Value = propertyValue == null ? "" : 
                                propertyValue.ToString();
                        }
                    }
                    sectionList.Add(ei);
                }
            }
            return sectionList;
        }
    }
    
    public class ElementInfo
    {
        public string Name { get; set; }
        public string ItemName { get; set; }
        public string SectionName { get; set; }
        public string NameUrl { get; set; }
        public string TypeName { get; set; }
        public string TypeNameUrl
        {
            get
            {
                return "http://msdn.microsoft.com/en-us/library/" + 
                    TypeName + ".aspx";
            }
        }
        public string Value { get; set; }
        public int Index { get; set; }
    }
    
    
    

    La classe SectionDataSource contient une méthode GetProperties acceptant les paramètres qui spécifient l'objet Configuration à extraire et la section à sélectionner. La méthode retourne une collection d'objets ElementInfo. La classe ElementInfo est définie immédiatement après la classe SectionDataSource.

    RemarqueRemarque

    L'application Configuration Browser utilisée dans ces procédures pas à pas comprend du code de source de données redondant qui pourrait avoir été refactorisé dans des méthodes et classes communes. Toutefois, le code a été dupliqué pour garantir que chaque procédure pas à pas peut être effectuée séparément. Cette approche réduit également le nombre des étapes dans des parties de la procédure pas à pas qui ne concernent pas directement l'accessibilité.

De cette section, vous allez créer une page Web qui utilise un contrôle ObjectDataSource pour fournir des données à un contrôle ListView. Le contrôle ObjectDataSource appelle la méthode GetProperties de l'objet SectionDataSource que vous avez créé dans la procédure précédente.

RemarqueRemarque

Que vous utilisiez ObjectDataSource ou une autre méthode pour extraire des données (par exemple, une requête de base de données utilisant le contrôle SqlDataSource ou le contrôle LinqDataSource ), les méthodes de configuration du contrôle ListView sont les mêmes.

Le contrôle ListView crée un élément table HTML qui possède une ligne pour chaque élément. La première colonne de chaque ligne contient le nom de l'élément et la deuxième colonne contient le nom de la classe utilisée pour stocker les paramètres de cet élément.

Pour faciliter l'accès à la table aux personnes qui utilisent un logiciel de lecteur d'écran, vous allez configurer le contrôle ListView de manière à inclure les fonctionnalités suivantes dans la table HTML qu'il génère :

  • Un élément caption décrit le but de la table dans un court en-tête.

  • Un élément summary fournit une plus longue description du but de la table.

  • Les éléments thead et tbody différencient les sections d'en-tête et de corps du tableau.

  • Les éléments th qui possèdent des attributs scope="col" identifient les cellules d'en-tête de colonne.

  • Les éléments td qui possèdent des attributs scope="row" identifient des cellules d'en-tête de ligne.

Dans la procédure suivante, vous allez créer une page Web et ajouter un balisage qui affiche la liste des éléments dans un contrôle ListView.

Pour créer une page Web qui affiche une liste de sections de configuration

  1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du projet, puis cliquez sur Ajouter un nouvel élément.

    La boîte de dialogue Ajouter un nouvel élément s'affiche alors.

  2. Sous Modèles installés, cliquez sur Visual Basic ou sur Visual C#, puis sur Web Form.

  3. Dans la zone de texte Nom, tapez Section.aspx.

  4. Assurez-vous que la case à cocher Placer le code dans un fichier distinct est activée.

  5. Si vous ajoutez cette page à l'application Configuration System Browser, assurez-vous que la case à cocher Sélectionner la page maître est activée. (Si vous n'ajoutez pas cette page au site Web que vous créez dans Procédure pas à pas : directives d'accessibilité pour l'utilisation de contrôles Image, Menu et AutoPostBack, il est possible qu'il n'y ait pas de page maître.)

  6. Dans la boîte de dialogue Ajouter un nouvel élément, cliquez sur OK.

  7. Si la boîte de dialogue Sélectionner une page maître s'affiche, cliquez sur OK. Il existe une seule page maître et elle sera déjà sélectionnée.

  8. Dans la directive @ Page, définissez la propriété Title sur Configuration System Browser - Elements in a Section, comme indiqué dans l'exemple suivant :

    
    <%@ Page  Language="C#" AutoEventWireup="true" 
        Title="Configuration System Browser - Elements in a Section"
        CodeFile="Section.aspx.cs"  MasterPageFile="~/Site.master" 
        Inherits="Section" %>
    
    
    

    Ce titre identifie le site et la page du site. La définition du titre de la page est requise par les directives d'accessibilité.

  9. Dans l'élément Content du contrôle MainContentContentPlaceHolder, insérez le balisage suivant :

    
    <h2>
        <asp:Label ID="HeadingLabel" runat="server" 
            Text="Elements in Section [name]">
        </asp:Label>
    </h2> 
    
    
    

    (Si vous créez une page Web qui ne fait pas partie de l'application Configuration System Browser, insérez le balisage entre les balises <div> et </div>.)

    Ce balisage ajoute un en-tête à un contrôle Label afin que l'en-tête puisse être modifié par programmation. Le gestionnaire d'événements PreRender du contrôle ListView externe remplacera la chaîne « [name] » dans l'en-tête par le nom réel de la section affichée par la page.

  10. Sous le balisage que vous avez inséré à l'étape précédente, insérez le balisage suivant :

    
    <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" 
        SelectMethod="GetProperties" TypeName="SectionDataSource">
        <SelectParameters>
            <asp:QueryStringParameter Name="sectionName" 
                QueryStringField="Section" Type="String" 
                DefaultValue="system.web/httpHandlers" />
            <asp:SessionParameter Name="virtualPath" 
                SessionField="Path" Type="String" 
                DefaultValue="" />
            <asp:SessionParameter Name="site" 
                SessionField="Site" Type="String" 
                DefaultValue="" />
            <asp:SessionParameter Name="locationSubPath" 
                SessionField="SubPath" Type="String" 
                DefaultValue="" />
            <asp:SessionParameter Name="server" 
                SessionField="Server" Type="String" 
                DefaultValue="" />
        </SelectParameters>
    </asp:ObjectDataSource>
    
    
    

    Ce balisage crée un contrôle ObjectDataSource qui appelle la méthode GetProperties de l'objet SectionDataSource. Les paramètres passés à la méthode GetProperties spécifient le nom de la section et l'objet Configuration spécifique duquel récupérer la section.

    Le nom de la section est extrait d'un champ de chaîne de requête nommé la « Section ». S'il n'existe aucune chaîne de requête, la section par défaut est system.web/httpHandlers. Les valeurs des quatre autres paramètres sont récupérées de l'état de session. Les valeurs sont placées dans l'état de session par une autre page de l'application Configuration System Browser. Par conséquent, seules les valeurs par défaut seront utilisées si vous créez cette procédure pas à pas sous forme de page Web indépendante.

  11. Sous le contrôle ObjectDataSource, insérez le balisage suivant :

    
    <div class="dataTable">
        <asp:ListView ID="ListView1" runat="server" 
            DataSourceID="ObjectDataSource1" 
            onprerender="ListView1_PreRender" >
    
    
    

    Ce balisage crée un contrôle ListView dans un élément div (vous ajouterez ultérieurement les balises de fermeture pour ces éléments). Le balisage enregistre un gestionnaire pour l'événement PreRender du contrôle afin que l'objet EmptyDataTemplate et l'élément caption de la table HTML puissent être personnalisés à l'aide du nom de la section de configuration sélectionnée.

  12. Sous le balisage que vous avez inséré à l'étape précédente, insérez le balisage suivant :

    
    <LayoutTemplate>
        <table class="listViewTable" width="100%"
            cellpadding="5" rules="all" border="1" 
            summary="This table shows elements that are 
                contained in the specified section.">
            <caption runat="server" ID="ElementTableCaption">
                Elements in the system.web/httpHandlers Section
            </caption>
            <thead>
                <tr style="">
                    <th scope="col">Name</th>
                    <th scope="col">Type</th>
                    <th scope="col">Value</th>
                </tr>
            </thead>
            <tbody>
                <tr id="itemPlaceholder" runat="server"></tr>
            </tbody>
        </table>
    </LayoutTemplate>
    
    
    

    Ce balisage crée un objet LayoutTemplate pour le contrôle ListView. L'objet LayoutTemplate spécifie que le contrôle générera une table HTML avec les fonctionnalités d'accessibilité suivantes :

    • L'élément caption est une description courte du contenu de la table.

    • L'attribut summary est une description plus longue du contenu de la table.

    • Les éléments thead et tbody différencient les sections d'en-tête et de corps du tableau.

    • Les éléments th possèdent des attributs scope="col" qui identifient les cellules d'en-tête de colonne.

  13. Sous le balisage que vous avez inséré à l'étape précédente, insérez le balisage suivant :

    
    <ItemTemplate>
        <tr>
            <td scope="row" class="rowHeading">
                <asp:HyperLink ID="HyperLink1" runat="server" 
                    Text='<%# Eval("Name") %>' 
                    NavigateUrl='<%# Eval("NameUrl") %>'>
                </asp:HyperLink>
            </td>
            <td>
                <asp:HyperLink ID="HyperLink2" runat="server" 
                    Text='<%# Eval("TypeName") %>' 
                    NavigateUrl='<%# Eval("TypeNameUrl") %>'>
                </asp:HyperLink>
            </td>
            <td>
                <asp:Label ID="Label1" runat="server" 
                    Text='<%# Eval("Value") %>' >
                </asp:Label>
            </td>
        </tr>
    </ItemTemplate>
    
    
    

    Ce balisage crée un objet ItemTemplate pour le contrôle ListView. L'objet ItemTemplate spécifie que chaque ligne de données générera un élément tr. Pour faciliter l'accessibilité, les cellules de la première colonne sont générées à l'aide d'attributs scope="row" parce que cette première colonne contient le nom de l'élément et fonctionne comme un en-tête de ligne.

  14. Sous le balisage que vous avez inséré à l'étape précédente, insérez le balisage suivant :

    
            <EmptyDataTemplate>
                <asp:Label ID="NoElementsLabel" runat="server" 
                    Text="The [name] section 
                        does not contain any elements.">
                </asp:Label>
            </EmptyDataTemplate>
        </asp:ListView>
    </div>
    
    
    

    Ce balisage crée un objet EmptyDataTemplate pour le contrôle ListView et fournit les balises de fermeture pour le contrôle ListView et l'élément div dans lesquels il se trouve. L'objet EmptyDataTemplate fournit un message personnalisé au cas où la section de configuration sélectionnée ne contiendrait pas d'éléments.

Mise à jour de la légende de la table et de l'objet EmptyDataTemplate

Dans la procédure suivante, vous allez ajouter du code qui place le nom de la

section de configuration sélectionnée dans l'élément caption de la table HTML. Vous allez également définir ce qui se produit si aucune donnée n'est retournée.

Pour mettre à jour la légende et l'objet EmptyDataTemplate

  1. Ouvrez le fichier SectionGroup.aspx.vb ou SectionGroup.aspx.cs.

  2. À la fin des instructions using (Imports en Visual Basic), ajoutez le code suivant :

    
    using System.Web.UI.HtmlControls;
    
    
    

    Cette instruction using ou Imports est nécessaire pour une classe que vous allez référencer dans les étapes suivantes.

  3. Sous la méthode Page_Load, ajoutez le code suivant :

    
    protected void ListView1_PreRender(object sender, EventArgs e)
    {
        string s = ObjectDataSource1.SelectParameters["sectionName"].DefaultValue.ToString();
        if (Request.QueryString["Section"] != null)
        {
            s = Request.QueryString["Section"];
        }
        HeadingLabel.Text = HeadingLabel.Text.Replace("[name]", s);
    
        HtmlGenericControl tableCaption =
            ListView1.FindControl("ElementTableCaption")
            as System.Web.UI.HtmlControls.HtmlGenericControl;
        if (tableCaption != null)
        {
            tableCaption.InnerText = 
                tableCaption.InnerText.Replace("[name]", s);
        }
    
        Label noElementsLabel =
            ListView1.Controls[0].FindControl("NoElementsLabel") as Label;
        if (noElementsLabel != null)
        {
            noElementsLabel.Text = 
                noElementsLabel.Text.Replace("[name]", s);
        }
    
    }
    
    
    

    Ce code place le nom de la section de configuration actuellement sélectionnée aux endroits suivants :

    • Titre de la page.

    • Élément caption de la table HTML s'il est généré (la table est générée uniquement si la section de configuration sélectionnée comporte des éléments).

    • Balisage généré à partir de l'objet EmptyDataTemplate. Ce modèle génère du HTML uniquement si la section de configuration sélectionnée ne comporte pas d'éléments.

Vous pouvez à présent procéder au test pour vérifier que le tableau s'affiche correctement et que du code HTML accessible est généré pour celui-ci.

Pour tester la page

  1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur Section.aspx, puis cliquez sur Afficher dans le navigateur.

    Une table répertoriant les éléments de la section system.web/httpHandlers s'affiche. Les noms d'éléments sont affichés sous la forme de liens hypertexte qui pointent vers une page que vous créerez si vous exécutez une autre procédure pas à pas de cette série (Procédure pas à pas : directives d'accessibilité pour l'utilisation du contrôle ListView).

    Les noms des types de sections sont affichés sous la forme de liens hypertexte qui pointent vers la documentation MSDN pour le type spécifié, comme indiqué dans l'illustration suivante :

    Navigateur de configuration - Éléments dans une section

    Si vous avez créé la page Web sous forme de page indépendante et non comme composante de l'application Configuration System Browser, le titre et le contenu de la table sont identiques, mais il n'y aura aucune barre de titre ni barre de menus, et la légende de la table apparaîtra au-dessus de la table.

  2. Dans le navigateur, affichez la source de la page.

    L'exemple suivant illustre les éléments de table qui ont été ajoutés pour améliorer l'accessibilité de la table pour les personnes qui utilisent des lecteurs d'écran.

    <table class="listViewTable" width="100%"
        cellpadding="5" rules="all" border="1" 
        summary="This table shows elements that are 
            contained in the specified section.">
        <caption id="ctl00_MainContent_ListView1_ElementTableCaption">
            Elements in the system.web/httpHandlers Section
        </caption>
        <thead>
            <tr style="">
                <th scope="col">Name</th>
                <th scope="col">Type</th>
                <th scope="col">Value</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row" class="rowHeading">
                    <a id=...>Handlers</a>
                </th>
                <td>
                    <a id=...>
                        System.Web...HttpHandlerActionCollection
                    </a>
                </td>
                <td>
                    <span id=...>Element Collection</span>
                </td>
            </tr>
        </tbody>
    </table>
    

Dans cette procédure pas à pas, vous avez utilisé un contrôle ListView pour générer des éléments et des attributs HTML qui permettent de rendre des données tabulaires accessibles aux personnes qui utilisent un logiciel de lecteur d'écran. D'autres procédures pas à pas dans cette série illustrent d'autres techniques qui permettent à votre site Web d'être conforme aux directives d'accessibilité. La procédure pas à pas suivante de la série est Procédure pas à pas : directives d'accessibilité pour l'utilisation de contrôles ListView imbriqués. Les autres procédures pas à pas de la série sont les suivantes :

Ajouts de la communauté

AJOUTER
Afficher:
© 2014 Microsoft