ATENCIÓN AL CLIENTE: +34 923 199 148

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>
Quizá te interese...