Editando apunte: Accesibilidad vs. Semántica

Editando apunte: Accesibilidad vs. Semántica cerrar apuntes

ID: 14 (tabla: apuntes) Título:
Fecha: [poner fecha actual ]
Categorías: Caricatos, Vicisitudes de un Webmaster, Mentes pensantes
Etiquetas: accesibilidad, javascript, semántica, SEO, webmaster
Extras: accesibilidad, javascript, semántica, SEO, webmaster
apunte: - - - - - - - -

<p>
	[rss]En los <a href="http://www.forosdelweb.com/">Foros del Web</a>, a veces, se ven cuestiones de difícil comprensión. En esta ocasión se ha planteado el tema: <a href="http://www.forosdelweb.com/f13/onclick-accesible-no-funciona-tras-postback-857090/#post3625452">onclick accesible no funciona tras postback</a>, que trata de enlaces donde <span style="font-weight: bold">no</span> se "debería" programar el evento "click" por razones de <a href="http://es.wikipedia.org/wiki/Accesibilidad_web">accesibilidad web</a>.[/rss]
</p>
<p>
	En el enlace de referencia vemos que el código propuesto simplemente cambia un atributo de los enlaces para definir ese evento.
</p>
<p>
	La argucia para validar el uso del evento click en los enlaces es definir (o programar) el evento con el atributo <a style="font-weight: bold"  href="http://www.sidar.org/recur/desdi/traduc/es/html401-es/struct/links.html#adef-rel">rel</a>, que debe usarse como se explica en su definición pero, si no se hace así, no importa ya que valida aunque perdiendo todo su sentido semántico.
</p>
<p>
	Mi opinión sobre este asunto es sencilla, y está reflejado en mis respuestas del tema:
</p>
<div class="codigo" >
	... que no pase una validación de accesibilidad no iguala (al menos en este caso, me lo parece) a que no sea una página accesible.
</div>
<p>
	[rss]Puntualizando algo más, no creo que se trate de "perder accesibilidad", el hecho de querer condicionar un enlace... ¿y cómo condicionamos un simple enlace?... simplemente programándolo:[/rss]
</p>
[rss]<div class="codigo" >
	onclick="return confirm('¿realmente desea hacer el enlace...?')"
</div>[/rss]
<p>
	También hemos querido validar esta página (véase el apunte <a href="?titulo=Etiqueta+accesibilidad&PHPSESSID=0umv7fk7c4qaic9lncbl96aq31">Etiqueta accesibilidad</a>), y también hemos tenido un problema similar para que valide el efecto de cambio de la imagen "captcha", que originalmente hicimos así:
</p>
<div class="codigo" >
	<img src="diario/captcha.png"
	onclick="this.src = 'diario/captcha.png?azar=' + Math.floor(Math.random() * 9999)" />
</div>
<p>
	Para arreglar el problema y validar hemos insertado el efecto desde otro script en la cabecera de la página:
</p>
<pre class="codigo" >function refrescarme()	{
	this.src = "diario/captcha.png?azar=" + Math.floor(Math.random() * 9999);
}
window.onload = function()	{
	document.getElementById("imagen_captcha").onclick = refrescarme;
}</pre>
<p>
	[rss]Lo que más extraña es que haciendo exactamante lo mismo, de una manera pasa la validación y de la otra no.[/rss]
</p>
<h3 class="subtitulo">
	Algunas reflexiones
</h3>
<p>
	Si el mismo efecto, pero implementado de otra manera, pasa la validación, es un poco absurdo todo el sistema.
Al querer validar esta página, existía también un error en los controles del formulario de los comentarios, por envolverlos con la etiqueta label, cuando para que valide hay que usar el atributo for de la etiqueta label (no sé si existe alternativa).
</p>
<p>
	[rss]Al referirme a la semántica, me refiero al significado y uso tanto de las etiquetas como de sus atributos o propiedades.[/rss] En el caso comentado al principio de este apunte, en principio lo que me parece absurdo es usar un enlace (etiqueta "a") solamente para lanzar una función (script), o sea, se le quita el sentido semántico de la etiqueta (anclar o enlazar); luego se le quita el sentido al atributo rel de la etiqueta. Como he comentado en muchos mensajes de los foros, un click se puede asociar a cualquier elemento o etiqueta, tal vez el más apropiado sea un simple botón; y si quisiésemos que pareciera un enlace (siguiendo con las cosas absurdas), se pueden aplicar estilos.
</p>

Controles Otras tablas: imagenes, postales, categorias, etiquetas, extras - - (popup ) - que

Seleccionar nuevo apunte

categoria Nombre:
Controles Otras tablas: apuntes, imagenes, postales, etiquetas extras - - Seleccionar: categoria
Descripción: - - - - - - - -	Apuntes

extra Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias etiquetas - - Seleccionar: extra
Descripción: - - - - - - - -	Apuntes

etiqueta Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias extras - - Seleccionar: etiqueta
Descripción: - - - - - - - -	Apuntes

Editor del diario

Zona de comentarios

Evaluación