Menú accesible

WebProgramacion > Blog > Accesibilidad Web > Menú accesible
Autor: Dámaso Velázquez Álvarez

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 tabla
  • texto: string: Nombre que visualizaremos en el enlace
  • titulo: string: Título del enlace
  • enlace: 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);
}

Podría interesarte...

Enlaces accesibles en ASP.NET
Forma de hacer los enlaces accesibles en ASP.NET utilizando un control HyperLink
Lista de ítems en una misma línea
Ejemplo de código para ver una lista de ítems en una misma línea, mediante estilos CSS
Clase que genera el código HTML de un enlace accesible
Clase implementada en C# que genera el código HTML de un enlace de manera accesible

Fecha

25/6/2008