El diseño visual, el color y la accesibilidad

En Visual design and colour accessibility se explican los problemas de accesibilidad que puede ocasionar un mal uso del color en el diseño de un página web.

Muy interesantes los problemas que pueden experimentar las personas con ceguera al color (daltonismo):

Se ofrecen cuatro consejos:

1. Design in greyscale
2. Add colour to your design
3. Check your design for contrast
4. Adjust your colours

Currículo de accesibilidad del W3C

En Curriculum for Web Content Accessibility Guidelines 1.0 podemos encontrar un pequeños curso del W3C sobre WCAG 1.0. WCAG 1.0 ya no se debe utilizar, desde el año 2008 está disponible WCAG 2.0, pero para empezar a aprender accesibilidad web es una buena opción.

El curso se puede descargar para utilizarlo de forma local.

Uso de ARIA en HTML

Existen dos documentos sobre el uso de WAI-ARIA en HTML.

Por un lado tenemos Using WAI-ARIA in HTML, que tiene como resumen:

This document is a practical guide for developers on how to add accessibility information to HTML elements using the Accessible Rich Internet Applications specification [WAI-ARIA], which defines a way to make Web content and Web applications more accessible to people with disabilities. This document demonstrates how to use WAI-ARIA in [HTML5], which especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.

Por otro lado tenemos el documento ARIA in HTML que es simplemente un working draft, y que tiene como resumen:

This specification defines the web developer rules (author conformance requirements) for the use of [wai-aria-1.1] attributes on [HTML51] elements. It also defines requirements for Conformance Checking tools.

Herramienta para generar informes de accesibilidad

WCAG-EM Report Tool es una herramienta del W3C para generar informes de análisis de la accesibilidad web.

Emplea el formato empleado en Website Accessibility Conformance Evaluation Methodology (WCAG-EM) 1.0.

Tutoriales sobre accesibilidad web

Hace unos meses, el W3C lanzó un sitio web con tutoriales sobre accesibilidad web: Web Accessibility Tutorials. Por ahora tiene sobre imágenes, tablas y formularios.

Guías de accesibilidad del Gobierno de España

El Observatorio de Accesibilidad del Gobierno de España ofrece un buen conjunto de guías para construir sitios web accesibles.

Por ejemplo, la Guía de cuestiones básicas de accesibilidad para los editores finales de contenidos incluye este índice:

Validación de accesibilidad durante la edición
Inclusión de imágenes
Definición de encabezados o títulos de página
Inclusión de Enlaces
Inclusión de Ficheros Adjuntos
Identificación de listas
Inclusión de tablas de datos
Identificación de citas
Edición del estilo o aspecto visual del documento

Accesibilidad de diagramas

Muy interesante Best practices for accessible diagram design. En el diagrama se tratan los problemas de accesibilidad desde el punto de vista de diferentes discapacidades.

Webinar "Tecnología: cotidianidad y discapacidad"

El Observatorio TIC del Ministerio de Telecomunicaciones y de la Sociedad de la Información organiza el webinar Tecnología: cotidianidad y discapacidad el próximo jueves 24 de septiembre de 2015 a las 10 horas de Ecuador (GMT-5), es decir, las 17 horas en España.

Resultados de la sexta encuesta del WebAIM sobre el uso de lectores de pantalla

Ya se han publicado los resultados de la sexta encuesta del WebAIM sobre el uso de lectores de pantalla que se abrió en julio de 2015: Screen Reader User Survey #6 Results.

La encuesta recibió 2515 respuestas, un número muy alto de respuestas.

Lo más sorprendente de los resultados es el resurgir de dos lectores de pantalla que se creían en vías de extinción, ZoomText y Window-Eyes. La explicación a este resultado se encuentra en The Resurgence of ZoomText and Window-Eyes.

Esta encuesta también confirma la caída en el número de usuarios del lector de pantalla JAWS.

Respecto las preguntas relacionadas con el desarrollo de páginas web accesibles, los resultados no son muy significativos. Por ejemplo, ante la pregunta de con qué frecuencia se usan los landmarks (regiones) para navegar en una página web, no existe un valor determinante, ya que el 22,1% respondió siempre que estuviesen presentes, pero el 17,8% contestó que nunca.

Lo mismo ocurrió con la pregunta respecto el uso de los enlaces "saltar a": un 18,3% respondió que los usa siempre que estén disponibles, mientras que un 14,3% contestó que nunca.

