AxsJAX añade accesibilidad según lo definido por la W3C ARIA, siendo necesarios los siguientes requisitos:

• Un navegador como Firefox 2.0 que soporte la W3C ARIA.
• Tecnologías que respondan correctamente a las mejoras de accesibilidad añadidas por la W3C ARIA.
• Alguna de las mejoras añadidas por AxsJAX dependen del soporte para las live regions, una característica que permite a las tecnologías como los screen readers tratar correctamente con actualizaciones asíncronas de partes de la página web.

El framework AxsJAX puede añadir accesibilidad a aplicaciones Web 2.0 existentes mediante las siguientes técnicas:

• Como un bookmarklet.
• Usando Greasemonkey.
• Usando Fire Vox.

AsxJax

Las críticas siempre nos pueden ayudar a mejorar y esperemos que al menos tomen en cuenta estos puntos para la revisión final de la WCAG 2.0.

Las críticas están agrupadas según los diferentes puntos de la WCAG 2.0:

• Proporciona alternativas equivalentes para los sonidos y los vídeos.
• No dependas del color únicamente.
• Usa las etiquetas y los estilos correctamente.
• Usa el lenguaje natural de forma clara.
• No uses tablas para layouts.
• Cuidado con el uso de las nuevas tecnologías.
• Cuidado con los contenidos que cambian con el tiempo (parpadeos, ...).
• Diseña con independencia del dispositivo.
• Usa soluciones intermedias.
• Usa las guías y las tecnologías de la W3C.
• Ofrece información orientativa y del contexto.

WCAG Samurai Errata for Web Content Accessibility Guidelines (WCAG) 1.0

Cambio de contexto cuando se quita el foco a un elemento en un formulario

Este error ocurre cuando un elemento de un formulario pierde el foco y cambia el contexto de la página, por ejemplo debido a que se hace un submit del formulario.

Obtener el foco de un elemento con el teclado y no poder salir usando el teclado

Este fallo no es demasiado frecuente, pero se da cuando navegando mediante el teclado, entramos en el contenido de un elemento (por ejemplo un plugin que nos muestra un formato específico como SVG) y no podemos volver al contenido principal, o salir de este elemento usando el teclado.

Tener un time-out para la sesión sin ofrecer la posibilidad de guardar la información para recuperarla cuando re-auntentiquemos

Muchos servicios web necesitan autenticación y suelen disponer de un sistema de time-out para finalizar la sesión cuando ha habido un tiempo largo de espera sin actividad. Personas con discapacidad pueden necesitar más tiempo de lo normal para realizar una acción (por ejemplo rellenar un formulario), si la sesión le finaliza, sin la posibilidad de recuperar el estado en el que se estaba antes de finalizar la sesión, la persona deberá volver a empezar de nuevo, por lo que es posible que tampoco pueda finalizar la acción.

Texto alternativo no representa correctamente el texto original ya que este muestra información debido a diferencia de colores

Supongamos que tenemos una gráfica de barras en las que se muestra la población masculina y femenina según los paises de una región. Para distinguir qué datos pertenecen a uno u otro género, se muestra usando dos colores: azul hombres, rojo mujeres. El texto alternativo de esa imagen suele indicar las cantidades, pero no a qué genero pertenece.

Más información

• F9: Failure of SC 3.2.5 due to changing the context when the user removes focus from a form element
• F10: Failure of SC 2.1.1 and Conformance Requirement 6 due to combining multiple content formats in a way that traps users inside one format type
• F12: Failure of SC 2.2.6 due to having a session time limit without a mechanism for saving user's input and re-establishing that information upon re-authentication
• F13: Failure of SC 1.4.1 due to having a text alternative that does not include information that is conveyed by color differences in the image

Mostrar imágenes con información importante mediante estilos

Se trata de usar una imagen que contiene información (por ejemplo para los enlaces del menú) y mostrarla como fondo de un elemento y que no haya un texto que indique el contenido de la imagen.

Una solución es escribir el texto pero no hacerlo visible, para ello usaremos la propiedad text-ident, si le damos un valor negativo elevado el texto desaparecerá por la izquierda. Por ejemplo, tenemos una imagen titulo.png que tiene el título del blog con un diseño especial, lógicamente queremos que se vea así por temas de diseño e imagen. Ahora bien, si solo mostramos la imagen, no somos capaces de leer el contenido de esta. Por ello tendremos que hacer lo siguiente para que el texto aparezca sin que haya estilos y con estilos solo aparezca la imagen:

h1 {
background: url(titulo.png);
width: 200px;
height: 100px;
text-indent: -10000px;
}

<h1>Título</h1>

Usar el estilo blink sin el mecanismo para parar el parpadeo

Esta es corta, no uses jamás text-decoration: blink. Y si por un casual no te queda otra posibilidad que usarlo, crea un script que pare el parpadeo a los 3 segundos.

Usar un applet o un flash que parpadee sin el mecanismo para pararlos

Lo mismo que el punto anterior, pero enfocado a applets y a animaciones Flash.

Usar subtítulos que omiten parte del diálogo o sonidos importantes

Si vas a ofrecer un sonido, una conversación y no muestras los subtítulos con todo el contenido (conversación y sonidos destacados), no se trata de un buen subtítulo y puede haber información importante que se escape.

Más información

• F3: Failure of SC 1.1.1 due to using CSS to include images that convey important information
• F4: Failure of SC 2.2.2 due to using text-decoration:blink without a mechanism to stop it in less than three seconds
• F7: Failure of SC 2.2.2 due to an object or applet, such as Java or Flash, that has blinking content without a mechanism to pause the content that blinks for more than three seconds
• F8: Failure of SC 1.2.1 due to captions omitting some dialogue or important sound effects

Error 1: modificar el significado del contenido debido al posicionamiento mediante CSS

Se trata de cambiar el significado semántico de una etiqueta, modificando su posicionamiento mediante CSS. Por ejemplo, si queremos crearnos una lista de elementos:

• Elemento 1
  • Elemento 1.1
  • Elemento 1.2
  • Elemento 1.3
• Elemento 2
  • Elemento 2.1
  • Elemento 2.2

El fallo consiste en usar etiquetas no destinadas a ese sentido, cambiarle los estilos y representarlas como queremos. Por ejemplo podemos usar span para representar cada elemento y disponerlos en la posición que nos conviene:

<span class="cab1">Elemento 1</span>
<span class="cab2">Elemento 2</span>
<span class="ele1">Elemento 1.1</span>
<span class="ele2">Elemento 2.1</span>
<span class="ele3">Elemento 1.2</span>
<span class="ele4">Elemento 2.3</span>

Y con los estilos siguientes:

.cab1 {
    position: absolute;
    top: 0px;
    left: 0px;
  }
  .cab2 {
    position: absolute;
    top: 0px;
    left: 200px;
  }
  .ele1 {
    position: absolute;
    top: 20px;
    left: 0px;
  }
  .ele2 {
    position: absolute;
    top: 20px;
    left: 200px;
  }
  .ele3 {
    position: absolute;
    top: 40px;
    left: 0px;
  }
  .ele4 {
    position: absolute;
    top: 40px;
    left: 200px;
  }

obtendríamos el mismo resultado visual, pero si quitaramos los estilos obtendríamos lo siguiente:

Elemento 1 Elemento 2 Elemento 1.1 Elemento 2.1 Elemento 1.2 Elemento 2.3

lo cual no tendría mucho sentido.

Error 2: modificar el aspecto del texto para mostrar algo que ya representa una etiqueta

Existen varias etiquetas de texto que tiene diferentes funcionalidades, pero aún así es típico encontrarse textos con sus estilos modificados para mostrar el resultado de una etiqueta ya existente. Un ejemplo muy común es este:

<span class="negrita">Título</span>

.negrita {
font-weight: bold;
}

Lo correcto sería usar la etiqueta strong.

Más información

• F1: Failure of SC 1.3.2 due to changing the meaning of content by positioning information with CSS
• F2: Failure of SC 1.3.1 due to using CSS to create variations in presentation of text that conveys information without also using the appropriate markup or text

Este documento sufrió críticas y parece que no han hecho oídos sordos a los comentarios de la comunidad y han actualizado la versión de este documento.

Las secciones del documento son las siguientes:

• Introducción.
• Guías: perceptibilidad, operabilidad, comprensión y robustez.
• Conformidad: soporte a la accesibilidad por tecnologías web.

Web Content Accessibility Guidelines 2.0

Vía / 456 Barea Street

Estos son 5 muy buenos ejemplos de ello:

• Enlaces externos: modificas el texto "(enlace externo)" incluyéndolo en un span y después lo que haces es modificar el estilo para que muestre un icono (diferente dependiendo de si es linked, visited o hover) y el texto lo haces desaparecer de la parte visible de la pantalla.
• Sigue leyendo: el texto "Sigue leyendo sobre ..." se modifica, haciendo que solo aparezca "Sigue leyendo" y el resto del texto aparece como un popup mediante posición absoluta y jugando con el hover.
• Texto variable: al igual que ya contamos en Sentido Web, usando distintas hojas de estilo y accediendo a ellas mediante Javascript.
• Pestañas con imágenes: se crea un menú de pestañas con listas no ordenadas y se cambia el estilo para que no tengan formato de bloque, los enlaces están formados por imágenes y estas cambian según el hover.
• Formularios: dos buenos ejemplos de formularios, uno de ellos muy bien tabulado y otro en tres columnas.

5 Accessible and pretty CSS tips

Vía / dzone

Algo que también me ha llamado mucho la atención es que ofrece la posibilidad de ver los errores detectados en la propia página, incluso cuando se trata de capas ocultas, facilitando así la localización de los errores, y por qué no, entender qué es lo que está mal hecho.

En la misma página nos explican los errores que detecta y cómo solucionarlos.

También es curiosa la aplicación online que comprueba el script de Google Analytics que contiene la página.

Truwex Online

Vía / 456 Barea Street

Crear controles que sustituyan los ya existentes puede darnos problemas de accesibilidad, salvo en este caso (bueno, y supongo que en otros), ya que lo que hace este script es aprovechar la funcionalidad de las etiquetas label para que el funcionamiento recaiga sobre estas etiquetas y no sobre las checkbox o los radio.

El script buscará los inputs radio y checkbox y los ocultará y cambiará el estilo de las label asociadas para que el funcionamiento sea el mismo.

ARC - Adam’s Radio/Checkbox customisation

Vía / Infected-FX

Entre las herramientas tenemos un generador de tablas, de formularios (con o sin tablas), de pop-ups y otros más. A parte, nos ofrece una lista de aplicaciones generales, no centradas en la accesibilidad, pero que también serán de gran ayuda: generador de capas o de listados, un script para escapar código HTML para incluirlo en nuestras páginas, ...

Accessibility Tools & Wizards

Sin embargo en Juicy Studio abren una pequeña brecha aprovechando el buffer virtual de JAWS, una de los lectores de pantalla más utilizados por los usuarios con problemas de visión.

El buffer virtual es utilizado por los lectores de pantalla para permitir a sus usuarios interactuar con el contenido de la web. En este artículo explican como un desarrollador web pueden desarrollar aplicaciones AJAX que actualizan este buffer sin ninguna interacción por parte del usuario.

Te puedes preguntar por qué vas a querer detectar el cambio de tipo de letra. Si te interesa tener un sitio accesible a gente con discapacidades, pues es buena idea que pienses en ello, ya que suele ser algo que pueden hacer con frecuencia.

Además de detectar ese cambio, puede ser necesario realizar alguna acción. Por ejemplo, si usamos una imagen para un botón, si cambiamos el tamaño de la letra, la imagen no cambia, por lo que el botón quedará demasiado pequeño para el resto del texto, ¿solución?, si hay cambio de tamaño de letra, sustituimos la imagen por un elemento input botón.

Al principio decía que la solución es sencilla, lo cual la hace aún mejor. Se trata de crear una capa que contenga un espacio dentro y que esté oculta. Se guarda el tamaño de la capa y cada cierto tiempo se detecta si ha habido un cambio en este tamaño, si es así, se ha producido un cambio en el tamaño de la letra.

Text-Resize Detection
Demo
Código y ejemplos

Technorati microformats search

Vía / Download Squad

Leyendo esta entrada sobre el uso de botones para cambiar el tipo de letra de forma dinámica, se nos ha ocurrido contar cómo poder hacerlo.

Se puede hacer de varias formas: incrementando o decrementando el tamaño de letra según se pulse en los botones de aumentar o reducir el tipo de letra, o de forma fija, aumentando el tamaño de la letra y disminuyéndolo, pero solo a unos tamaños prefijados.

Este efecto ha sido testeado en IE6 y en Firefox 1.5 bajo Windows XP, en Opera es posible que no funcione debido a un bug que lleva arrastrando bastante tiempo.