Calendario accesible en javascript (innecesario pero útil)

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:

• Que sea accesible y no intrusivo. Evidentemente, en ausencia de soporte para javascript no se ofrece la opción de desplegar el calendario, pero, si hay soporte… ¿por qué no hacer que el contenido generado sea accesible y utilizable?
• Que sea fácil de implementar y utilizar. He buscado una forma tal los programadores que deseen implementarlo en sus páginas web no requieran de introducir código adicional. Al igual que en CSS se utilizan diversos tipos de selectores (de elementos, id, clases,…) para asociar estilos a las diferentes partes de nuestros documentos, ¿por qué no utilizar lo mismo para asociar comportamientos?

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:

• Cargar calendario (requerido): fecha
• Fechas previas a hoy: prev
• Fechas posteriores a hoy: post
• Rango de años: rangX (siendo X el número de años)
• No se incluye el día actual: todnact

Ventajas

Entre las ventajas que se le pueden atribuir tenemos:

• Fácil de usar e implementar.
• No es intrusivo.
• El código y el contenido que se genera es accesible (marcado, organización, contenido,…) y es utilizable mediante el uso de ayudas técnicas (lector de pantalla,…). En este punto se ha tenido en cuenta en qué lugar recae el foco tanto al mostrarse como durante el funcionamiento y al desaparecer. Así, cuando se muestra, el foco recae directamente sobre el selector de años, siguiendo un orden lógico al tabular desde él, y cuando se cierra el calendario (mediante el enlace de cierre o tras haber seleccionado una fecha) el foco recae sobre el campo de texto al que se le había asociado.
• Se facilita la navegación por el mismo independientemente del dispositivo. Se puede navegar utilizando cualquiera de los dispositivos con los que podamos navegar por la web.
• Sus parámetros son fácilmente configurables y su llamada muy simple (mediante el uso de nombres de clase).
• El idioma lo toma directamente del documento padre, pudiendo añadir traducciones nuevas al código. En el caso de no estar declarado el idimoa en el documento (cosa que no debe ocurrir), el español será el que se utilice por defecto. Actualmente, además del español incluye el inglés. Adicionalmente se ha hecho que reconozca si es inglés americano, no porque vaya a cambiar el contenido, sino para cambiar la disposición de los días de la semana (el domingo se coloca primero).
• Los estilos aplicados al calendario se incluyen mediante una CSS enlazada por medio del script, con lo que en ausencia de soporte para este, se optimiza la descarga del documento al no llamarse a dicha hoja de estilos.
• Se han incluido clases de tal manera que se puedan aplicar estilos sobre cualquiera de las celdas de la tabla (días activos, días no activos, día actual), así como estilos específicos para los sábados o domingos.

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?