Campos de texto accesibles

WebProgramacion > Blog > Accesibilidad Web > Campos de texto accesibles
Autor: Dámaso Velázquez Álvarez

Para que un campo de texto sea accesible debe cumplir:
- Debe tener un valor por defecto
- Debe estar correctamente etiquetado (mediante una etiqueta <label for="nombre_del_campo_de_texto">)

El valor por defecto lo podemos fijar estáticamente, estableciendo el valor de la propiedad Text del campo de texto. En este ejemplo el valor se va a fijar a la cadena de texto 'Texto...' y se van a añadir dos códigos javascript para que cuando el usuario haga clic o sitúe el foco en el campo de texto, dicho campo se vacíe y cuando salga, si no ha escrito nada, se vuelva a establecer con el valor 'Texto...'

El código HTML debe quedar de la siguiente forma:

<label id="labelTxtEjemplo" for="txtEjemplo">
   <input name="txtEjemplo" type="text" value="Texto..." id="txtEjemplo" onfocus="if(this.value=='Texto...')this.value='';" onblur="if(this.value=='')this.value='Texto...';" />
</label>

En este fragmento de código HTML podemos ver cómo la propiedad for de la etiqueta label tiene por valor el identificador del campo de texto: txtEjemplo

Veámos el código asp.net necesario:

<label runat="server" id="labelTxtEjemplo">
   <asp:TextBox ID="txtEjemplo" runat="server" Text="Texto..."></asp:TextBox>
</label>

En éste código podemos ver que la etiqueta label tiene su propiedad runat establecida al valor server. El motivo es porque dinámicamente (desde el código C#) vamos a añadirle la propiedad for, y tendrá como valor el identificador que le haya correspondido al campo de texto. Para ello implementaremos el evento Page_Load de la siguiente forma:

protected void Page_Load(object sender, EventArgs e)
{
   if (!IsPostBack)
   {
      labelTxtEjemplo.Attributes.Add("for", txtEjemplo.ClientID);
      //El código de las siguientes dos requerirán tener activado JavaScript en nuestro navegador
      txtEjemplo.Attributes.Add("onfocus", "if(this.value=='Texto...')this.value='';");
      txtEjemplo.Attributes.Add("onblur", "if(this.value=='')this.value='Texto...';");
   }
}

En el fragmento de código anterior cabe destacar las dos líneas que añadirán código JavaScript. Dicho código debe ser independiente del dispositivo, es decir, que los eventos programados deben funcionar independientemente del dispositivo que genere el evento. En este caso, los eventos funcionarán tanto con el ratón (haciendo clic dentro de la caja de texto) como si accedemos a la caja de texto con el tabulador del teclado.

El funcionamiento de éste código es el que empleo en la caja de texto de búsqueda de www.webprogramacion.com

Podría interesarte...

Tablas accesibles en HTML
Ejemplo de tabla HTML para almacenar datos de manera accesible
Imágenes accesibles en HTML
Código html que hay que utilizar para que una imagen sea accesible
Tablas con capas
Ejemplo para maquetar una tabla con capas y estilos CSS. Imprescindible si queremos que nuestra web sea accesible por ...

Fecha

14/6/2008