Front-end, Estándares web y Accesibilidad

El 21 de Noviembre la Universitat Oberta de Catalunya presentaba en Madrid el Grado Multimedia adaptado al Espacio Europeo de Educación Superior.

Podéis ver un video de la presentación del Grado Multimedia a cargo de Ferran Giménez (Director de los estudios).

MOSAIC

En el acto también se aprovecho para presentar la nueva versión de MOSAIC, una conocida publicación online dedicada a las tecnologías y la comunicación multimedia en el que pude colaborar hace unos meses.

Esta revista online surge como una iniciativa de la UOC para reforzar la relación entre el ámbito universitario y el mundo empresarial multimedia. Por otro lado también se presenta como un escaparate de los trabajos desarrollados por los estudiantes del Grado Multimedia y recoge la experiencia del equipo docente y de profesionales del sector a través de artículos, entrevistas y recursos.

Mesa redonda

Por último se celebro una mesa redonda con cinco profesionales.

En la mesa participemos: Antonio Ortiz (co-fundador de WeblogsSL), Tona Monjo (diseñadora de interfaz), Adelardo Sánchez (e-learning), Raquel García (flash y audio) y yo (front-end).
Leer más »

Supongamos que tenemos la siguiente tabla de datos:

En la tabla vemos que hay unos campos de formulario para introducir el número de unidades de cada producto y que no tienen un texto que pueda usarse como LABEL. Ante esta situación he pensado que podría asociar explícitamente el INPUT con un LABEL de cada campo en la columna producto (reproductor mp3, impresora, caja 25 dvd).

<tr>
	<th id="pro1">
		<label for="a_uds">
			Reproductor <dfn title="Es un formato de audio digital"><abbr lang="en" xml:lang="en" title="MPEG-1 Audio Layer 3">MP3</abbr></dfn>
		</label>
	</th>
	<td headers="pro1 tpvp">
		40 &euro;
	</td>
	<td headers="pro1 tuds">
		<input type="text" id="a_uds" name="a_uds" value="1" size="4" />
	</td>
</tr>

Vemos que LABEL e INPUT se encuentran asociados por el identificador “a_uds”.

Aunque esta forma de proceder no sea “mala”, quizás la etiqueta textual queda “lejos” del control de formulario, lo que puede provocar cierta confusión a los usuarios de lectores de pantalla.

La solución más directa en estos casos es usar el atributo TITLE de los controles de formulario.

<tr>
	<th id="pro1">
		Reproductor <dfn title="Es un formato de audio digital"><abbr lang="en" xml:lang="en" title="MPEG-1 Audio Layer 3">MP3</abbr></dfn>
	</th>
	<td headers="pro1 tpvp">
		40 &euro;
	</td>
	<td headers="pro1 tuds">
		<input type="text" title="Número de unidades para: Reproductor mp3" name="a_uds" value="1" size="4" />
	</td>
</tr>

Usando title="Número de unidades para: Reproductor mp3" podemos ayudar a que el usuario sepa como actuar con ese control.

Voy a comentar una técnica de la cual no soy partidario. Pero como ya sabéis, existen veces en las que tus ideas y argumentos no coinciden con los del cliente y te ves obligado a usar este tipo de cosas.

Imagen ilustrativa de enlace que recibe el foco

Cuando hacemos clic en un enlace los navegadores te muestran una línea discontinua para indicar el elemento que ha recibido el foco.
Parece una tontería pero fijaros que los navegadores usan inteligentemente contornos dinámicos (propiedad outline de CSS) para no afectar a la maqueta del diseño web.

¿Como evitar el foco?

Esta línea discontinua podemos eliminarla con una simple regla de CSS donde hacemos uso de la pseudo-classe :focus.

	*:focus { outline: none; }

Este ejemplo es el más global, afectando a todos los elementos. Podemos usar algo más concreto y afectar únicamente a nuestro menú de navegación principal. Por ejemplo:

	#menu a:focus { outline: none; }

¿Y el por que no me gusta eliminar el foco?

Resulta evidente… Pero algunas simples razones:

• Accesibilidad, por ejemplo las persona con poca visión pueden así reconocer adecuadamente en que elemento esta operando.
• Usabilidad, no se enfatiza y refuerza el elemento sobre el que se hace clic.
• Otro ejemplo, ¿qué sucede si quieres navegar con el tabulador…?

José (director de trisquelmedia) nos contó la trayectoria de la empresa, desde su nacimiento hasta hoy.

Sus comienzos

José llevaba 10 años en acuicultura (felizmente recogiendo ostras), ahí es na… Pero se da cuenta de que la empresa no tiene cabida y va a cerrar, así que nos cuenta que se ha convertido en emprendedor por necesidad.
Sobre esto hago una reflexión personal: La inmensa mayoría de gente en edad de trabajar tiende a pensar en “buscar trabajo” e invertir una cantidad ingente de tiempo en ello. Pero parece que no tiene cabida el pensar “si no me dan trabajo, me lo creo yo mismo”. José es justo lo que ha hecho.

