Las aplicaciones web ricas en Javascript pueden suponer en algunas ocasiones una barrera para la accesibilidad. En el caso de Google Maps (versión 3) tenemos dos potenciales barreras de accesibilidad:
- Utilización de los controles del mapa unicamente con dispositivo apuntador: imposibles de utilizar con teclado.
- Sin alternativa en ausencia de Javascript.
Accesibilidad de teclado
La imposibilidad de utilizar los controles del mapa con el teclado hace que se incumpla el punto 2.1.1 de WCAG 2.0 (prioridad A, enlace externo, en inglés), que obliga a que toda la funcionalidad del contenido sea utilizable mediante teclado:
2.1.1 Keyboard: All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user’s movement and not just the endpoints. (Level A)
Este problema tiene su origen en que los controles del mapa están hechos con elementos DIV, que no pueden recibir el foco de la aplicación. Para solventarlo una solución sería insertar el el HTML generado por Google Maps elementos BUTTON, que si captan el foco.
Para ello se puede utilizar la siguiente función:
function gmaps_teclado() {
var capaMapa = 'mapa' // cambiar por id de la capa en la que se inserta el mapa
var button, button_style = 'width:100%;height:100%;padding:2px;margin:2px;background:transparent;border-width:0px;border-style:solid;cursor:pointer;overflow:hidden;text-indent:-100em;position:absolute;top:-2px;left:-2px;';
var divs = capaMapa.getElementsByTagName('div');
for (var i = 0; i < (divs.length); i++) {
if ( divs[i].getAttribute('title')) {
// Se genera el button
button = document.createElement("BUTTON");
button.setAttribute('id','boton-mapa-'+i);
button.setAttribute('value',divs[i].getAttribute('title'));
// estilos...
button.setAttribute('style',button_style); // Para navegadores de verdad
button.style.cssText = button_style; // Para IE
// Se añade el button
divs[i].appendChild(button);
}
}
}La función debería llamarse con un setTimeout para que de tiempo a que se cargue el mapa:
setTimeout('gmaps_teclado();',3000);He preparado un ejemplo donde se puede ver funcionando.
Alternativa en ausencia de Javascript
En este caso se puede seguir usando Google Maps, en particular la versión estática, que en lugar de generar un mapa dinámico genera una imagen, aunque no tiene posibilidad de ampliación/reducción o de movimiento.
Para el ejemplo lo he insertado dentro de la capa en la que se inserta el mapa cuando hay Javascript, de modo que en ausencia de Javascript se ve la imagen, y en caso contrario la imagen es tapada por el mapa:
<div id="mapa">
<p class="estatica"><img src="http://maps.google.com/maps/api/staticmap?center=Vía de Dublín 7, Madrid 28042&zoom=16&size=600x400&maptype=roadmap&markers=color:red|Vía de Dublín 7, Madrid 28042&sensor=false&key=[APY_KEY]" alt="Mapa de ubicación para Vía de Dublín 7, Madrid 28042" /></p>
</div>El ejemplo es el mismo que en el apartado anterior.