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);
}