Leer más »

Hace casi un año hablaba sobre un posible problema de usabilidad y accesibilidad en el formulario de inicio de sesión que tiene Facebook.

Desde entonces han mejorado un poquito la accesibilidad, aunque siguen sin usar la etiqueta label para el campo de Email de inicio de sesión. En su lugar han puesto los atributos title y value. El problema es que algunas ayudas asistivas pueden no interpretar el atributo title, por lo que esta solución no sería suficiente.

Respecto a la usabilidad puede ser debatida, pero el hecho de perder (lo que tienes que rellenar en ese campo) cuando haces clic en el, me parece un error. Eso si, visualmente y a nivel de interacción queda chulisimo.

Hoy, Kus (de uninstallme.com) me comenta:

Acabo de encontrar esto http://www.csskarma.com/lab/slidinglabels/ y me he acordado de este post. No lo he analizado a fondo, pero me ha parecido una buena idea.

Y tanto que es buena idea, la accesibilidad es impecable. Se usa JavaScript como un complemento no intrusivo que se encarga de realizar el efecto y la transición del label. Solo le veo una pega, que puede resultar cansino, yo lo usaría para formularios muy pequeños, con 2 o 3 inputs.

Un lujo contar con tus aportaciones María

Voy exponer mi opinión sobre los concursos, subastas y demás mercaderías que salpican a todo el mundo creativo.
(Y si, lo sé, me vuelvo a salir de la temática por segunda vez!, prometo que el siguiente post será técnico).

Como mi opinión es idéntica a la de Anibal de la Fuente (de Planilandia.com) y yo no podría haberlo expresado mejor, me voy hacer eco de sus palabras. Espero interpretarlas correctamente

La idea es la siguiente: si quieres ser contratado tienes que participar en un concurso, hacer el trabajo, invertir tus tiempos/recursos y… bueno luego ya veremos qué pasa

Leer más »

Voy a salirme un poco de la temática del blog y hablar sobre lo que significa para mi emprender. Para ello voy fijarme en mi trayectoria que aunque sea pequeña creo que puede aportar algo de significado.

Emprender

• Un sueño nunca fracasa. Años atrás tuve una idea, algunos pensaban que era un sueño dedicarse a la web de esta forma, pero no me importo y fui a perseguir mi propio sueño (eso es emprender).
• Además de la idea también tenia la voluntad e ilusión, y en aquella época hasta la inconsciencia de llevarla acabo (eso es emprender).
• Me hizo falta tener mucha ambición, quien no apunta alto nunca va a llegar. Yo debo ser algo niño y soñador así que esto no me falto (eso es emprender).
• Con el tiempo fui viendo que tenia muchos complejos de niño por superar si quería seguir adelante, así que toco unir el niño soñador con la madurez adulta (eso es emprender).
• También tuve que tener cierta capacidad de sufrimiento y diría que hasta “masoquismo” (eso es emprender).
• Soy consciente que en ultimo termino estoy completamente SOLO y esto me da fuerza (eso es emprender).
• Aunque me gustaría crecer más rápido, soy relativamente constante y voy poco a poco (eso es emprender).
• Algo muy importante es divertirse. Con mi pequeña empresa yo me divierto muchísimo (eso creo que también es emprender).

Leer más »

Va otra de WAI-ARIA!

Recientemente se ha publicado la nueva versión de MOSAIC, una destacada publicación dedicada a las tecnologías y comunicación multimedia, donde tuve la oportunidad de colaborar en el desarrollo (ver ficha del proyecto).

Voy aprovechar este post para compartir como he implementado ARIA en las solapas que aparecen en la home de MOSAIC. De esta forma el contenido de las solapas es más accesible y semántico.

Marcado para un elemento de tipo tabs (solapas)

<div id="tabs">
	<ul>
		<li><a href="#tabs-1" id="tab1">en este número</a></li>
		<li><a href="#tabs-2" id="tab2">lo más leído</a></li>
	</ul>
	<div id="tabs-1" class="tabpanel">
		contenido de la solapa 1 (en este número)
	</div>
	<div id="tabs-2" class="tabpanel">
		contenido de la solapa 2 (lo más leído)
	</div>
</div>

Podemos destacar los siguientes elementos con IDentificadores:

• id="tabs": contenedor general
• id="tab1", id="tab2": cada solapa
• id="tabs-1", id="tabs-2": contenedores de cada solapa

Inyectando ARIA con jQuery en un elemento de tipo tabs

$('#tabs ul').attr('role', 'tablist');
$('#tabs ul li a').attr('role', 'tab');
$('#tabs .tabpanel').attr('role', 'tabpanel');

1. En la primera línea añadimos el landmark tablist a la lista que contiene las solapas.
2. En la segunda línea marcamos cada enlace (solapa) de la lista con el landmark tab.
3. Finalmente en la tercera línea indicamos el contenedor de cada solapa con el landmark tabpanel.

