Contenido

25 reglas para hacer CSS accesibles

9 jul

+ 2

Olga Carreras publica un interesante artículo en el que nos muestra 25 reglas que deberíamos seguir para conseguir que nuestro CSS sea más accesible.

Activar la navegación por teclado en los navegadores de MacOs X

10 jun

+ 1

La gente de 456 Berea St nos muestran como activar la navegación por teclado en los diferentes navegadores disponibles para MacOs X. Al parecer, por defecto esta opción no viene completamente activa lo que hace que la navegación con teclado es parcial e incompleta. De esta forma podremos ponernos en el caso del usuario que no tiene ratón y quiere navegar por nuestra web (por ejemplo :D).

Creando Javascript Accesible

5 jun

+ 1

Via SentidoWeb descubro este interesante tutorial con el que podemos ser conscientes de los problemas que debemos tener en cuenta y solventar a la hora de desarrollar nuestros scripts en Javascript.

Técnicas WCAG 2.0 por Olga Carreras

6 may

+ 1

Olga Carreras responde a 10 de las dudas más habituales sobre accesibilidad. Y es que este año Olga se ha volcado en hacernos mejores desarrolladores web, a las pruebas me remito.

Evalua el nivel de estudios para poder leer tu web

6 feb

+ 3

JuanPe, mi sensei, me muestra por mail txReadability, una curiosa herramienta que analiza tu página web para estimar el nivel de estudios que requiere una persona para leer tu página. Usando un cálculo basado en el número de silabas y las frases de más de 100 palabras obtenemos el Huerta Reading Ease (HRE).

Huerta Reading Ease = 206.84 - (0.60 * P) - (1.02 * F)
P = Número de sílabas por 100 palabras. 
F = Número de frases por 100 palabras.

El cálculo sobre el texto de tu aplicación arrojará un resultado numérico de 0-100 con el que podremos determinar si nuestra página es fácil o dificil de leer.

Calificación (Huerta Reading Ease Score) Descripción de dificultad Nivel estimado de grado de lectura Estándar Internacional de Clasificación de Educación (ISCED)
0 – 30 Muy difícil Graduado de universidad Avanzado
30 – 50 Difícil Grados 13 a 16 Avanzado
50 – 60 Moderadamente difícil Grados 10 a 12 Secundaria alta (últimos años)
60 – 70 Normal Grados 8 a 9 Secundaria baja (primeros años)
70 – 80 Moderadamente fácil Grado 7 Secundaria baja (primer año)
80 – 90 Fácil Grado 6 Primaria
90 – 100 Muy Fácil Grado 5 Primaria
-1

No se pudo calcular la facilidad de lectura porque:

  • no hubo suficientes palabras para analizar; o
  • el contenido no tuvo puntuación de fin de frase

Usamos.es, informes de usabilidad y accesibilidad gratis

5 feb

+ 7

Fran de Mas Que Accesibilidad, me avisa de que por fín, despues de un año dandole vueltas al proyecto, Usamos.es ha visto la luz.

usamoses

Usamos.es es una consultoría de accesibilidad y usabilidad que tiene como meta mejorar las páginas web de instituciones y empresas con el fín de mejorar en acceso a estas y ofrecer un camino más sencillo y eficaz para completar acciones en dichas páginas.

Actualmente los informes automáticos son gratuitos pero este no va a ser el único aliciente de esta aplicación, sinó que periódicamente nos van a tener informados de técnicas, documentos y el estado de los temas que más directamente tocan al usuario.

Visita Usamos.es

Simplemente pregunta: Integración de la accesibilidad en el diseño

9 dic

+ 1

Daniel TorresBurriel nos comenta que  Shawn Lawton publica de forma gratuita llamado “Simplemente pregunta: Integración de la accesibilidad en el diseño“. El título ya es bastante explicito así que si te gusta el diseño y quieres hacer que este sea lo más accesible posible, te recomiendo que lo leas detenidamente.

Atajos de teclado en WordPress

4 nov

+ 5

