Exportar (0) Imprimir
Expandir todo
Este artículo se tradujo de forma manual. Mueva el puntero sobre las frases del artículo para ver el texto original.
Traducción
Original

Tutorial: Directrices de accesibilidad para usar el control GridView

.NET Framework 4

En este tutorial se muestra cómo usar el control GridView con el fin de ayudar a que las páginas web sean accesibles para personas que usan software de lector de pantalla. Estas técnicas le ayudarán a seguir la versión 2.0 de las pautas de accesibilidad WCAG (Web Content Accessibility Guidelines, por sus siglas en inglés):

  • Separar la estructura de la presentación (directriz WCAG 1.3).

Para obtener más información sobre la accesibilidad y WCAG 2.0, vea Accesibilidad en Visual Studio y ASP.NET.

Para ejecutar este tutorial, se debe contar con lo siguiente:

Este tutorial es el segundo de una serie que muestra técnicas que pueden ayudar a un sitio web de ASP.NET a cumplir las pautas de accesibilidad. En esta serie de tutoriales, va a crear una aplicación web que puede utilizar para ver los valores de configuración de ASP.NET. Si desea realizar todos los tutoriales, empiece por Tutorial: Directrices de accesibilidad para usar controles Image, Menu y AutoPostBack. Si no desea completar otros tutoriales de la serie, siga las instrucciones alternativas que se proporcionan para algunos de los pasos. Se muestran las mismas características de accesibilidad tanto si elige completar el tutorial como parte de la serie como de forma independiente.

La página web que se crea en este tutorial muestra las secciones de un grupo de secciones del archivo de configuración machine.config. Puede especificar el grupo de secciones en un parámetro de la consulta. Para obtener más información sobre los archivos de configuración y los grupos de secciones, las secciones y los elementos que contienen, vea Archivos de configuración de ASP.NET. Sin embargo, no es necesario estar familiarizado con el sistema de archivos de configuración de ASP.NET para usar estos tutoriales a modo de ilustraciones de cómo crear páginas web conformes a las pautas de accesibilidad.

Nota de seguridadNota sobre la seguridad

La información de configuración que muestra la aplicación creada en estos tutoriales resulta útil para los desarrolladores, pero no debe mostrarla en un sitio web de producción por motivos de seguridad. Los valores de configuración pueden incluir información confidencial que solo se debe mostrar a usuarios autorizados.

Hay un proyecto de sitio web de Visual Studio con código fuente disponible para este tema: Descargar.

Los datos que se muestran en el control GridView proceden del sistema de configuración de ASP.NET. En el procedimiento siguiente, se creará una clase que recupera un objeto Configuration especificado, selecciona un grupo de secciones de ese objeto y devuelve una lista de las secciones contenidas en el grupo de secciones.

NotaNota

Esta sección del tutorial no ilustra específicamente las características de accesibilidad. Simplemente proporciona los datos con los que trabajará en el control GridView.

