Suele criticarse la poca accesibilidad de un sitio web cuando se trabaja con Javascript, pero la verdad es esto no tiene por qué ser así. De hecho, el problema de Javascript y la Accesibilidad es más bien de malas prácticas, no de Javascript.
Un uso común y errado es insertar código Javascript en la capa HTML:
[source:html]
<a href=”#” id=”linkToShow” title=”Esconde” el contenido de un bloque” onclick=”func(‘showID’)”> click para mostrar </a>
<div id=”showID” style=”display:none”>Bloque escondido</div>
[/source]
Otro ejemplo similar:
[source:html]
<a href=”javascrip:func(‘showID’)” id=”linkToShow” title=”Muestra el contenido de un bloque” > click para mostrar </a>
<div id=”showID” style=”display:none”>Bloque escondido</div>
[/source]
El problema de ámbos ejemplos es que si el navegador tiene desactivado Javascript, el contenido del DIV showID no será visible y, por lo tanto, será completamente inaccesible.
Afortunadamente con el advenimiento de bibliotecas como Prototype, MooTools o Jquery es posible separar compeltamente el HTML de Javascript:
[source:html]
<a href=”#showID” id=”linkToShow” title=”Muestra el contenido de un bloque” rel=”muestra”> click para mostrar el DIV showID</a>
<div id=”showID”>Bloque escondido</div>
[/source]
Y, por ejemplo, en el caso de Prototype, se puede detectar el evento onclick con la ayuda de Event.observe:
[source:js]
Event.observe(window,’load’, function(){Event.observe(document.body, ‘click’, proto.fx.bindAsEventListener(proto));});
[/source]
Así una vez detectado el click vemos si hay una función asociada al atributo rel del link (pero bien podría ser a otro atributo como id, clase, title, etc.). De ser así se ejecuta la función y listo, mostramos el elemento oculto. Si no hay javascript habilitado el ancla hará el scroll al elemento correspondiente que por defecto no está oculto.
[source:js]
var proto = {
//escondemos todos los elementos con clase “hide”
hide : function(){
$$(‘div[class=hide]‘).map(function(s){$(s.id).hide()});
},
fx : function(e) {
var id = Event.element(e).id;
var rel = $(id).rel;
//la url es ala vez el id del elemento que deseamos mostrar
var url = $(id).href.split(“#”)[1];
//se podría usar el rel, id o clase y condicionar a voluntad para invocar funciones más genéricas
if(eval(“this.”+rel)!=undefined){
$(id).href = “javascript:proto.ln(‘”+id+”‘,’”+url+”‘)”;
eval(“this.”+rel)(url);
}
else{
return false;
}
},
//esta funcion es para inhabilitar el link, para que no recargue el documento web
ln : function (id,url){
$(id).href = “#”+url;
},
//por cada rel que tenemos en el html podemos crear una función de igual nombre
muestra:function(id){
$(id).show();
}
}
Event.observe(window,’load’, proto.hide);
Event.observe(window,’load’, function(){Event.observe(document.body, ‘click’, proto.fx.bindAsEventListener(proto));});
[/source]
Posiblemente hay otras formas mejores de hacer lo mismo… pero es un punto de partida
Tags: ajax, accesibilidad, html, javascript
