Niquelao - Accesibilidad

Calendario accesible en javascript (innecesario pero útil)

11 de February, 2007 por Rumoroso

En los campos de formulario en los que se tiene que introducir una fecha, de cara a mejorar la experiencia de usuario, y a la par que se aumenta el control en el formato de los datos, se puede incluir un calendario mediante javascript. Lo se, palabra maldita, aunque si se hace con cuidado y control, no tiene por qué tener implicaciones negativas en cuanto a estándares y accesibilidad.

Objetivos

En principio he establecido dos objetivos principales, que más que objetivos han sido pautas de trabajo a la hora de construirlo:

Además, como objetivos secundarios están: optimizar, generalizar, internacionalizar,… (siendo realista, tuve que eliminar los objetivos de ligar y el de ganar dinero.)

El ejemplo

Para comprobar su funcionamiento, podéis acceder a un ejemplo y descargarlo.

Incluyéndolo en nuestros documentos

La inclusión del calendario en nuestro documento es tan sencillo como incluir el elemento script correspondiente en el head:

<script type="text/javascript" src="acc_calendar/acc_calendar.js"></script>

El calendario se cargará para cualquier campo de texto que lleve incluida la clase “fecha“. El formato de la fecha se introduce en la primera línea del script. Así, si por ejemplo se desea que la fecha siga el orden día/mes/año, no incluyendo un 0 delante del día cuando esté formada por un dígito, e incluyéndolo en el mes cuando sea necesario:

var formato = 'd/mm/y';

Para conseguir mostrar el calendario junto a un campo de texto, este deberá llevar la clase “fecha”. Además, todos los posibles parámetros se introducen como clases. La lista completa es la siguiente:

Ventajas

Entre las ventajas que se le pueden atribuir tenemos:

Código generado

A continuación incluyo parte del código generado por el script. Como se puede observar (y como ya he dicho) se incluyen nombres de clase e id para poder controlar la maquetación mediante la hoja de estilos.

<a title="Desplegar el calendario para seleccionar una fecha" href="#" class="enl_cal">
	<img alt="" src="acc_calendar/acc_calendar.gif" />
</a>
<div id="calendar">
	<label id="label_year" for="nav_year_select">Año
		<select id="nav_year_select">
			...
			<option>1987</option>
			<option selected="selected">1988</option>
			...
		</select>
	</label>
	<label id="label_Meses" for="nav_mes_select">Mes
		<select id="nav_mes_select">
			<option selected="selected">Enero</option>
			<option>Febrero</option>
			<option>Marzo</option>
			...
		</select>
	</label>
	<table summary="Calendario con los días disponibles de Enero de 2007" id="calendario">
		<caption id="caption">Enero 2007</caption>
		<colgroup span="5"></colgroup>
		<colgroup span="2"></colgroup>
		<thead>
			<tr>
				<th scope="col"><abbr title="Lunes">Lun</abbr></th>
				<th scope="col"><abbr title="Martes">Mar</abbr></th>
				...
			</tr>
		</thead>
		<tbody id="tbody">
			<tr>
				<td class="act">
					<a title="Seleccione esta fecha" href="#">1</a>
				</td>
				<td class="act">
					<a title="Seleccione esta fecha" href="#">2</a>
				</td>
				...
			</tr>
			<tr>
				...
				<td class="inact">24</td>
				<td class="inact">25</td>
				...
			</tr>
		</tbody>
	</table>
	<ul id="nav_mes">
		<li>
			<a href="#">Diciembre</a>
		</li>
		<li class="post">
			<a href="#">Febrero</a>
		</li>
	</ul>
	<ul id="nav_year">
		<li>
			<a href="#" title="Ir al año">2004</a>
		</li>
		<li class="post">
			<a href="#" title="Ir al año">2006</a>
		</li>
	</ul>
	<div id="close_it">
		<a href="#">Cerrar calendario</a>
	</div>
</div>

Conclusión

A modo de cierre… ¿qué se podría decir de este calendario?… pues que “es innecesario… pero útil” y que “no tiene implicaciones negativas en términos de accesibilidad“.

…por cierto ¿qué día es hoy?

Categoría: Accesibilidad, Javascript

9  comentarios

9 comentarios

meneame.net 25 de February de 2007

¿Javascript accesible?…

Este es un caso de calendario hecho en javascript. Al pulsar la imagen aparece el calendario. Lo bueno que tiene es que parece ser accesible y parece respetar los estándares….

juan 16 de March de 2007

esta excelente, pero me surge un error aveces al seleccionar la fecha o pasar los años, y deja de funcionar el IE y en Firefox tambien.

sabes que es?

Rumoroso 16 de March de 2007

Hola Juan. Cuándo dices que deja de funcionar en IE y Firefox ¿te refieres a que deja de mostrarse el calendario o a que al tratar de seleccionar un año o un mes, la selección no se hace? Dime cuál es el caso y el contexto (para ver en qué situaciones ocurre), e incluso, si incluyes un enlace o un fragmento del código mejor.

En principio, échale un vistazo al código que tienes y comprueba si todo está correcto en cuanto a la combinación de clases declarada.

Un saludo.

Victor 20 de August de 2008

No consigo que se ejecute el calendario si lo pongo dentro de las etiquetas de un formulario

Rumoroso 20 de August de 2008

Hola Victor. Necesitaría que me dijeses algo más acerca de la situación. En principio, te aconsejo que revises (aunque sea por alto) los comentarios y respuestas que hay en la página http://www.niquelao.net/acc_calendar-calendario-accesible-en-javascript-innecesario-pero-util/

Allí está mucho más detallado que aquí la forma en que se utiliza el calendario, así como más ejemplos.

Un saludo

Victor 20 de August de 2008

He probado el calendario y funciona muy bien. Es una maravilla y es lo que andaba buscando para mis pruebas de aprendizaje de desarrollo web. El problema me surge cuando lo incorporo entre las etiquetas de un formulario HTML (form). El link que abre el calendario desaparece. Gracias por tu ayuda.

Victor 20 de August de 2008

Hola de nuevo. He seguido tu consejo y he mirado en el enlace propuesto con más información sobre el calendario. He comprobado que si funciona dentro de las etiquetas de un formulario. El problema estaba en que antes del código que despliega el calendario tenía puesta una etiqueta (label) con la leyenda “Seleccione la…”. Con esta label antes no se desplegaba el calendario. Saludos.

Victor 21 de August de 2008

Al incluir el calendario dentro de una etiqueta formulario y a ser enviado (submit) este no pasa el valor que está en la caja de texto de la fecha.

Rumoroso 21 de August de 2008

Comprueba si no envía el contenido del campo o si en realidad no está enviando la variable. El script no interfiere en el envío del formulario, con lo que el problema podría venir de otro lado.

Un saludo

Puedes hacer un seguimiento de los comentarios gracias al feed RSS 2.0. También podrías dejar un comentario, o enviar un trackback desde tu sitio.

Deja tu comentario

Los campos Nombre y Email son obligatorios

...y si quieres incluir un Gravatar.

Añádenos a...

Tags que destacamos en general

Creative Commons License Esta obra está bajo una licencia de Creative Commons.