Esta mañana he visto en AyudaWordpress un artículo traducido de Weblog Tools Collection que a su vez es una mención del codex de WordPress en el que muestran las teclas de acceso rápido (o atajos de teclado) de WordPress 2.7

Yo desde la versión 2.5 (creo que fué la primera con jQuery) uso un marcador que nos muestra todos los accesskey definidas en las páginas de WordPress.

(function() { var salida = 'Teclas rápidas de WordPress\n'; jQuery("*[accesskey]").each(function(x,el){var text = (jQuery(el).val() != '')?jQuery(el).val():jQuery(el).text(); if (text != '') salida += jQuery(el).attr("accesskey") + ' --> ' + text + '\n';});alert(salida);})()

Puedes salvar el marcador directamente desde este enlace.

PD: Este script se encarga de encontrar cualquier accesskey de cualquier página (con jQuery), no solo de WordPress. Si ejecutas el enlace sobre esta página verás las definidas para aNieto2k :D

Crea un motor de busquedas accesibles al estilo Mac OS X

14 jul

+ 6

La influencia de Apple, está muy latente en el desarrollo web y no es para menos, el conjunto de diseño limpio y usable es algo ideal para lo que el desarrollo web moderno intenta conseguir con las páginas web.

Una muestra de ello es este motor de búsqueda desarrollado en Javascript/CSS para emular el “searchbox” del sistema operativo de Apple. He estado mirando el código fuente y no me ha acabado de gustar la idea de usar <span></span> para alojar elementos que deberían ser inputs.

searchbox

Por ese motivo me he tomado la libertad de modificar el CSS y adaptar a jQuery un par de líneas que son realmente las necesarias para dotar este tipo de elementos al aspecto de Mac OS X que queremos darle.

HTML

<form name="form" class="searchbox" action="" method="post">
<p>
    <input type="text" name="s" value="" class="search"/>
    <input type="reset" name="reset" value="Reset" />
    <input type="submit" value="Enviar" />
</p>
</form>

La estructura es, a mi entender, algo más correcta ya que simplemente nos basamos de los elementos HTML que componen un formulario normal. Usando la class searchbox para indicar al javascript que ese formulario va a ser tratado para emular el searchbox de Mac OS X.

En este código, usaremos el botón reset para emular el botón (x) que vemos en la parte derecha del <input /> y la lupa que vemos en la parte izquierda del <input /> será nuestro botón de submit y el que nos llevará a la siguiente página.

CSS

.searchbox .resetButton  {
	background: white url("i/srch_r.gif") no-repeat scroll left top;
	width: 19px;
	height: 19px;
	border:0;
	text-indent:-5000;
	position:absolute;
	margin-left:-18px;
}
.searchbox .delete {
	background: white url("i/srch_r_f2.gif") no-repeat scroll left top;
}

.searchbox .submitButton {
		background: white url('i/srch_l.gif') no-repeat top left;
		width: 19px; height: 19px;
		text-indent:-5000;
		border:0;
		position:absolute;
}

.searchbox input.search {
	height:19px;
	padding-left:10px;
	width:600px;
}

Este código, consigue que nuestro input tenga el aspecto que deseamos, simplemente usamos la class searchbox para cambiar los estilos de los elementos que hay dentro.

Javascript

$.extend({
    searchbox: function() {
        var isSafari = /Apple/.test(navigator.vendor);
        var isOpera = window.opera;
        var input = $("form.searchbox input:text");
        var submit = $("form.searchbox input:submit");

        $("form.searchbox input:reset").each(function(x, el){
                $(el).addClass("resetButton");
                $(el).bind("click", function(){
                        $(this).removeClass("delete");
                });
        });

        $("form.searchbox input:submit").each(function(x, el){ $(el).addClass("submitButton");});

        input.css({
                "height": (isOpera || isSafari)?"13px":"14px",
                "padding-left" : (isOpera || isSafari)?"15px":"10px",
                "outline":"none"
                });
        var corrector = (isOpera || isSafari)?29:21;
        $("input.submitButton").css("margin-left", "-" + input.width() - (corrector) + "px");


        input.bind("keyup", function(){
            if($(this).val() != '') $(this).parent().find("input:reset").addClass("delete");
            else $(this).parent().find("input:reset").removeClass("delete");
        });
    }
});
// Activamos al cargar la página.
$(document).ready(function(){
        $.searchbox();
})

