GridView accesible

En el siguiente artículo vamos a ver como crear objetos de la clase GridView accesibles.

Supongamos que tenemos una tabla en una base de datos de ejemplo con la siguiente estructura:

PERSONAS(id,nombre,apellidos)
   ID: int, autonumérico
   nombre: String
   apellidos: String

Supongamos también que tenemos un objeto de la clase DataSet correctamente rellenado con los siguientes datos de la base de datos anterior:
ID = 0, nombre = “Nombre 1”, apellidos= “Apellidos 1”
y
ID = 1, nombre = “Nombre 2”, apellidos= “Apellidos 2”

Si enlazamos el DataSet con un GridView cuyo código ASP.NET es el siguiente:

<asp:GridView ID=”GridViewEjemplo1″ runat=”server”>
</asp:GridView>

obtendremos el siguiente código HTML:

<table cellspacing=”0″ rules=”all” border=”1″ id=”GridViewEjemplo1″ style=”border-collapse:collapse;”>
   <tr>
      <th scope=”col”>id</th>
      <th scope=”col”>nombre</th>
      <th scope=”col”>apellidos</th>
   </tr>
   <tr>
      <td>0</td>
      <td>Nombre 1</td>
      <td>Apellidos 1</td>
   </tr>
   <tr>
      <td>1</td>
      <td>Nombre 2</td>
      <td>Apellidos 2</td>
   </tr>
</table>

En el código HTML obtenido, desde un punto de vista de accesibilidad web, faltarían los siguientes elementos:

El atributo summary de la declaración de la tabla
Elemento <caption> al comienzo de la tabla
Atributo id de cada elemento <th> la primera fila de la tabla
Atributo headers de cada elemento <td> de cada una de las filas

Veámos las modificaciones que tenemos realizar para añadir los elementos citados anteriormente.
Modificando código ASP.NET, nos quedará la declaración del GridView de la siguiente forma:

<asp:GridView ID=”GridViewEjemplo2″ runat=”server” AutoGenerateColumns=”False” Caption=”Tabla accesible de ejemplo”>
   <Columns>
      <asp:BoundField DataField=”id” HeaderText=”Identificador” />
      <asp:BoundField DataField=”nombre” HeaderText=”Nombre” />
      <asp:BoundField DataField=”apellidos” HeaderText=”Apellidos” />
   </Columns>
</asp:GridView>

También implementaremos (en nuestro ejemplo, se implementará en C#) un método (enlazaDatos) que enlazará el DataSet que contiene los datos con el GridView y añadirá los elementos anteriores. El método será llamado, por ejemplo, desde el evento Page_Load.
El código sería el siguiente:

private void enlazaDatos(dsEjemplo ds, GridView gridViewEjemplo)
{
   gridViewEjemplo.DataSource = ds.Tables[0];
   gridViewEjemplo.DataBind();
   gridViewEjemplo.Attributes.Add(“summary”, “La siguiente tabla es un ejemplo de GridView accesible”);
   for (int i = 0; i < gridViewEjemplo.Rows.Count; i++)
   {
      for (int j = 0; j < gridViewEjemplo.Columns.Count; j++)
      {
         gridViewEjemplo.Rows[i].Cells[j].Attributes.Add(“headers”, ds.Tables[0].Columns[j].ColumnName);
      }
   }
   gridViewEjemplo.HeaderRow.Cells[0].Attributes.Add(“id”, “id”);
   gridViewEjemplo.HeaderRow.Cells[1].Attributes.Add(“id”, “nombre”);
   gridViewEjemplo.HeaderRow.Cells[2].Attributes.Add(“id”, “apellidos”);
}

De esta forma, el código HTML quedaría así:

<table cellspacing=”0″ rules=”all” summary=”La siguiente tabla es un ejemplo de GridView accesible” border=”1″ id=”GridViewEjemplo2″ style=”border-collapse:collapse;”>
   <caption>
      Tabla accesible de ejemplo
   </caption>
   <tr>
      <th id=”id” scope=”col”>Identificador</th>
      <th id=”nombre” scope=”col”>Nombre</th>
      <th id=”apellidos” scope=”col”>Apellidos</th>
   </tr>
   <tr>
      <td headers=”id”>0</td>
      <td headers=”nombre”>Nombre 1</td>
      <td headers=”apellidos”>Apellidos 1</td>
   </tr>
   <tr>
      <td headers=”id”>1</td>
      <td headers=”nombre”>Nombre 2</td>
      <td headers=”apellidos”>Apellidos 2</td>
   </tr>
</table>