Para crear una clase que devuelve una lista de secciones de configuración

  1. Si el sitio web no tiene todavía una carpeta App_Code, en el Explorador de soluciones, haga clic con el botón secundario en el nombre de proyecto, haga clic en Agregar carpeta ASP.NET y, a continuación, en App_Code.

  2. Haga clic con el botón secundario en App_Code y, a continuación, haga clic en Agregar nuevo elemento.

  3. En Plantillas instaladas, haga clic en Visual Basic o Visual C# y, a continuación, haga clic en Clase.

  4. En el cuadro de texto Nombre, escriba SectionGroupDataSource.vb o SectionGroupDataSource.cs y, a continuación, haga clic en Aceptar.

  5. Elimine todo el código en el nuevo archivo de clase.

  6. En su lugar, inserte el siguiente código:

    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Configuration;
    using System.Configuration;
    
    /// <summary>
    /// Retrieves a list of sections in a section group. 
    /// </summary>
    public class SectionGroupDataSource
    {
        public SectionGroupDataSource()
        {
        }
    
        public List<SectionInfo> GetSections(
            string sectionGroupName, 
            string virtualPath, 
            string site, 
            string locationSubPath, 
            string server)
        {
            List<SectionInfo> sectionList = new List<SectionInfo>();
    
            Configuration config = WebConfigurationManager.OpenWebConfiguration(
                virtualPath, site, locationSubPath, server);
    
            ConfigurationSectionGroup csg = 
                config.GetSectionGroup(sectionGroupName);
    
            foreach (ConfigurationSection section in csg.Sections)
            {
                SectionInfo si = new SectionInfo();
                si.Name = section.SectionInformation.Name;
                si.NameUrl = "Section.aspx?Section=" + 
                    section.SectionInformation.SectionName;
    
                int i = section.SectionInformation.Type.IndexOf(",");
                si.TypeName = section.SectionInformation.Type.Substring(0, i);
                sectionList.Add(si);
            }
    
            foreach (ConfigurationSectionGroup group in csg.SectionGroups)
            {
                SectionInfo si = new SectionInfo();
                si.Name = group.Name;
                si.NameUrl = 
                    "SectionGroup.aspx?SectionGroup=" + group.SectionGroupName;
                si.TypeName = 
                    "System.Configuration.ConfigurationSectionGroup";
                sectionList.Add(si);
            }
            return sectionList;
        }
    }
    
    public class SectionInfo
    {
        public string Name { 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";
            }
        }
    }
    
    
    

    La clase SectionGroupDataSource contiene un método GetSections que acepta parámetros que especifican qué objeto Configuration se va a recuperar y qué grupo de secciones se va a seleccionar. El método devuelve una colección de objetos SectionInfo. La clase SectionInfo se define inmediatamente después de la clase SectionGroupDataSource.

    NotaNota

    La aplicación de explorador de configuración usada en estos tutoriales incluye código redundante de origen de datos que podría haberse refactorizado en clases y métodos comunes. Sin embargo, el código se duplicó para garantizar que cada tutorial pueda realizarse de forma independiente. Este enfoque también minimiza el número de pasos en los elementos del tutorial que no están directamente relacionados con la accesibilidad.

En esta sección, se crea una página web que usa un control ObjectDataSource para proporcionar datos a un control GridView. El control ObjectDataSource llama al método GetSections del objeto SectionGroupDataSource creado en el procedimiento anterior.

NotaNota

Independientemente de que use ObjectDataSource u otro método para recuperar datos (por ejemplo, una consulta de base de datos que usa el control SqlDataSource o el control LinqDataSource), los métodos para configurar el control GridView son los mismos.

El control GridView crea una table HTML que tiene una fila para cada sección de configuración que se va a mostrar. Cada fila tiene el nombre de la sección en una columna y el nombre de la clase que se usa para almacenar sus valores en la segunda columna.

Para que la tabla sea más accesible para las personas que usan software de lector de pantalla, configurará el control GridView para incluir las siguientes características en la tabla HTML que genera:

  • Un elemento caption describe el propósito de la tabla en un encabezado breve.

  • Un elemento summary proporciona una descripción más larga del propósito de la tabla.

  • Los elementos thead y tbody distinguen las secciones de encabezado y cuerpo de la tabla.

  • Los elementos th tienen atributos scope="col" que identifican las celdas de encabezado de columna.

En el procedimiento siguiente creará una página web y agregará un marcado que muestra la lista de secciones en un control GridView.

