Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Desarrollo web que contiene a Accesibilidad que contiene a Google Maps: accesibilidad de teclado y alternativa en ausencia de Javascript

Datos de búsqueda

Google Maps: accesibilidad de teclado y alternativa en ausencia de Javascript

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&amp;zoom=16&amp;size=600x400&amp;maptype=roadmap&amp;markers=color:red|Vía de Dublín 7, Madrid 28042&amp;sensor=false&amp;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.

Enlaces relacionados

Comentarios del artículo

Los comentarios están cerrados.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Hay 2 comentarios a “Google Maps: accesibilidad de teclado y alternativa en ausencia de Javascript”

Blog de Hardware » Blog Archive » Google Maps: accesibilidad de teclado y alternativa en ausencia de … dice:

Fecha de comentario: 2010/02/10 14:26

[…] View original post here: Google Maps: accesibilidad de teclado y alternativa en ausencia de … […]

Rubén dice:

Fecha de comentario: 2013/10/31 11:52

Funciona perfectamente. En el caso de los marcadores, ¿Cómo se podría hacer que también recibieran el foco, por ejemplo para abrir su infoWindow mediante el teclado?
Muchas gracias.

Información del sitio