Canal de vídeo Accessibility Talks

Accessibility Talks es un excelente canal de vídeos en YouTube dedicado a la accesibilidad. Tiene diferentes listas de reproducción donde se clasifican los vídeos para principiantes, desarrolladores y paneles de discusión.

Un vídeo organizado por capítulos

Un vídeo organizado por capítulos ayuda a navegar por su contenido, lo cual ayuda a mejorar la usabilidad para todos los usuarios y también su accesibilidad.

En Adding Chapters to a Video se explica cómo se puede lograr con un reproductor de vídeos llamado Brightcove Player. Los capítulos se especifican mediante un fichero WebVTT, así que es posible que sea compatible con los reproductores nativos de los navegadores... hay que probarlo.

En YouTube se puede lograr una navegación por capítulos indicando el instante de tiempo en la descripción del vídeo. Desafortunadamente, no es muy usable, ya que muchas veces aparecen ocultos los enlaces y los usuarios no son conscientes de ello.

Y aquí un ejemplo de uno de mis vídeos en YouTube que hace uso de esta técnica:


Los enlaces a los capítulos aparecen en la descripción del vídeo.

Accesibilidad de los textos digitales. Parte I (LS)

Definición del contenido tipo texto La importancia de etiquetar el idioma Incluir un glosario Hacer tablas y listas accesibles El tipo de fuente, su tamaño, el contraste con el fondo y la alineación del texto. No utilizar imágenes para transmitir texto Cómo incluir texto matemático.

Vídeo con múltiples pistas de audio

Ofrecer un vídeo con múltiples pistas de audio es una forma de mejorar la accesibilidad de un vídeo. Por ejemplo, una pista puede tener solo lo que se habla, lo que se conoce como "clean audio". Y otra pista puede tener una audiodescripción.

En las siguientes páginas se ofrecen ejemplos de vídeos con varias pistas de audio:

• Multiple Audio Tracks
• Display multi language and audio options available with the Bitmovin player

International Association of Accessibility Professionals (IAAP)

International Association of Accessibility Professionals (IAAP)  es una asociación internacional que tiene como misión:

to define, promote and improve the accessibility profession globally through networking, education and certification in order to enable the creation of accessible products, content and services.

Tiene un apartado dedicado a webinars muy interesante.

Productos de apoyo para todos

Productos de apoyo y tecnologías de la información y las telecomunicaciones - Estamos rodeados de tecnologías y de productos de apoyo, que hacen nuestra vida más cómoda y segura.




 En el siguiente enlace puedes descargarte el fichero con la transcripción del vídeo "Productos de apoyo para todos" del que anteriormente te invitábamos a fijarte en sus subtítulos y audiodescripción. Este fichero en formato pdf es un ejemplo de transcripción de vídeo.

El texto de la transcripción equivale a la unión del texto de los subtítulos y de la audiodescripción. Leyendo ese archivo tenemos una información equivalente a la que tenemos si vemos y oímos el vídeo.

¿Dónde está BLITAB?

BLITAB fue anunciada hace unos años como la primera tableta para las personas ciegas:

• Blitab es el tablet perfecto para personas ciegas, ahora solo falta que llegue al mercado
• BLITAB, el iPad para invidentes de Kristina Tsvetanova

En abril de 2019, volvió a aparecer en el blog "El futuro es apasionante" del periódico El País y patrocinado por Vodafone: Tabletas con tinta inteligente para traducir webs al braille.

¿Dónde está la tableta? En el canal de la empresa en YouTube, el último vídeo se publicó hace más de 2 años:


¿Existe la tableta o fue todo un "bluf"?

En Blitab, la tableta braille más económica se puede leer un excelente análisis sobre este invento que puede aclarar lo que ha pasado con él.

Sin embargo, lo que es más increíble, es que la página tenga un enlace a una versión accesible del sitio web, lo cual va en contra de todas las pautas de accesibilidad, y dirija a una página web en la que pone lo siguiente:

