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>
obtendremos el siguiente código HTML:
<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:
<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:
{
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í:
<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>
