Webinar: Accesibilidad web

Un repaso a los webinars que he realizado este año:

Accesibilidad web (7/5/2015)

Ejemplo de audiodescripción (1)

Un ejemplo de vídeo con audiodescripción para ciegos, "PACO" | Ejemplo "Audiodescripción":

Dos mil estudiantes en Aprende accesibilidad web paso a paso

Hace unos días, llegamos a 2000 estudiantes inscritos en el curso Aprende accesibilidad web paso a paso.

¡Gracias a todos ellos por ser parte del curso! ¡Y gracias a todos los que se apuntarán en el futuro!

Historia del compromiso Microsoft con la accesibilidad

Interesante la página Historia del compromiso Microsoft con la accesibilidad, un repaso de las actividades dentro de Microsoft que se han desarrollado para lograr que su software sea accesible.

Aumentar el tamaño del texto

Hace unos días recibí un correo electrónico con la siguiente consulta:

Buenos días:
Necesito un programa para aumentar la letra del ordenador. Me gustaría resolver algunas dudas que tengo, y no sé como puedo contactar contigo vía teléfono.

Y mi respuesta:

Para aumentar el tamaño del texto en el ordenador lo mejor es utilizar las opciones que incluye el propio sistema operativo. Si trabajas con Microsoft Windows depende de la versión que utilices, pero suele estar en Personalizar pantalla o Resolución de pantalla. 

También puedes utilizar un programa llamado "magnificador de pantalla" que aumenta todo lo que aparece en la pantalla del ordenador. Otra vez, Microsoft Windows incluye uno básico, llamado la Lupa. Si necesitas uno mejor te recomiendo ZoomText, pero es de pago.

La accesibilidad de la nueva web de Renfe

Renfe tiene nuevo sitio web. ¡Enhorabuena!

El nuevo sitio web "lo han vendido" a los medios de comunicación y a los clientes como más sencillo, más usable.

¿Y es más accesible?

Bueno, de entrada, dos bofetadas importantes en la cara.

Primero, dos cuadros de edición, Origen y Destino, sin una etiqueta asociada. Si se revisa el código HTML se descubre que sí que han definido las etiquetas, pero no están correctamente asociadas a los cuadros de edición.

Por otro lado, se han olvidado de los usuarios que utilizan el teclado para navegar por una página web, ya que la mayoría de los elementos de interacción de la página (enlaces, cuadros de edición y botones) no se resaltan cuando reciben el foco.

Renfe cambia su página web

Hace pocos días Renfe renovó su sitio web. Lo podemos leer en el blog de Renfe, Renfe.com: más fácil, más claro, y también en varias noticias:

• Renfe, por fin, mejora su web (El Mundo)
• Renfe rediseña su web para dejar de ser "la peor página española" (El Confidencial)

Según la nota publicada en el blog de Renfe:

Renovamos la home de renfe.com y estrenamos un proceso de compra más ágil y cómodo, con más claridad para elegir los servicios asociados al viaje y el mejor precio disponible. Todo en tres pasos. Comentamos los puntos clave del nuevo esquema en una web que se adapta a cualquier pantalla y que ya recibe cerca del 50% de las visitas vía dispositivos móviles. 

Pues la verdad, para una web que recibe el 50% del tráfico desde dispositivos móviles han tardado bastante. Ahora la web tiene un diseño adaptativo (responsive web design):

¿Y qué pasa con la accesibilidad? Mañana lo sabremos...

Por cierto, en el blog se han lucido con las imágenes, tienen un problema con el acceso HTTP/HTTPS y las imágenes no se cargan por un problema de seguridad:

Un ejemplo de descripción larga en la web de Renfe

La web de Renfe no ha sido un buen ejemplo de sitio web accesible, sino todo lo contrario. Por eso me ha parecido curioso encontrar este ejemplo de uso del atributo longdesc.

En la página Organigrama hay un gráfico:

Este gráfico tiene el atributo longdesc, su destino es:

http://www.renfe.com/empresa/organizacion/longDescOrganigrama.html

Etiquetar una lista para que sea más significativa

Muy interesante la propuesta de usar aria-labelledby para darle contexto a una lista: Use aria-labelledby to provide context to unordered lists.

En el siguiente vídeo se muestra lo que se logra:

Otro ejemplo de descripción larga (longdesc)

El cómic número 72 de CSSquirrel incluye el atributo longdesc. La URL del longdesc apunta a la página Comic Transcript for CSSquirrel #72 Alone in the Pitch Black Dark.