Coming soon
We are  currently  improving  our website

Cómo crear vídeos accesibles

En Checklist for creating accesible videos se explica cómo crear vídeos accesibles:

1. CREATE ACCESSIBLE VIDEO CONTENT
2. CHOOSE A CURRENT VIDEO FORMAT FOR THE WEB
3. CHOOSE AN ACCESSIBLE VIDEO PLAYER
4. ADD CAPTIONS TO YOUR VIDEO
5. ADD A TRANSCRIPT TO YOUR VIDEO
6. INCLUDE AUDIO DESCRIPTION IF NEEDED

Y como resumen:

An accessible video usually includes captions; a transcript; and careful use of color, text, and flashes or animation. A video should also be delivered in an accessible format with an accessible media player, and may include additional audio description when the default audio track isn't sufficient.

Accessibility in JavaScript Applications

Accessibility in JavaScript Applications es un curso sobre:

We can produce innovative and inclusive JavaScript-powered web apps! This course will teach you to remove barriers to access that might prevent people with disabilities from using a modern JavaScript web application. We’ll study accessibility in UI components, primarily with React and Gatsby.js, but with knowledge applicable to all JavaScript-heavy web stacks. Debug your sites for accessibility, manage keyboard focus, announce live updates to the page to screen readers, and use manual and automated testing to gain web accessibility superpowers!

This course and others like it are available as part of our Frontend Masters video subscription.

Accesibilidad audiovisual: subtítulos (LS)

Se presenta el concepto de los subtítulos, sus principales características, beneficios y recomendaciones para que sean accesibles.

Accesibilidad en la Unión Europea

En Accessibility: Essential for Some, Useful for All se resumen los avances en materia de accesibilidad que ha impulsado la Unión Europea:

Promoting digital inclusion, the European Union has taken measures in a variety of areas including electronic communications, digital public services, audio-visual media services, ebooks, eCommerce and ICT equipment:

1. The Web Accessibility Directive establishes common accessibility requirements enabling everyone to read, understand, and complete administrative procedures on public sector websites and mobile applications.
2. The European Electronic Communications Code ensures that everyone has access to affordable electronic communications services, including emergency services.
3. The recently revised Audiovisual Media Services Directive (AVMSD) covers the means to achieve accessibility such as with sign language, subtitling for the deaf and hard of hearing and audio descriptions for both television broadcasting (i.e. linear services) and video on demand (VOD).
4. The eIDAS Regulation (on electronic identification and trust services for electronic transactions in the internal market) requires that trust services provided and end-user products be accessible for persons with disabilities, such as with eSignatures which aid in signing legal documents and email in a paperless manner.
5. The Marrakesh Directive and Regulation (2017) aim to facilitate the access to print works, including e-books, in formats adapted for persons who are blind, visually impaired or those who have difficulties reading.
6. Whilst complementing the above legislative measures, the European Accessibility Act, sets common accessibility requirements including a number of key ICT products and services.common accessibility requirements including a number of key ICT products and services.

Álex estudia Educación Social, es sordo y usuario de lengua de signos española

Productos de apoyo y tecnologías de la información y las telecomunicaciones - Alex, estudiante de UNED quisiera que la lengua de signos estuviera más presente en la universidad: En las clases o tutorías, en los vídeos y programas de radio. Usa un sistema de interpretación en legua de signos por videoconferencia para comunicarse con un profesor y hacerle una consulta sobre una de sus asignaturas. Participante: Álex González, estudiante de UNED.

Ana estudia Filología Hispánica y es sorda