Para crear una página web que muestra una lista de secciones de configuración

  1. En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nombre del proyecto y, a continuación, haga clic en Agregar nuevo elemento.

    Aparecerá el cuadro de diálogo Agregar nuevo elemento.

  2. En Plantillas instaladas, haga clic en Visual Basic o en Visual C# y, a continuación, en Web Forms.

  3. En el cuadro de texto Nombre, escriba SectionGroup.aspx.

    El archivo SectionGroup.aspx se abrirá en la vista Código fuente.

  4. Asegúrese de que está activada la casilla Colocar el código en un archivo independiente.

  5. Si va a agregar esta página a la aplicación de explorador del sistema de configuración, asegúrese de que esté activada la casilla Seleccionar página maestra. (Si no agrega esta página al sitio web que crea en Tutorial: Directrices de accesibilidad para usar controles Image, Menu y AutoPostBack, podría no haber una página maestra).

  6. Haga clic en Aceptar en el cuadro de diálogo Agregar nuevo elemento.

  7. Si aparece el cuadro de diálogo Seleccionar una página maestra, haga clic en Aceptar. Solo hay una página maestra, que ya estará seleccionada.

  8. En la directiva @ Page, establezca la propiedad Title en Configuration System Browser - Sections in a Section Group, tal y como se muestra en el ejemplo siguiente:

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

    Este título identifica el sitio y la página en el sitio. Las pautas de accesibilidad requieren que se establezca el título de página.

  9. En el elemento Content que es para el control ContentPlaceHolder de MainContent, inserte el siguiente marcado:

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

    (Si crea una página web que no forma parte de la aplicación de explorador del sistema de configuración, inserte el marcado entre las etiquetas <div> y </div>).

    Este marcado agrega un encabezado a un control Label para que el encabezado se pueda modificar mediante programación. El método Page_Load en el código de la página reemplazará la cadena "[nombre]" en el encabezado por el nombre real del grupo de secciones que la página está mostrando.

  10. Debajo del marcado insertado en el paso anterior, inserte el siguiente marcado:

    
    <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" 
        SelectMethod="GetSections" TypeName="SectionGroupDataSource">
        <SelectParameters>
            <asp:QueryStringParameter Name="sectionGroupName" 
                QueryStringField="SectionGroup" Type="String" 
                DefaultValue="system.web" />
            <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>
    
    
    

    Este marcado crea un control ObjectDataSource que llama al método GetSections del objeto SectionGroupDataSource. Los parámetros que se pasan al método GetSections especifican el nombre del grupo de secciones y el objeto Configuration concreto de los que se recuperará el grupo de secciones.

    El valor del parámetro del nombre del grupo de secciones se recupera de un campo de cadena de consulta denominado "SectionGroup". Si no hay ninguna cadena de consulta, el grupo de secciones predeterminado es "system.web". Los valores de los otros cuatro parámetros se recuperan del estado de sesión. Otra página de la aplicación de explorador del sistema de configuración coloca los valores en el estado de sesión. Por consiguiente, si está creando esta página sin ejecutar todos los tutoriales de esta serie, solo se usarán los valores predeterminados.

  11. Debajo del control ObjectDataSource, inserte el siguiente marcado:

    
    <div class="dataTable">
        <asp:GridView ID="SectionGroupGridView" runat="server" 
            AutoGenerateColumns="False" 
            DataSourceID="ObjectDataSource1"
            Caption="Sections in Section Group [name]"
            summary="This table shows sections that are 
                contained in the specified section group."
             Width="100%">
            <Columns>
                <asp:TemplateField HeaderText="Name" 
                    SortExpression="Name" >
                    <ItemTemplate>
                        <asp:HyperLink ID="HyperLink1" runat="server" 
                            Text='<%# Bind("Name") %>' 
                            NavigateUrl='<%# Bind("NameUrl") %>'>
                        </asp:HyperLink>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="TypeName" 
                    SortExpression="TypeName">
                    <ItemTemplate>
                        <asp:HyperLink ID="HyperLink2" runat="server" 
                            Text='<%# Bind("TypeName") %>' 
                            NavigateUrl='<%# Bind("TypeNameUrl") %>'>
                        </asp:HyperLink>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>
    
    
    

    Este marcado crea un control GridView. Las siguientes características de este marcado están relacionadas con la accesibilidad:

    • Se establece la propiedad Caption para que se genere un elemento caption.

    • Se establece un atributo expando summary para que se genere un atributo summary en el elemento table. (Cuando en el marcado se especifican atributos que no corresponden a las propiedades del control, los atributos se pasan cuando se representa el control; estos se conocen como atributos expando).

    Debido a que cada fila presenta los datos de una sección y la primera columna contiene el nombre de la sección, las celdas de esta fila funcionan de forma lógica como encabezados de fila. Para hacer esta función explícita, puede agregar atributos scope="row" a los elementos td y, opcionalmente, puede usar th en lugar de elementos td. Si está usando campos de plantilla, puede hacer que el control GridView genere elementos th que tienen atributos scope="row" estableciendo la propiedad RowHeaderColumn en el nombre del campo que tiene el identificador para una fila. Sin embargo, la propiedad RowHeaderColumn se omite cuando se usan campos enlazados. En este tutorial, se usan campos enlazados en el control GridView. Por consiguiente, el control GridViewno genera elementos th para los encabezados de fila. Si desea identificar los encabezados de fila de esta manera, puede usar campos enlazados o un control de datos diferente, como el control ListView.

En el procedimiento siguiente, agregará código que establece una propiedad del control GridView que hace que se generen elementos thead,tbody y th, y establece el título de la página.