Por último, los resultados de las encuestas anteriores:

• Screen Reader User Survey #5 Results (Enero 2014)
• Screen Reader User Survey #4 Results (Mayo 2012)
• Screen Reader User Survey #3 Results (Diciembre 2010)
• Screen Reader User Survey #2 Results (Octubre 2009)
• Survey of Preferences of Screen Reader Users (Diciembre 2008)

Un vídeo sobre el daltonismo o ceguera al color

Un pequeño vídeo sobre el daltonismo o ceguera al color:

El daltonismo es un defecto genético que ocasiona dificultad para distinguir los colores. La palabra daltonismo proviene del químico y matemático John Dalton que padecía este trastorno. El grado de afectación es muy variable y oscila entre la falta de capacidad para discernir cualquier color (acromatopsia) y un ligero grado de dificultad para distinguir algunos matices de rojo, verde y ocasionalmente azul . A pesar de que la sociedad en general considera que el daltonismo pasa inadvertido en la vida diaria, supone un problema para los afectados en ámbitos tan diversos como: valorar el estado de frescura de determinados alimentos, identificar códigos de colores de planos o elegir determinadas profesiones para las que es preciso superar un reconocimiento médico que implica identificar correctamente los colores (militar de carrera, piloto, capitán de marina mercante, policía, etc.). Puede detectarse mediante test visuales específicos como las cartas de Ishihara.

Soporte de las características de accesibilidad de HTML5

HTML5 accessibility muestra información sobre el soporte de las características de accesibilidad que posee HTML5. Esta página web se actualiza de forma periódica.

Las pautas de accesibilidad web del W3C: Robusto

Ayer se publicó el artículo Las pautas de accesibilidad web del W3C: Robusto, mi octava contribución al Observatorio de la Accesibilidad de la Confederación Española de Personas con Discapacidad Física y Orgánica (COCEMFE).

Complementos y herramientas para Internet Explorer y Windows

En Internet Explorer and Windows de Stanford Online Accessibility Program encontramos estos complementos y herramientas:

ACTF - aDesigner

ADesigner is available from the Eclipse Foundation; it is "an Eclipse RCP application." It is free and opensource. "Web developers can use aDesigner to test the accessibility and usability of Web pages for low-vision and blind people."

aViewer

This tool, from the Paciello Group, is integrated into the Web Accessibility Toolbar, but it may be used separately, as a desktop application, if preferred. "The Accessibility Viewer (aViewer) is an inspection tool for Windows that displays the accessibility API information (MSAA, IAccessible2, UI Automation, ARIA, HTML DOM) exposed by web browsers to the operating system, and thus to any assistive technology (AT) such as screenreaders."
When getting started with aViewer, Steve Faulkner's AViewer Presentation and his AViewer video will be helpful.

Web Accessibility Toolbar (WAT)

The most current version of the "WAT" can be downloaded from Github by going to: https://github.com/ThePacielloGroup/WebAccessibilityToolbar. Note that documentation, including keyboard shortcuts, is also posted there.

El atributo alt en la Wikipedia

Curioso, el atributo alt tiene su propio artículo en la Wikipedia en inglés: alt attribute. El artículo dice:

The alt attribute is used in HTML and XHTML documents to specify alternative text (alt text) that is to be rendered when the element to which it is applied cannot be rendered. It is also used by "screen reader" software so that a person who is listening to the content of a webpage (for instance, a person who is blind) can interact with this element. The attribute was introduced in HTML 2 and in HTML 4.01 was required for the img and area tags. It is optional for the input tag and the deprecated applet tag.

Consejos para desarrollar páginas web más accesibles para las personas con discapacidad cognitiva

Los problemas de accesibilidad web asociados a la discapacidad cognitiva o intelectual se han estudiado muy poco. Por ello, las soluciones planteadas son muy escasas.

En Layout, Navigation and Support for Text on Websites – A Few Ideas se presentan algunos consejos:

Layout

Algunos consejos son:

• All necessary text on the screen
• San Serif font
• Font to be at least 14 point
• Headings used
• Alignment of text to left,
• Writing in black on white
• There should not be too much information on the screen – avoid clutter

Navigation

Algunos consejos son:

• Having a maximum of eight navigation buttons.
• Placing the constant buttons (to move between pages, to return to home) in a top navigation bar and with topic related buttons on the left side.