Productos de apoyo y tecnologías de la información y las telecomunicaciones - Ana Sánchez, estudiante de la UNED, es muy aficionada al cine. Para disfrutarlo necesita que la película tenga subtítulos, o que la sala de proyección disponga de un bucle magnético. También usa el bucle magnético para hablar a través de su teléfono móvil, aunque principalmente se comunica con los demás gracias a aplicaciones de mensajería instantánea para móvil. Echa de menos que los programas de radio estén disponibles en texto. Las tecnologías de hogar digital le hacen sentirse más segura y cómoda cuando está en casa. Participante: Ana Sánchez, estudiante de la UNED.

Carlos estudia Psicología y es una persona con baja visión

Productos de apoyo y tecnologías de la información y las telecomunicaciones - Carlos Javier Cortina, estudiante de la UNED. usa su ordenador ayudado de un magnificador de pantalla que además sintetiza en voz los contenidos visuales. Estudia temas de Psicología en su reproductor MP3 o Daisy, mientras espera un autobús. Utiliza un mini-GPS vocal para orientarse mientras camina por la ciudad. Lee las cartas que el banco le envía con su tele-lupa o su escáner-OCR. Participantes Carlos Javier Cortina, estudiante de la UNED.

Víctor estudia Ciencias Empresariales y es ciego

Productos de apoyo y tecnologías de la información y las telecomunicaciones - Victor Alberto Lorenzo, estudiante de la UNED, utiliza el ordenador, la telefonía móvil, busca en internet recursos para hacer un trabajo de empresariales, lee documentos, etc. Para ello utiliza lectores de pantalla y línea braille. Participantes Victor Alberto Lorenzo, estudiante de la UNED.

Accessibility Object Model

Accessibility Object Model es una nueva tecnología que permite modificar las propiedades de accesibilidad de una página web desde JavaScript. En Meaning without markup: Accessibility Object Model se explica cómo funciona esta tecnología y se ofrecen algunos ejemplos sencillos.

Accesibilidad de los colores

El artículo Contrast and Color Accessibility explica con mucho detalle los requisitos relacionados con el color y el contraste de WCAG.

El contenido es:

• Page 1: Understanding WCAG 2 Contrast and Color Requirements
• Introduction
• Defining Colors
• WCAG 2 "Contrast Ratio"
• 1.4.3 Contrast (Minimum)
• 1.4.6 Contrast (Enhanced)
• 1.4.11 Non-text Contrast
• 1.4.1 Use of Color
• Page 2: Evaluating Contrast and Color Use
• Page 3: Evaluating Contrast with Chrome DevTools

¿Se usa Orca?

Hace unos días me preguntaron por el uso de Orca, el lector de pantalla más conocido para Linux, o quizás el único que existe.

¿Se usa Orca? En el último Screen Reader User Survey #8 de WebAIM, ni se nombra.

¿Orca es un buen lector de pantalla? En el análisis Practical Screen Reader Comparison: A user-oriented approach no obtenía buenos resultados, quedaba el peor, pero bueno, es un estudio de 2011:

Screen Reader	Points	Percentage
JAWS	85.5	93%
HAL	85.5	93%
NVDA	69	75%
VoiceOver	58	63%
Orca	54	59%

Duda sobre cómo se navega con un lector de pantalla

Un estudiante mío está desarrollando una página web y le ha surgido la siguiente duda:

Me ha surgido una duda leyendo documentación y aprendiendo a utilizar VoiceOver de MacOS. Mi idea era que un usuario pudiera navegar por cada Chunk con el tabulador con información adicional, pero no sé hasta qué punto eso concuerda con la especificación. Por ejemplo, si una lección sigue esta secuencia de Chunks:

• Heading
• Text
• Text
• Heading-Text
• Bulleted-List
• Multiple-Answers

La idea era que el usuario empezara navegando con el tabulador y el lector de pantalla avisara con un “Chunk Heading… [contenido]” y al volver a presionar el tabulador “Chunk Text…[contenido]” y así hasta llegar al final de la lección, pero mi duda es si esto se debería hacer o va contra la especificación.

Y mi respuesta:

Tienes que distinguir dos posibles tipos de usuarios mediante teclado: el que puede ver y el que no.

