Día 28: Designar los elementos de los formularios

Le ha molestado alguna vez que los formularios de Internet sean tan difíciles de usar? Por ejemplo, en aplicaciones con interfaz grafico normales, puede hacer clic donde quiera en la etiqueta de un cajita de selección (checkbox) para poner o quitar la marca de la cajita, pero en las aplicaciones de Internet, solo puede hacer clic en el pequeño cuadrado de la cajita. Esto es irritante pero no fatal. Pero para usuarios ciegos, la situación es aun peor. Hasta formularios sencillos, como aquellos usados para publicar comentarios, pueden ser difíciles de usar si no los puede ver en su totalidad (Notamos un problema similar con las tablas; un calendario de un registro de apuntes es fácil de usar si puede verlo completamente, pero difícil si solo puede ver un día a la vez).

Existen etiquetas de HTML que pueden ayudar a hacer los formularios más fáciles de usar. Hablare sobre una, la etiqueta <label>; puede leer sobre las otras en la sección "Lectura añadida".

La etiqueta <label> permite asociar una etiqueta de formulario con cualquier elemento de entrada de datos: una caja de texto, un area de texto de múltiples líneas, un cajita de selección (checkbox), un botón de radio, lo que sea. Esto permite a los usuarios de lectores de pantalla inteligentemente anunciar lo que es un elemento de entrada en particular, por medio de la lectura de la etiqueta. Mas aún, si usa una etiqueta <label> para asociar una cajita de selección (<input type="checkbox">) con el elemento de texto junto a esta, su formulario de Internet, se comportará como una aplicación con interfaz grafico: al hacer clic en cualquier sitio de la etiqueta marcará o desmarcará la cajita.

Quién se beneficia?

  1. Jackie se beneficia. Cuando Jackie navega con la tecla TAB a través de un formulario, JAWS anuncia el nombre de cada elemento (por la propiedad name), que podría o no ser inteligible. Pero si el elemento del formulario está asociado con una etiqueta, JAWS leerá la dicha etiqueta en su lugar. "Texto: nombre." (TAB) "Texto: dirección de email." (TAB) "Text: URL." (TAB) "Area de texto: comentarios." Y así sucesivamente.
  2. Lillian se beneficia. Cuando los elementos de formulario son asociados con etiquetas, Lillian puede hacer clic en cualquier sitio del texto junto a la cajita de selección, y esto cambiará el estado de la cajita. Esto ofrece una margen de error mas amplio para cambiar la cajita con el Mouse, y con su visión limitada, mientras mas ancho mejor.
  3. Bill debería beneficiarse, pero todavía no puede. El navega en su mayor parte con el teclado, lo que significa en su mayoría con la tecla TAB. Cuando llega a una cajita de selección en un formulario, Mozilla debería establecer un rectángulo de enfoque alrededor de la etiqueta completa, pero no lo hace así, solo coloca el rectángulo alrededor de la cajita (Sin embargo, Internet Explorer lo hace correctamente. Hasta Netscape 4 lo hace correctamente. Mozilla malo).

Como hacerlo: Movable Type

En Movable Type, edite su Plantilla de Inscripción de Comentarios (Comment Listing Template). Cerca del final, deberá ver un formulario que contiene elementos como estos:

Nombre:<br />
<input name="autor" /><br /><br />

Email:<br />
<input name="email" /><br /><br />

Dirección de su página de internet:<br />
<input name="url" /><br /><br />

Comentarios:<br />
<textarea name="texto" rows="10" cols="50"></textarea><br /><br />

<input type="checkbox" name="bakecookie" />Recordar esta información?<br /><br />

Cada una de estas etiquetas necesita ser envuelta en una etiqueta <label>. Además, como la etiqueta <label> señala hacia un elemento de formulario por ID (no por el nombre - name -), cada etiqueta <input> un atributo ID. En su totalidad, se verá así:

<label for="autor">Nombre:</label><br />
<input id="autor" name="autor" /><br /><br />

<label for="email">Email:</label><br />
<input id="email" name="email" /><br /><br />

<label for="url">Dirección de su página de internet:</label><br />
<input id="url" name="url" /><br /><br />

<label for="texto">Comentarios:</label><br />
<textarea id="texto" name="texto" rows="10" cols="50"></textarea><br /><br />

<input type="checkbox" id="bakecookie" name="bakecookie" /><label for="bakecookie">Recordar esta información?</label><br /><br />

Asegúrese de hacer los mismos cambios en su plantilla de Revisión de Comentarios (Comment Preview template), su plantilla de Error de Comentarios (Comment Error template), y su Archivo de Entrada Individual (Individual Entry Archive).

Como hacerlo: Greymatter

Bajo "Edit Karma & Comments-Related Templates", debe haber una plantilla llamada "{{entrycommentsform}} Posting form" que incluye esto:

Nombre
<BR>
<INPUT TYPE=TEXT NAME="newcommentauthor" SIZE=40>
<P>
E-Mail (opcional)
<BR>
<INPUT TYPE=TEXT NAME="newcommentemail" SIZE=40>
<P>
Página de Internet (opcional)
<BR>
<INPUT TYPE=TEXT NAME="newcommenthomepage" SIZE=40>
<P>
Comentarios
<BR>
<TEXTAREA NAME="newcommentbody" COLS=35 ROWS=10 WRAP=VIRTUAL></TEXTAREA>

Cámbielo a esto:

<label for="newcommentauthor">Nombre</label>
<BR>
<INPUT TYPE=TEXT id="newcommentauthor" NAME="newcommentauthor" SIZE=40>
<P>
<label for="newcommentemail">E-Mail (opcional)</label>
<BR>
<INPUT TYPE=TEXT id="newcommentemail" NAME="newcommentemail" SIZE=40>
<P>
<label for="newcommenthomepage">Página de Internet (opcional)</label>
<BR>
<INPUT TYPE=TEXT id="newcommenthomepage" NAME="newcommenthomepage" SIZE=40>
<P>
<label for="newcommentbody">Comentarios</label>
<BR>
<TEXTAREA id="newcommentbody" NAME="newcommentbody" COLS=35 ROWS=10 WRAP=VIRTUAL></TEXTAREA>

Lectura añadida

 
<< Día 27: Usar encabezados reales | Contenido | Día 29: Hacer que todo pueda buscarse >>