Para configurar el control GridView y actualizar el título de la página

  1. Abra el archivo SectionGroup.aspx.vb o SectionGroup.aspx.cs.

  2. En el método Page_Load, agregue el siguiente código:

    
    SectionGroupGridView.HeaderRow.TableSection =
        TableRowSection.TableHeader;
    
    
    

    Este código hace que el control GridView genere los elementos thead,tbody y th.

  3. Debajo del código que insertó en el paso anterior, inserte el código siguiente:

    
    string s = ObjectDataSource1.SelectParameters["sectionGroupName"].DefaultValue.ToString();
    if (Request.QueryString["SectionGroup"] != null)
    {
        s = Request.QueryString["SectionGroup"];
    }
    HeadingLabel.Text = HeadingLabel.Text.Replace("[name]", s);
    SectionGroupGridView.Caption =
        SectionGroupGridView.Caption.Replace("[name]", s);
    
    
    

    Este código determina qué grupo de secciones mostrará la página y colocará el nombre del grupo de secciones seleccionado en el título de la página y en el título de la tabla.

El procedimiento siguiente es opcional y solo funcionará si está creando esta página como parte de la aplicación de explorador del sistema de configuración. Dado que la tabla es el único contenido en la página, el título de la tabla es igual que el título de la página. Por consiguiente, en este procedimiento se agrega marcado CSS que suprime la presentación del título de la tabla. El título seguirá incluido en el código HTML y puede ser anunciado por los lectores de pantalla.

Para evitar que se muestre el título de la tabla

  1. Abra el archivo Site.css que está en la carpeta Styles.

  2. Debajo de la definición del elemento body, agregue la siguiente definición para los elementos caption:

    
    caption
    {
        display: none;
    }
    
    
    

Ahora puede realizar pruebas para comprobar que la tabla se muestra correctamente y que se genera código HTML accesible para ella.

Para probar la página

  1. En el Explorador de soluciones, haga clic con el botón secundario en SectionGroup.aspx y, a continuación, haga clic en Ver en el explorador.

    Se muestra una tabla que enumera las secciones del grupo de secciones system.web. Los nombres de sección se muestran como hipervínculos que apuntan a una página que creará si ejecuta un tutorial diferente de esta serie (Tutorial: Directrices de accesibilidad para usar el control ListView). Los nombres de los tipos de grupos de secciones se muestran como hipervínculos que apuntan a la documentación de MSDN para el tipo indicado, tal y como se muestra en la ilustración siguiente:

    Página del grupo de sección del explorador de sistema de configuración
    NotaNota

    Podría tener que hacer clic en el botón Recargar o Actualizar del explorador para ver el resultado de los nuevos valores CSS que agregó en el procedimiento anterior.

    Si creó la página web como una página independiente en lugar de como parte de la aplicación de explorador del sistema de configuración, el encabezado y el contenido de la tabla serán el mismo, pero no habrá ninguna barra de título o de menús, y la leyenda de la tabla aparecerá encima de la tabla.

  2. En el explorador, vea el código fuente de la página.

    En el ejemplo siguiente se muestra la tabla con los elementos que se agregaron para mejorar la accesibilidad de la tabla para las personas que usan lectores de pantalla.

    <table cellspacing="0" rules="all" 
      summary="This table shows sections that are
      contained in the specified section group." border="1"
      id="ctl00_MainContent_SectionGroupGridView"
      style="width:100%;border-collapse:collapse;">
      <caption>
        Sections in Section Group system.web
      </caption>
      <thead>
        <tr>
          <th scope="col">Name</th>
          <th scope="col">TypeName</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <a id="..." href="...">
              webParts
            </a>
          </td>
          <td>
            <a id="..." href="...">
              System.Web.Configuration.WebPartsSection
            </a>
          </td>
        </tr>
        [remaining rows of table]
      <tbody>
    </table>
    

En este tutorial, se usó un control GridView para generar una tabla HTML que tiene elementos y atributos que permiten que los datos tabulares sean accesibles para las personas que usan software de lector de pantalla. Otros tutoriales de esta serie muestran otras técnicas que contribuirán a que su sitio web cumpla las pautas de accesibilidad. El siguiente tutorial de la serie es Tutorial: Directrices de accesibilidad para usar el control ListView. Los otros tutoriales de la serie son los siguientes:

Adiciones de comunidad

AGREGAR
Mostrar:
© 2014 Microsoft