Supporting text

Algunos consejos son:

• Short sentences of speech linked to icons, the same sentence can be repeated as often as the person needs to clarify a point or refresh their memory.
• Short videos no longer than about 30-45 secs may work.
• A feature on videos to re-wind and play back – this already happens on sites such as You tube and BBC iplayer.

Guía de Recomendaciones en Accesibilidad Cognitiva

FEAPS Madrid, la Federación de Organizaciones en Favor de Personas con Discapacidad Intelectual de Madrid, tiene publicada en su sitio web la Guía de Recomendaciones en Accesibilidad Cognitiva. Esta guía ha alcanzado más de mil descargas.

La guía posee un apartado dedicado a la búsqueda de información en Internet. Algunos de los consejos son:

• Si la página me va marcando el camino que he seguido con una «miga de pan» o «hilo de Ariadna» será más fácil que pueda volver a una página que he visitado con anterioridad y en la que deseo seleccionar una opción diferente, y situarme en el contexto de la página que estoy visitando. Se tiene que reducir o eliminar los elementos emergentes, la publicidad y los cambios de apariencia constantes, y especialmente los no deseados, en la página web.
• Cuando la página me permite escribir datos o comentarios, como por ejemplo en los formularios, las cajas de texto deberían permitir que se vea la totalidad del texto que se escribe en ellas.
• Los menús es preferible que no sean desplegables, de esos que sólo los ves si tienes el ratón encima. Hay personas con problemas de motricidad fina que no aciertan al seleccionar las opciones. Cada subnivel de menú, debe activarse y fijarse con un click.

Eso del "hilo de Ariadna" es la primera vez que lo escucho. Pero en el artículo de la Wikipedia sobre la miga de pan aparece.

Thunder Screenreader

A través del siguiente vídeo he descubierto un nuevo lector de pantallas para Windows que es gratuito:


Este lector de pantallas se llama Thunder Screenreader. Parece que está disponible en español, algún día lo probaré...

Vídeo sobre accesibilidad web de la BBC

Este vídeo es un poco antiguo (debe ser de 2005 o 2006), pero es curioso verlo BBC Click Accessibility:

Simulador de ceguera al color

Spectrum es un complemento para Google Chrome que permite simular diferentes tipos de ceguera al color.

Página normal:

Protanopia:

Tritanopia:

Cinco consejos para hacer un sitio web más accesible

Es un vídeo antiguo, del año 2010, pero todavía tiene vigencia: Tips to make your website accessible.


Los consejos son:

1. Check that your website works correctly without images.
2. Simplify navigation and consider keyboard only users.
3. Include captions for video content.
4. Audio should not be played automatically on entry to a page.
5. Use suitable language and content for your audience.

Máster Universitario Online en UX: Usabilidad, Diseño de Interacción y Experiencia de Usuario

La Universitar Pompeu Fabra organiza el Máster Universitario Online en UX: Usabilidad, Diseño de Interacción y Experiencia de Usuario. Las clases comienzan el 15 de octubre de 2015.

Los contenidos académicos son:

1. Apertura del aula digital e introducción al funcionamiento del curso
2. Asignaturas comunes a todas las especialidades del Máster Universitario en Información Digital:
1. Fundamentos en tecnologías web
2. Posicionamiento en buscadores - SEO
3. Web Social - Community Manager
3. Asignaturas de la especialidad en Usabilidad, Diseño de Interacción y Experiencia de usuario:*
1. Diseño de interfaces usables
2. Frontend para UX
3. Evaluación de usabilidad y experiencia de usuario
4. Gestión de proyectos de UX en la empresa
4. Trabajo de fin de máster

El vídeo del webinar Inclusión y Autonomía de las personas con Discapacidad apoyados en la tecnología

El 6 de agosto participé en un webinar organizado por el Observatorio TIC dependiente del Ministerio de Telecomunicaciones y de la Sociedad de la Información del Ecuador.

El webinar tuvo en algún momento picos de casi 250 personas conectadas:

Ahora mismo, el vídeo tiene más de 1000 visitas acumuladas:

Guía de accesibilidad para el sitio web de las Naciones Unidas

Accessibility Guidelines for United Nations Websites es un sitio web en el que se encuentran las guías que se deben emplear en el desarrollo de los sitios web de las Naciones Unidas para garantizar su accesibilidad.

