webprogramacion.com >
Accesibilidad web > Menú accesible
Menú accesible (Accesibilidad web)
En el siguiente artículo vamos a ver cómo implementar un menú accesible y dinámico.
Para ello supondremos que tenemos una tabla en nuestra base de datos con la siguiente estructura:
MENU(id,texto,titulo,enlace)
id: int, autonumérico, clave de la tablatexto: string: Nombre que visualizaremos en el enlacetitulo: string: Título del enlaceenlace: string: Dirección del enlace
Cabe destacar la utilidad del atributo
title en los enlaces. Dicho atributo va a dar una ampliación acerca del destino del enlace. Es interesante utilizarlo cuando además del texto del enlace se quiere dar una descripción del destino de dicho enlace.
Desde un punto de vista de accesibilidad web, va a ser útil por ejemplo en lectores de pantalla, ya que dicho software tiene la opción de leer al usuario el contenido del atributo
title de cada uno de los enlaces.
Supongamos que tenemos declarado un control de tipo Literal llamado LiteralMenu en nuestra página web de la siguiente forma:
<asp:Literal ID="LiteralMenu" runat="server"></asp:Literal>
Supongamos también que tenemos un
DataSet llamado
dsEnlaces rellenado con los datos de la tabla detallada anteriormente. Cabe destacar que el menú se va a implementar a través de una lista HTML (
<ul> con elementos
<li>)
El método que rellenará nuestro LiteralMenu será el siguiente:
private void rellenaMenuAccesible(Literal literal, DataSet ds)
{
literal.Text = "<ul>";
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
literal.Text += "<li>" +
"<a title='" +
ds.Tables[0].Rows[i]["titulo"].ToString() +
"' " +
" href='" +
ds.Tables[0].Rows[i]["enlace"].ToString() +
"'>" +
ds.Tables[0].Rows[i]["texto"].ToString() +
"</a>" +
"</li>";
}
literal.Text += "</ul>";
}
La llamada al método se realizará de la siguiente forma (en nuestro ejemplo la llamada se realiza desde el evento
Page_Load).
protected void Page_Load(object sender, EventArgs e)
{
DataSet dsEjemplo;
//En este punto el DataSet dsEjemplo se rellenará con la correspondiente consulta a la base de datos
//para ser utilizado en la llamada al método rellenaMenuAccesible
this.rellenaMenuAccesible(LiteralMenu, dsEjemplo);
}
Autor del artículo
Dámaso Velázquez
Fecha del artículo
25/6/2008
Compartir