Usando jQuery como base, extendemos las opciones del framework con el método extend() que nos permite definir nuevas opciones de forma fácil y limpia. Esta nueva funcionalidad, nos añade los estilos necesarios para los usuarios que disponen de javascript.

Ventajas

searchbox2

Al necesitar javascript para aplicar los estilos los usuarios que no disponen de ellos ven un formulario compuesto por un <input /> en el que pueden introducir un lo que están buscando y dos botones, uno que nos limpiará el formulario y el botón de submit que nos permite enviar el valor del elemento a nuestra página de resultados. Para ello he usado este gran artículo de Olga Carreras en el que nos muestra las diferentes formas de crear formularios con varios botones.

Problemas

Pese a que he podido probarlo en Firefox 3, Safari y Opera no he podido verlo en Internet Explorer, aunque seguro que falla, el text-indent no le gustaba, así que tendré que testearlo cuando tenga tiempo.

Demo

Podéis ver como se vería en el ejemplo que he montado. Creo que como idea puede valer ;)

Combos dependientes accesibles con PHP y jQuery

27 may

+ 15

En el último proyecto en el que estoy desarrollando en el trabajo he tenido que crear unos combos dependientes, hasta el momento siempre los había hecho con Javascript, usando Ajax para cargar los datos de un combo a otro, pero para este proyecto quería hacerlo un poco más accesible.

Como ya hemos visto en muchos posts, el desarrollar pensando en ser accesibles para todo el mundo es complicado, pero no imposible.

Empecemos

Lo primero que tenemos que hacer es tener claro que es lo que queremos hacer, en el ejemplo, una select de destino que dependerá de una select padre llamada pais.

combos_dependientes_accesibles

Viendo que es lo que necesitamos crear, veamos como podría ser una aproximación al código PHP que necesitamos.

Al código…

Primero vayamos por partes, y como hay que empezar por alguna definamos la estructura en el servidor y ya iremos subiendo.

destino.php

<?php if ($_POST["type"] == "xml")	header ("content-type: text/xml"); ?>
<select id="destino" name="destino">
        <option value="-1">Selecciona una zona</option>
<?php if ($_POST["pais"] == "ES"){ ?>
	<option value="PMI">Palma de Mallorca</option>
	<option value="AGP">Malaga</option>
	<option value="BCN">Barcelona</option>
<?php } else if($_POST["pais"] == "FR") { ?>
	<option value="TOU">Toulousse</option>
	<option value="CHD">Charles de Gaulle</option>
<?php } ?>	
</select>

Este fichero es un ejemplo rápido de un XML bien formado, que a su vez hará de elemento <select /> en nuestro script. La primera línea nos condicionará, más adelante, el formato de salida que usaremos. Ahora veamos en donde lo incrustamos.

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es_ES">
<head>
	<title>Combos dependientes accesibles</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
	<form id="form" method="post" action="<?=$url?>">
		<p class="pais">
		Pais: 
			<select name="pais" id="pais">
				<option value="-1">Selecciona un pais</code>
				<option value="ES">España</code>
				<option value="FR">Francia</code>	
			</select>
		</p>
		<p class="destino">
			<?php echo "Destino: ";
			      include("destino.php"); 
 			?>
		</p>
		<p class="submit">
			<input type="submit" value="Enviar" />
		</p>
	</form>
</body>
</html>

Como vemos, lo incluimos mediante un include normal, que nos generará el HTML necesario para que veamos un <select />.

Si ahora miramos el código resultante, nos encontramos con esto.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es_ES">
<head>
	<title>Combos dependientes accesibles</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
	<form id="form" method="post" action="<?=$url?>">
		<p class="pais">
		Pais: 
			<select name="pais" id="pais">
				<option value="-1">Selecciona un pais</code>
				<option value="ES">España</code>
				<option value="FR">Francia</code>	
			</select>
		</p>
		<p class="destino">
			Destino:
			<select id="destino" name="destino">
				<option value="-1">Selecciona una zona</option>
			</select>
		</p>
		<p class="submit">
			<input type="submit" value="Enviar" />
		</p>
	</form>