En realidad, en comic update: alone in the pitch black dark se explica que este cómic es en respuesta a la eliminación del atributo longdesc de la especificación de HTML5.

Consejos para mejorar la accesibilidad web

Hace unos días se publicó el artículo Consejos para mejorar la accesibilidad web, mi novena contribución al Observatorio de la Accesibilidad de la Confederación Española de Personas con Discapacidad Física y Orgánica (COCEMFE).

Monumento en Atocha por las víctimas de la web de Renfe

Bueno, es una noticia broma de El Mundo Today, y tal como están las cosas últimamente, hacer bromas y repetir bromas se está convirtiendo en un posible delito, pero no creo que me persigan por un simple enlace: Construyen un monumento en Atocha por las víctimas de la web de Renfe.

Y mientras tanto, la web de Renfe sigue siendo un ejemplo de lo que no se debe hacer.

Por ejemplo, recordemos los problemas con los nombres de las ciudades:



Por ejemplo, recordemos el despropósito con los nombres de las estaciones:



Que también afecta a Adif:



O los problemas con las fechas:



Y los problemas con el cambio de idioma:



Sin olvidar lo más importante, lo graves problemas de accesibilidad:



Sí, algunos de esos problemas ya han sido resueltos, pero otros todavía persisten y también han aparecido problemas nuevos.

Ejemplo de descripción larga (longdesc)

En Example for Checkpoint 1.1a se muestra un ejemplo de imagen con descripción larga con longdesc.

El atributo longdesc se puede mostrar y activar en los navegadores web de diferentes formas.

En Mozilla Firefox se ha añadido recientemente la opción "Ver descripción" que permite navegar a la página web con la descripción larga:

En Google Chrome es necesario instalar la extensión oficial Longdesc:

Al navegar a la página con la descripción larga se muestra otra página web:

La accesibilidad no sólo beneficia a las personas con discapacidad

El artículo Accesibilidad, no sólo beneficia a las personas con discapacidad habla de la accesibilidad del medio físico, de los edificios, pero la idea general se puede aplicar también a la accesibilidad web.

En el artículo se incluyen unos ejemplos que suelo utilizar para explicar que la accesibilidad no sólo beneficia a las personas con discapacidad:

Lo mismo que requiere una persona en silla de ruedas para circular y transitar con seguridad es lo que requiere un hombre o una mujer que llevan a un bebé en una carriola; lo mismo que hace segura una vialidad para alguien que usa muletas también lo hace para una persona que usa zapatos de tacón o alguien de edad avanzada”, por ello el también miembro de Libre Acceso AC plantea estos beneficios en la segunda edición del libro Accesibilidad. Personas con discapacidad y diseño arquitectónico.

Bookmarklets para evaluar la accesibilidad web

En Accessibility Bookmarklets hay una recuperación de bookmarklets (o favlets) que se pueden emplear para analizar la accesibilidad de una página web.

El siguiente vídeo explica su uso:

ATAG 2.0

Authoring Tool Accessibility Guidelines (ATAG) 2.0 fue publicado como recomendación el pasado 24 de septiembre de 2015.

ATAG tiene como objetivo proporcionar pautas para que las herramientas de autor de contenido web sean más accesibles, tanto en su propio interfaz para que sean usadas por las personas con discapacidad, como en el contenido que generan para que sea accesible.

Comienza la extensión de WCAG 2.0

Web Content Accessibility Guidelines (WCAG) 2.0, las pautas que ayudan a crear contenido web accesible son de diciembre de 2008 y se están quedando un poco viejas. Han aparecido nuevas tecnologías y ahora los usuarios acceden a la Web e interactuan con la Web de formas muy distintas a como lo hacían hace casi 10 años. El W3C lo sabe y ya está trabajando en actualizarlas. Sin embargo, la solución no va a ser crear una nueva recomendación, sino proponer un marco para poder extender la versión actual: Work Begins on Extension to WCAG 2.0.

En este anuncio podemos leer:

New technologies on the horizon and the rapid evolution of the underlying technologies for user interaction on the Web are likely to continue to drive the need for new guidance. 

To address these needs, the WCAG Working Group has begun to develop a framework for WCAG 2.0 extensions. These would be separate guideline documents, to increase the amount of coverage on particular accessibility needs. Authors and policy-makers would be able to choose to meet the guidelines with one or more extensions, which inherently meet the base WCAG 2.0 guidelines, while organizations that have policies built around WCAG 2.0 alone would not be impacted by the extensions.