Aunque recientemente ha salido la versión 2.9 de WordPress voy a comentar un importante giro de la versión 2.8 que se vuelca en la accesibilidad de la estructura de contenidos.

Una de las nuevas características de WordPress es la incorporación de los conocidos landmarks de WAI-ARIA, añadidos a través del atributo role al theme por defecto de WordPress. De esta forma se especifican los roles de las diferentes zonas funcionales del blog haciendo que sea más semántico y accesible.

Los landmarks que WordPress ha incluido en su theme por defecto son: main, contentinfo, banner, complementary y navigation.

Sin duda se trata de una gran apuesta de WordPress volcada a mejorar la accesibilidad de sus blogs.

El problema de la validación XHTML W3C

Esta importante actualización que viene integrada en el theme por defecto de Wrodpress plantea un problema de validación. Las especificaciones HTML 4.01 y las DTD no contemplan aún los landmarks de ARIA y esto hace que nuestro blog no pase positivamente el test de validación W3C.

Para solventar este problema podemos eliminar los atributos role del theme e inyectarlos por medio de JavaScript en tiempo de ejecución.

Inyectando landmarks de ARIA con jQuery

$(document).ready(function() {
	$('#content').attr('role', 'main');	
	$('#footer').attr('role', 'contentinfo');
	$('#header').attr('role', 'banner');
	$('#sidebar').attr('role', 'complementary');
        $('#sidebar ul').attr('role', 'navigation');
	$('#searchform').attr('role', 'search');
});

Sencillamente tomamos los elemento a partir de sus IDs (identificadores) e inyectamos la propiedad role con el valor que representa a cada una de las zonas funcionales role="navigation".
La última línea es un añadido que se encarga de inyectar el landmark del clasico buscador de WordPress.

Es seguro que en algún momento todos los que trabajamos con CSS echamos en falta las conocidas variables, elementos esenciales en cualquier lenguaje de programación. Para solventarlo se me ocurren varias formas:

• Evitar las redundancias.
• Usar mejor la descendencia en los selectores.
• Definir las variables como meros comentarios.
• Usar variables de PHP u otro lenguaje dinámico de servidor.
• Decantarnos por CSS 3.

Es probable que existan más formas ¿conoces alguna?, bueno… de momento voy a intentar explicar las mencionadas.

Evitar las redundancias

Ejemplo redundante

h1 { 
	color: #59B0E5; 
	font-size: 1em;
	text-decoration: underline;
}
h2 { 
	color: #59B0E5; 
	font-size: 1.2em; 
	text-decoration: underline;
}

Evitamos redundancias

h1 { font-size: 1em; }
h2 { font-size: 1.2em; }
h1, h2 { 
	color: #59B0E5; 
	text-decoration: underline;
}

El ejemplo es obvio y carece de explicaciones, sin embargo en hojas de estilo complejas la tarea de sintetizar es más complicada.

Usar una mejor la descendencia en los selectores

p em, p strong, p dfn { color: #59B0E5; }

Definir las variables como meros comentarios

En la cabecera del fichero CSS podemos incluir bajo la notación de comentarios las “variables” que entran en juego en la hoja de estilo.

/*
   Primary color: #59B0E5
   Second color: #DA5BA4
*/
 
p { color: #59B0E5; }
...

Así y con ayuda de la típica herramienta “buscar/reemplazar” podemos cambiar fácilmente los valores en todo el documento.

Usar variables de PHP u otro lenguaje dinámico de servidor

Para ello debemos tener en cuenta varias cuestiones.

Extensión .PHP

La primera de ellas es que el fichero sea interpretado como tal, en el caso de PHP podremos llamar a la hoja de estilos style.php.

Enlace al fichero

<link rel="stylesheet" type="text/css" href='/css/style.php' />

Tipo de contenido

Debemos indicar al servidor web el tipo de contenido de nuestro fichero para que sea correctamente interpretado. Esto lo podemos hacer fácilmente en PHP enviando la cabecera con el tipo MIME.

<?php
    header("Content-type: text/css;");
?>

Declarando las variables

<?php
   $colorweb1 = "#59B0E5";
   $colorweb2 = "#DA5BA4";
?>

Usando las variables

En las propias reglas CSS podemos incrustar las llamadas a las variables de PHP.

h1 { color: <?php echo $colorweb1; ?>; }
h2 { color: <?php echo $colorweb2; ?>; }

Decantarnos por CSS 3

Las anteriores soluciones son como “de andar por casa”. CSS 3 nos brinda la posibilidad de usar variables reales de forma “nativa”. El problema es la retrocompatibilidad con algunos navegadores actuales y todas las antiguas versiones

Declarando las variables

@variables { colorweb1: #59B0E5; colorweb2: #DA5BA4; }

Usando las variables

h1 { color: var(colorweb1); }
h2 { color: var(colorweb2); }