</body>
</html>

Como podemos ver, se trata de un HTML normal, sin ningún tipo de secreto. Ahora empezemos a ponerle polvos mágicos para que esata rana se convierta en principe.

Abracadabra…

Para hacer mágia, voy a usar jQuery (principalmente por su simplicidad para el ejemplo) y con él veremos lo fácil que es conseguir unos combos disponibles para todos. Primero hemos de volver a replantearnos los ficheros PHP

<?php	
	$hayPais = false; // No hay pais por defecto
	if (isset($_POST["pais"])) $hayPais = true; //Si hay país
	
	// URL de destino
	$url =  ($hayPais)?"receptor.php":"";	
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es_ES">
<head>
	<title>Combos dependientes accesibles</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
	<form id="form" method="post" action="<?=$url?>">
		<p class="pais">
		Pais: 
			<?php if ($hayPais) : ?>
				<input type="text" name="pais" value="<?=$_POST["pais"]?>" />
			<?php else: ?>
		<select name="pais" id="pais">
			<option value="-1">Selecciona un pais</code>
			<option value="ES">España</code>
			<option value="FR">Francia</code>	
		</select>
		<?php endif;?>
		</p>
		<p class="destino">
			<?php if ($hayPais) {
				echo "Destino: ";
				include("destino.php"); 
			} else { ?>
				<noscript>
					<input type="submit" value="Buscar Destinos" />
				</noscript>
			<?php }	?>
		</p>
		<p class="submit">
			<input type="submit" value="Enviar" />
		</p>
	</form>
</body>
</html>

Vayamos por partes:

<?php	
	$hayPais = false; // No hay pais por defecto
	if (isset($_POST["pais"])) $hayPais = true; //Si hay país
        /*
		Esta versión es más corta, pero menos ilustrativa.
		$hayPais = isset($_POST["pais"]); // ¿Existe $_POST["pais"];
	*/
	
	// URL de destino
	$url =  ($hayPais)?"receptor.php":"";	
?>

Con la variable $hayPais, arrastramos por todo el script un valor Booleano que nos permite conocer si el parámetro $_POST["pais"] existe. De esta forma, las futuras comprobaciones son más sencillas.

Acto seguido, nos encargamos de informar la variable $url, que contendrá la URL a donde ha de ser redirigido el formulario. Esto es simplemente para conseguir submitar al lugar correcto en cada paso.

<?php if ($hayPais) : ?>
	<input type="text" name="pais" value="<?=$_POST["pais"]?>" />
<?php else: ?>
	<select name="pais" id="pais">
		<option value="-1">Selecciona un pais</code>
		<option value="ES">España</code>
		<option value="FR">Francia</code>	
	</select>
<?php endif;?>

Al igual que la comprobación anterior, sabiendo que hemos recibido el parámetro $_POST["pais"], modificamos el <select /> por un elemento <input /> con el valor que hemos pasado previamente. Esto nos servirá para submitar el valor a la página siguiente.

<?php if ($hayPais) {
	echo "Destino: ";
	include("destino.php"); 
} else { ?>
        <noscript>
	<input type="submit" value="Buscar Destinos" />
	</noscript>
<?php }	?>

Aqui es donde está parte de la gracia del script, y curiosamente se llama <noscript />. Como podemos ver, en caso de haber pasado el parámetro $_POST["pais"], cargaremos el fichero destino.php y este ya se encargará de mostrar los datos relacionados al parámetro enviado. En caso de no enviar este parámetro, insertaremos el tag <noscript /> que contendrá un elemento <input type="submit" /> que se encargará de submitar el formulario con el valor necesario para cargar $_POST["pais"].

Hasta ahora, todo bien. Salvo para los que si tenemos Javascript activo. No nos olvidemos que el tag <noscript /> no será mostrado en caso de disponer de Javascript en nuestro navegador. Para ello, debemos extendernos a la siguiente capa, la del javascript.