El que puede ver normalmente es una persona con discapacidad motora que tiene dificultad para usar el ratón, pero también puede ser un usuario "pro" que prefiere el teclado porque es más rápido o un usuario norma con una "discapacidad temporal" (por ejemplo, se le ha roto el ratón). Estos usuarios pueden usar los cursores para realizar scroll up/down, así que no necesitan el tabulador para desplazarse por el contenido y leerlo, pero sí que necesitan el tabulador para desplazarse por los elementos de interacción. También les ayuda que pongas un enlace al final de la página para volver al principio de la página.

El que no puede ver usará un lector de pantalla, como VoiceOver, y conocerá todo los atajos que proporciona (y si no los conoce... es su problema, que los aprenda). La lista de comandos es enorme:

https://help.apple.com/voiceover/info/guide/10.8/spanish.lproj/_1203.html

El que no puede ver tiene dos problemas: cómo desplazarse por el contenido y leerlo (el que puede ver no tiene este problema) y cómo desplazarse por los elementos de interacción. Lo segundo lo hace con el tabulador, como el resto de usuarios. Lo primero no lo puede hacer con los cursos igual que lo hacemos nosotros porque no puede ver, así que tiene atajos para desplazarse a nivel de carácter, palabra, frase y párrafo:

Leer el párrafo del cursor de VoiceOver
VO + P

Leer el párrafo siguiente
VO + Mayúsculas + Av Pág

Leer el párrafo anterior
VO + Mayúsculas + Re Pág

Leer la frase del cursor de VoiceOver
VO + S

Leer la frase siguiente
VO + Comando + Av Pág

Leer la frase anterior
VO + Comando + Re Pág

Leer la línea del cursor de VoiceOver
VO + L

Leer la línea siguiente
VO + Flecha abajo

Leer la línea anterior
VO + Flecha arriba

Leer la palabra del cursor de VoiceOver
VO + W

Deletrear la palabra del cursor de VoiceOver
VO + W + W

Deletrear fonéticamente la palabra del cursor de VoiceOver
VO + W + W + W

Leer la palabra siguiente
VO + Flecha derecha

Leer la palabra anterior
VO + Flecha izquierda

Leer el carácter del cursor de VoiceOver
VO + C

Leer el carácter del cursor de VoiceOver
VO + C + C

Leer el carácter siguiente
VO + Mayúsculas + Flecha derecha

Leer el carácter anterior
VO + Mayúsculas + Flecha izquierda


La página web no tiene que proporcionar ningún mecanismo para ello, más allá de usar correctamente HTML. Por ejemplo, si creas "falsos párrafos", texto separado mediante BR, para el lector de pantalla no existirán esos párrafos que nosotros sí que vemos.

Para lo que me preguntas, no tienes que usar el tabulador, tienes que usar correctamente HTML. En concreto, los usuarios de lector de pantalla se desplazan por una página mediante los encabezados h1, h2, h3, etc.:


Buscar el encabezamiento siguiente
VO + Comando + H

Buscar el encabezamiento anterior
VO + Comando + Mayúsculas + H


Buscar el siguiente encabezamiento del mismo nivel
VO + Comando + M

Buscar el anterior encabezamiento del mismo nivel
VO + Comando + Mayúsculas + M


Y también usan la lista de encabezados, que en el caso de VoiceOver está disponible a través del Web Item rotor:

https://www.apple.com/voiceover/info/guide/_1134.html#mchlp2719

Por tanto, lo que quieres hacer lo tienes que hacer con un buen uso de los encabezados. Deberías usar h1 para el título del curso, h2 para el título de la lección y a partir de h3 para los chunks.

¿Por qué la web de La Moncloa hace referencia a WCAG 1.0?

En la web de La Moncloa:

Podemos ver esto en el pie de página:

¿Cómo es posible que la web de La Moncloa haga referencia a WCAG 1.0 que es del año 1999?