Pero cuidado, en lo primer que he ido a mirar, Acronyms and Abbreviations, he encontrado un error tremendo, porque sugiere el uso de la etiqueta acronym, pero esa etiqueta está desaconsejada desde hace años:

• http://www.w3schools.com/tags/tag_acronym.asp
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/acronym
• http://html5doctor.com/the-abbr-element/

Guía para aprender accesibilidad web

The Accessibility Tree: A Training Guide es una interesante guía para aprender accesibilidad web. El índice de esta guía es:

1. Accessibility API
2. ARIA, Important Details
3. ARIA Categories
4. Accessibility Tree versus DOM
5. Keyboard, Touch, and ATs

Vídeo de WebAIM

Es un poco antiguo y el audio no es muy bueno, pero es un vídeo interesante, Keeping Web Accessibility In Mind:

Make Technology Work for Everyone

Muy bueno el vídeo Make Technology Work for Everyone: introducing digital accessibility, que ofrece 15 consejos para lograr una mayor accesibilidad digital. Y por supuesto, el vídeo tiene subtítulos (eso sí, en inglés):

Herramientas de accesibilidad recomendadas por Stanford

Stanford University tiene la página web Online Accessibility Program en la que explica muchas cosas sobre accesibilidad web.

Es muy interesante el apartado Tools que tiene una lista de complementos para Google Chrome, Mozilla Firefox y Microsoft Internet Explorer.

¿Por qué me interesa una web accesible?

En los medios de comunicación no aparecen muchas noticias sobre la accesibilidad web, así que es grato encontrarse alguna de vez en cuando. Hace unos pocos días, en La Vanguardia se publicó ¿Por qué me interesa una web accesible?. El artículo dice:

Se dice que algo es accesible cuando se puede obtener de forma sencilla y sin obstáculos, algo que es fácilmente comprensible, inteligible. La accesibilidad web busca que la web pueda ser usada por todas las personas, independientemente de sus capacidades sensoriales, físicas o técnicas. La información en la web es accesible cuando todo el mundo puede encontrarla y utilizarla.
[...]
Una web accesible mejora la calidad de vida y la autonomía de las personas con dificultades visuales, auditivas, motoras y/o cognitivas, pero no es un reducto para personas con diversidad funcional. Usted puede sufrir una lesión temporal en la mano que le impida utilizar el ratón, encontrarse en un ambiente ruidoso que le impida escuchar un archivo multimedia, o consultando su móvil a pleno sol sin poder distinguir los elementos con poco contraste. También debe tener en cuenta que su cuerpo envejece y, con la edad, muchas de sus capacidades se irán reduciendo. La accesibilidad web siempre nos beneficia a todos.

Cinco riesgos ocultos que puedes sufrir si tu sitio web es no accesible

En 5 Hidden Risks of Your Inaccessible Website se explican cinco riesgos que puedes sufrir si tu sitio web es no accesible:

• Daño a tu marca de empresa.
• Pérdida de oportunidades de mercado.
• Caída en barrena.
• Organizaciones más débiles.
• Menos empleados cualificados.

Qué hacer si usas una tabla para maquetar

Las tablas no se tienen que emplear para la maquetación, para el layout. En su lugar se debe emplear CSS.

Esta es la teoría, pero en la práctica a veces se siguen usando las tablas para la maquetación por diversas razones. Pero en este caso hay una solución para lograr que no interfiera con la accesibilidad de la página web: Layout Tables Tip.

El truco es muy sencillo, simplemente hay que añadir role="presentation" a la tabla.

Nuevo logo para representar que un producto o servicio es accesible

Las Naciones Unidas ha creado un logo para representar que "algo" es accesible: A New Symbol of Accessibility.

Lanzado Claws

En la Universidad de Alicante hemos desarrollado un complemento para Mozilla Firefox que emula (o simula) el comportamiento de un lector de pantallas como JAWS o NVDA.

Este complemento está inspirado en Fangs: Fangs Screen Reader Emulator

Fangs está muy bien, pero no ha sido actualizado desde hace años. El complemento que hemos desarrollado, Claws, tiene en cuenta las nuevas etiquetas de HTML5: Claws

Además, hemos incorporado algunas opciones que no posee Fangs.

Os animo a que lo probéis y nos indiquéis los errores y mejoras que podemos incorporar. Cualquier comentario me lo podéis enviar a sergio.lujan arroba ua.es