Mejorando la experiencia del usuario

Como hemos dicho antes, usaremos jQuery para la capa de cliente. Así, que manos a la obra.

<?php	
	$hayPais = false; // No hay pais por defecto
	if (isset($_POST["pais"])) $hayPais = true; //Si hay país
	
	// URL de destino
	$url =  ($hayPais)?"receptor.php":"";	
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es_ES">
<head>
	<title>Combos dependientes accesibles</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			// Creamos elemento destino y lo incrustamos en <p class="destino">
			$("p.destino").append('Destino: <select id="destino" name="destino"><option value="-1">Seleciona un destino</option></select>');

			// Modificamos el action del formulario a la página receptora.
			$("form#form").attr("action", "receptor.php");

			// Definimos la petición de ajax, al fichero destino.php
			$("#pais").bind("change", function() {
			    $.post("destino.php", {pais: $(this).val(), type: "xml"}, function(xml){
			        $("#destino").empty();
			        $(xml).find("option").each(function(x,el) {
			         $("#destino").append('<option value="'+$(el).attr("value")+'">' +$(el).text() + '</option>');
			        });
			    }, "xml");
			});

		});
	</script>
</head>
<body>
	<form id="form" method="post" action="<?=$url?>">
		<p class="pais">
		Pais: 
			<?php if ($hayPais) : ?>
				<input type="text" name="pais" value="<?=$_POST["pais"]?>" />
			<?php else: ?>
		<select name="pais" id="pais">
			<option value="-1">Selecciona un pais</code>
			<option value="ES">España</code>
			<option value="FR">Francia</code>	
		</select>
		<?php endif;?>
		</p>
		<p class="destino">
			<?php if ($hayPais) {
				echo "Destino: ";
				include("destino.php"); 
			} else { ?>
				<noscript>
					<input type="submit" value="Buscar Destinos" />
				</noscript>
			<?php }	?>
		</p>
		<p class="submit">
			<input type="submit" value="Enviar" />
		</p>
	</form>
</body>
</html>

Destripémoslo un poco para entenderlo mejor.

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

Cargamos jQuery para disponer de las ventajas que nos ofrece este framework.

// Creamos elemento destino y lo incrustamos en <p class="destino">
$("p.destino").append('Destino: <select id="destino" name="destino"><option value="-1">Seleciona un destino</option></select>');

Dentro del $(document).ready(... definimos las tareas que ayudarán al usuario. La que vemos arriba se encarga de añadir el <select /> de destinos vacio en el lugar apropiado, pendiente de ser relleneado con la petición ajax.

// Modificamos el action del formulario a la página receptora.
$("form#form").attr("action", "receptor.php");

Modificamos el action del formulario para que la ruta de submit sea la correcta.

// Definimos la petición de ajax, al fichero destino.php
$("#pais").bind("change", function() {
    $.post("destino.php", {pais: $(this).val(), type: "xml"}, function(xml){
      $("#destino").empty();
      $(xml).find("option").each(function(x,el) {
         $("#destino").append('<option value="'+$(el).attr("value")+'">' +$(el).text() + '</option>');
       });
    }, "xml");
});

Con este código, lanzamos una petición a nuestro fichero destino.php con los parámetros pais y type, cargamos con los datos que necesitamos para que al detectar un cambio en el elemento <select id="pais" /> este envie la petición indicando que quiero recibir los datos en XML para luego recorrerlo y pintar las option que necesito para rellenar <select id="destino" />

Resultado

El resultado es una página en la que podemos acceder con dos posibles configuraciones, con Javascript o sin él. En caso de entrar con javascript, todo estará preparado para usarlo y hacer que selección de destino sea mediante Ajax y en un solo paso.

En caso de tener el javascript desactivado, tendremos que realizar un paso más para cargar los datos referentes al destino, pero al final enviaremos los mismo datos a la página siguiente.

Podeis probarlo en esta demo que he montado, solo he podido probar el JS en Firefox, así que si alguien me lo puede probar en otros navegadores se lo agradeceré.

Espero vuestras opiniones, y sugerencias.