Asistente virtual Jarvis

Un alumno me ha enseñado Jarvis, un asistente virtual inspirado por las películas de Iron Man. No lo he probado, sólo he visto un vídeo de demostración:



Parece que es un proyecto personal, no un producto comercial. No sé si estará a la altura de Dragon NaturallySpeaking, pero ya se sabe, a caballo regalado no le mires los dientes.

6º Congreso Nacional CENTAC de Tecnologías de la Accesibilidad

Los próximos 5 y 6 de noviembre se organiza el 6º Congreso Nacional CENTAC de Tecnologías de la Accesibilidad. El congreso tendrá lugar en el Palacio Euskalduna de Bilbao. Este congreso se anuncia como "el mayor encuentro de tecnologías y accesibilidad de toda España".

Complementos para Mozilla Firefox

En Firefox Extensions de Stanford Online Accessibility Program encontramos estos complementos:

Tenon Check

Allows you to check the currently loaded tab against the tenon.io accessibility testing framework.

Web Developer Toolbar

This is a helpful tool to add to your arsenal. Developed by Chris Pederick, this extension to Mozilla / Firefox provides a comprehensive toolbar for running quick tests on pretty much everything.
Information about using the Web Developer Toolbar

Headings Map Add-on for Firefox

The Headings Map extension permits you to easily see and assess how headings are used on a page so that you can be sure they are being used to convey meaningful structure.

WAVE Toolbar

The WAVE Firefox toolbar provides a mechanism for running WAVE reports directly within Firefox. Because the toolbar runs reports entirely within your web browser, no information is sent to the WAVE server. This ensures 100% private and secure accessibility reporting. The toolbar can check intranet, password-protected, dynamically generated, or sensitive web pages. Also, because the WAVE toolbar evaluates the rendered version of your page, locally displayed styles and dynamically-generated content from scripts or AJAX can be evaluated.

Accessibility Firebug Wiki

If you already use Firebug, you may find this accessibility extension to be helpful since you will be able to incorporate it into your current work environment. Skimming through the Wiki documentation will give you a sense of how it works, before you install it.

AInspector Sidebar

AInspector Sidebar evaluates the accessibility compliance of web pages based on WCAG 2.0 requirements using OpenAjax Alliance rulesets. It organizes the evaluation results by Rule Categories and WCAG Guidelines.

Worldspace FireEyes

Worldspace FireEyes is a web accessibility tool that ensures both static and dynamic content within a web portfolio are compliant with standards such as Section 508, WCAG 1.0, and WCAG 2.0.

Juicy Studio Accessibility Toolbar

This Toolbar contains both a Color Contrast evaluator and a Complex Table Inspector. Right-click functionality allows for reporting of these issues.

Tanaguru Contrast-Finder

This addon allows you to select colors on a page and check contrast.

WCAG Contrast Checker

This addon allows you to enter HEX or RGB foreground and background values to check contrast.

Firefox Landmark Extension

The Firefox Landmark Extension, currently hosted on GitHub, will enable you to see whether, and how, ARIA landmarks have been implemented on a page. Using landmarks correctly will help screen reader users (and perhaps users of other assistive technologies, in the future), navigate your site consistently and effectively.

HTML Validator (based on Tidy)

HTML Validator is a Mozilla extension that adds HTML validation to Firefox and Mozilla. The number of errors of an HTML page is seen on the form of an icon in the status bar when browsing. You see the details of the errors when looking at the HTML source of the page. You can "view source" to see errors highlighted, and you can use Tidy to fix them.

Mouseless Browsing

Mouseless Browsing (MLB) means id-based browsing. The major goal of this extension is to enable browsing only by using the numpad keys. Mouseless browsing is based on marking all links, form elements and frames with ids. You can then trigger an action (e.g. following the link) by simply entering the id and depending on the configuration confirming it by pressing Enter.

Longdesc

Adds "View Image Longdesc: ..." to the image context menu (obviously only if the image element does have a longdesc attribute set).

Screen reader Simulator

"This addon allows you to activate Firefox's integrated mobile screen reader on desktop browsers. You can test web content and see how a blind user would interact with an app if they accessed it on a mobile browser." It does not provide all of the functionality you could obtain by testing with computer-based screen readers, such as NVDA (free for the PC) or VoiceOver (free for the Mac), but it can give you a sense of how your site might work.