Implantación de la accesibilidad web en trivago

Muy interesante el artículo Accessibility at trivago que explica el proceso de implantación de la accesibilidad web en la empresa trivago:

Accessibility is an important topic for anyone who builds things for the web, and one that is neglected far too often. We at trivago have also been guilty of this, but we are slowly making changes with the aim of improving the accessibility of our site. Identifying and implementing these changes has not been easy. We have faced a number of challenges along the way, and we continue to do so. But we are committed to improving our site so that anyone can access and use the service we provide, regardless of how they do so.

El artículo desarrolla el proceso llevado a cabo dentro de trivago para lograr que su sitio web sea accesible (o al menos, no tan poco accesible como era antes de empezar el proceso).

Lo que he aprendido hasta ahora de la accesibilidad web

Me ha gustado el artículo My Accessibility Journey: What I’ve Learned So Far. Empieza con una pregunta que más de una vez me han hecho:

Last year I gave a talk about CSS and accessibility at the stahlstadt.js meetup in Linz, Austria. Afterward, an attendee asked why I was interested in accessibility: Did I or someone in my life have a disability?

La respuesta del autor del artículo es NO y la mía también es NO. Y como dice el autor, esta respuesta suele sorprender a la gente que parece que espera alguna respuesta del estilo "mi hijo/hermano/padre tiene una discapacidad y por eso me interesa la accesibilidad web".

Todo lo que se cuenta en el artículo es interesante pero aquí me gustaría destacar lo siguiente:

7. A solid knowledge of HTML solves a lot of problems
It’s impressive to see how JavaScript and the way we use it has changed in recent years. It has become incredibly powerful and more important than ever for web development. At the same time, it seems HTML has become less important. There is an ongoing discussion about CSS in JavaScript and whether it’s more efficient and cleaner than normal CSS from a development perspective. What we should talk about instead is the excessive use of <div> and <span> elements at the expense of other elements. It makes a huge difference whether we use a link or a <div> with an onclick handler. There’s also a difference between links and buttons when it comes to accessibility. Form items need <label> elements, and a sound document outline is essential. Those are just a few examples of absolute basics that some of us forgot or never learned. Semantic HTML is one of the cornerstones of accessible web development. Even if we write everything in JavaScript, HTML is what is finally rendered in the user’s browser.
(Re)learning HTML and using it consciously prevents and fixes many accessibility issues.

Denuncian a Nike, Burger King y 28 sitios más

En Blind woman sues 30 websites over handicap accessibility del 7 de enero de 2018 podemos leer:

A blind Manhattan woman recently filed individual lawsuits against more than 30 businesses she says are not handicap accessible online.
Maria Mendizabal, who is legally blind, claims that the Web sites for companies such as Nike, 24 Hour Fitness, De Beers, Barney’s, Donna Karan, and Kleinfeld Bridal aren’t compatible with screen-reading software that translates the written content into either audio or Braille.
“Unless websites are designed to be read by screen-reading software, blind and visually-impaired persons are unable to fully access websites, and the information, Products, and services contained thereon,” reads the suit against Barney’s, which is filed under the Americans with Disabilities Act.

En Nike Class Action Says Blind Online Shoppers Can’t Use Site y Burger King Class Action Says Fast Food Chain’s Website Violates ADA hay más información.

Televisión accesible

Movistar ofrece Movistar+ 5S:

Movistar+ 5S es la funcionalidad gratuita de Movistar+ que permite a sus clientes con discapacidad, visual o auditiva, acceder a películas y series de Movistar+ a través de 3 sistemas de accesibilidad: lengua de signos, audiodescripción y subtítulos adaptados.
A través del esta funcionalidad, las personas sordas o ciegas podrán disfrutar del entretenimiento accesible directamente en la pantalla de su televisión.
Además, existe la opción de acceder al sistema de accesibilidad vía la aplicación Movistar+  5S – disponible en Android y iOS -.
Movistar+ se convierte así en la primera televisión privada del mundo en ofrecer este servicio.

Las tres características que ofrece son:

• SRD: El subtitulado para sordos distingue por colores los diálogos y subtitula las acotaciones sonoras para que las personas con discapacidad auditiva puedan disfrutar de una forma más completa de los contenidos de Movistar+.
• ADS: Accesibilidad dirigida a personas con discapacidad visual que permite disfrutar de los contenidos mediante la narrativa descriptiva de escenas respetando los diálogos y la banda sonora original, para lo que hemos contado con la experiencia de Ilunion (ONCE).
• LSE: Movistar+ es la única plataforma de TV que ofrece muchos de sus contenidos con Lengua de Signos Española, de acuerdo con los criterios de la Confederación Estatal de Sordos de España (CNSE).

La NFL comprometida con la accesibilidad web

Hace unos días se jugó la Superbowl, supuestamente el acontecimiento deportivo individual más importante (después de "el clásico", claro está). A raíz de ello, se publicó el artículo How the NFL is Commited to Web Accessibility?:

Making its website more accessible is therefore just another way to bring more NFL fans into the fold and prioritize viewers’ needs and concerns.

Improving web accessibility isn’t just the right thing to do for the NFL, however; it’s also a smart business practice. According to tech company GlobalWebIndex, a full 65% of U.S. adults say that they’re NFL fans. With 19% of the U.S. population having some kind of disability, failing to make their website accessible would leave millions of NFL fans in the dark.

In October 2015, the NFL released its Website Accessibility Statement on their website. This document states the NFL’s commitment to improving the accessibility and usability of its website. It outlines several concrete actions that the organization is taking to promote accessibility:

Partnering with an accessibility consulting firmto audit its website.

• Using the recommendations from the audit to implement the appropriate portions of the World Wide Web Consortium’s Web Content Accessibility Guidelines 2.0 Level AA standards.
• Training the NFL’s development team on accessibility standards, including WCAG 2.0 Level AA and Section 508 of the Rehabilitation Act.
• Testing the changes on adaptive technologies, such as screen readers and magnifiers, and with users who have disabilities.

Cómo la Web mejora la vida de las personas con discapacidad

Experiencias en desarrollos tecnológicos accesibles: Experiencia Ecuador

Conferencia impartida en la III Jornada de Accesibilidad Digital organizada por el Instituto Tecnológico de Costa Rica (TEC) del 25 al 28 de octubre de 2016 en San José (Costa Rica):

Audiodescripción estándar o extendida

La audiodescripción, llamada en algunos países videodescripción, "consiste en la información sonora que se intercala en los huecos de mensaje en las producciones audiovisuales y que explica a las personas con discapacidad visual los aspectos más significativos de la imagen que no pueden percibir. Estos comentarios se refieren a la descripción de personajes (gestos, vestimenta, etc.), datos sobre el lugar donde suceden los hechos y acerca de la acción que se desarrolla en cada momento" (La Audiodescripción).

En Does your video need standard or extended description? se explica que existen dos tipos de audiodescripción, la estándar y la extendida:

• Estándar: Standard description is when the snippets of description are inserted into the natural pauses of the content being described. This type of audio description works very well for videos that have lengthy pauses in dialogue or that do not contain speech at all. The describer can add concise descriptions of the visual content where space allows. You will notice that the original video source plays continuously, and information is described in the pauses throughout.
• Extendida: Unlike standard audio description, extended description does not have to be constrained to the natural pauses of a video. Extended description allows you to pause the video content in order to make room for description, as needed. When you press play, the video and description begin playing. Then, the source video pauses temporarily, while the description continues. After that portion of the description is complete, the video resumes playing again. 

¿Cuándo es necesaria la audiodescripción?

As a general guideline, audio description should be used when there is critical information portrayed solely through visual means. For instance, on-screen text, changes in speaker, facial expressions, costumes, and scene changes all give context that help us better understand and enjoy content.

La transcripción de audios y vídeos

En Audio transcripts are important se enumeran los principales beneficiarios de las transcripciones del audio:

• People who are Deaf, or people with hearing impairments.
• Some people with cognitive impairments also process the written word better than they process spoken words.
• Non-native speakers of the language your content is in.
• People in noisy environments that try to listen to your audio/video
• People who can read 6,000 words faster than they can listen to a 1-hour show
• People with slow internet connection, or limited bandwidth
• You!
• Your content is indexable and searchable
• Improve SEO and traffic to your site

Libros sobre accesibilidad web

Web Accessibility Books es una lista de libros gratuitos sobre accesibilidad web o relacionados con la accesibilidad web:

• Accessibility For Everyone, by @LauraKalbag, A Book Apart 2017
• Inclusive Design Patterns—Coding Web Accessibility Into Web Design, by Heydon Pickering (@heydonworks), Smashing Magazine 2016
• Apps for All: Coding Accessible Web Applications, by Heydon Pickering (@heydonworks), Smashing Magazine 2014
• A Web for Everyone—Designing Accessible User Experiences, by Sarah Horton & Whitney Quesenbery, Rosenfeld Media, 2013
• HTML5 Accessibility, by Joshue O Connor (@joshueoconnor), , 2012 (older, but much of it still relevant; my review)
• For nostalgia’s sake: Web Accessibility: Web Standards and Regulatory Compliance, multiple authors, Friends of Ed, 2006
• Adaptive Web Design (second edition), by Aaron Gustafson (@AaronGustafson), New Riders 2016
• Responsible Responsive Design, by Scott Jehl (@scottjehl), A Book Apart 2014
• Web Axe’s list of Free Online Books on Accessibility (2011)

Uso del atributo title

El atributo title se suele utilizar muy mal en las páginas web. Ya he escrito sobre ello en el pasado:

• El atributo title
• Sobre el atributo alt y title, ¿cumplen la misma función?
• Consejo 14: Proporciona un título significativo para cada parte individual de una página

En el artículo Using the HTML title attribute – updated explican algunas cosas más:

Situations in which the the title attribute is not useful due to lack of support:

• Displaying information for web content viewed on mobile phone browsers. Typically in desktop browsers title attribute content is displayed as a tooltip. From what I could find, tooltip display is not supported in any mobile browser and alternative visual methods of accessing title attribute content are not supported.

• Providing information for people who cannot use a mouse. Typically in desktop browsers, title attribute content is displayed as a tooltip. Although the tooltip behaviour has been supported for 10+ years, no browser (except IE10+ [on focusable elements]) as yet has implemented a practical method to display title attribute content using the keyboard.

• Using it on most HTML elements to provide information for users of a variety of assistive technologies. Access to title attribute information is not supported uniformly by screen readers

• User groups not well served by use of the title attribute

Mobile phone users.

• Keyboard only users.

• Screen magnifier users.

• Screen reader users.

• Users with fine motor skill impairments.

• Users with cognitive impairments

Educación inclusiva en universidades presenciales

Conferencia impartida en el V Foro de Academia Innovadora "Fomentando una cultura de innovación, diálogo y accesibilidad con el apoyo de las TIC" en la Universidad Nacional de Costa Rica el 20 de septiembre de 2017.

Entendiendo WCAG 2.1

En Understanding WCAG 2.1: A History of WCAG explican la evolución de WCAG:

The Web Content Accessibility Guidelines, also known as WCAG (1.0), has been around since May 5th of 1999. Version 1.0 was published on that date many years ago. That first version of the Accessibility Guidelines was very focused on HTML and it was a wonderful step forward in making the web and digital technology accessible. It was followed, a number of years later, December 11, 2008, to be exact, with WCAG 2.0.

Incluye el siguiente vídeo:

Uso incorrecto de los encabezados

En Heading headache se muestra un caso extremo de mal uso de los encabezados:

<h2 class="h3" role="heading" aria-level="1">Some heading</h2>

Ese ejemplo presenta varios problemas. Una vez resueltos, el código anterior se puede reducir a:

<h2 class="display1">Some heading</h2>

Definiciones de UNESCO sobre discapacidad

UNESCO tiene la página web Fact sheets que contiene definiciones de temas relacionados con la enfermedad y las discapacidades.

Algunas definiciones interesantes son:

• Ageing and health
• Assistive technology
• Deafness and hearing loss
• Disability and health
• Mental disorders
• Vision impairment and blindness

Ejemplo de vídeo con audiodescripción

Se trata de un anuncio de Apple. Primero la versión sin audiodescripción:

Y el mismo vídeo con audiodescripción:

Cömo hacer vídeos accesibles

En Making Videos Accessible se explica cómo crear vídeos accesibles para todos los usuarios. Para ello hay que incluir subtítulos, audiodescripción y algunas técnicas de preproducción.

La explicación se encuentra en un vídeo:


Y también existe el mismo vídeo con audiodescripción:

Ejemplos de problemas para los usuarios con ceguera al color (daltonismo)

Muy interesante la página Colorblind Accessibility on the Web – Fail and Success Cases que presenta varios ejemplos de problemas de accesibilidad por un uso incorrecto de los colores.

El siguiente ejemplo de un partido de fútbol es muy ilustrativo:

Resultados de la séptima encuesta del WebAIM sobre el uso de lectores de pantalla

Ya se han publicado los resultados de la séptima encuesta del WebAIM sobre el uso de lectores de pantalla que se abrió en octubre de 2017: Screen Reader User Survey #7 Results.

La encuesta recibió 1792 respuestas, un número muy alto de respuestas, pero menor que las 2515 respuestas que se recibieron en la sexta encuesta.

En cuanto a porcentaje de preferencia de los usuarios, el lector de pantalla principal sigue siendo JAWS con un 46,6% de las respuestas, seguido por NVDA con 31,9% y VoiceOver con 11,7%.

La evolución de la preferencia de los navegadores muestra un comportamiento extraño respecto a los resultados de la encuesta previa:

Es muy interesante la tabla con las combinaciones lector de pantalla y navegador:

Las combinaciones más populares son JAWS con Internet Explorer un 24,7% y NVDA con Firefox un 23,6%.

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 18,0% respondió siempre que estuviesen presentes, pero el 19,4% contestó que nunca. Estos resultados son similares a los obtenidos en la encuesta previa.

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

Antes la pregunta "Cuál de las siguientes estructuras de encabezado de página es más fácil para ti", el 60% afirmó que prefería un único encabezado de primer nivel h1 que contenga el título del documento. Solo un 6,6% prefirió un encabezado de primer nivel con el nombre del sitio web.

Por último, en esta encuesta se volvió a preguntar por los elementos más problemáticos que se encuentran en una página web. En orden decreciente, el resultado fue:

1. CAPTCHA - images presenting text used to verify that you are a human user
2. Screens or parts of screens that change unexpectedly
3. Links or buttons that do not make sense
4. The presence of inaccessible Flash content
5. Lack of keyboard accessibility
6. Complex or difficult forms
7. Images with missing or improper descriptions (alt text)
8. Missing or improper headings
9. Too many links or navigation items
10. Complex data tables
11. Inaccessible or missing search functionality
12. Lack of "skip to main content" or "skip navigation" links

Por último, los resultados de las encuestas anteriores:

• Screen Reader User Survey #6 Results (Septiembre 2015)
• 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)

Sobre la sordoceguera

Hace un mes se publicó el artículo Dame tu mano y hablaré contigo en el periódico El País. Muy interesante todo lo que se cuenta:

Para los alrededor de 6.000 sordociegos de España todas estas actividades ordinarias suponen un reto casi inalcanzable.

Aún hoy, no existe un censo oficial de las personas sordociegas de España. Sin embargo, Requena detalla que más de 2.200 de ellas están afiliadas a la fundación.

Javier Gutierrez, de 44 años, lleva más de 20 años trabajando como mediador para la organización, y explica que el mundo de los sordociegos está fragmentado en miles de condiciones distintas. Están las personas que tienen los síndromes de Usher o Wolfram (enfermedades hereditarias que hacen que la sordoceguera aparezca con el paso de los años), los sordociegos congénitos a raíz de un conjunto de anomalías (conocido como Charge) y los ancianos ciegos o sordos, para los cuales el paso del tiempo supone un empeoramiento de las capacidades perceptivas.

LOS DATOS
2.200 sordociegos afiliados a FOAPS

422 sordociegos atendidos

100 mediadores

13 médicos especialistas

2 millones de euros de inversión anual

La ONCE generó 9.557 puestos de trabajo para personas con discapacidad en 2016

68.467 trabajadores forman la plantilla de la organización, de los cuales un 56% son personas con discapacidad

1.918 millones de euros recabados del juego responsable

35% de los ingresos invertido en acción social

72.256 personas ciegas atendidas

3.500 afiliados nuevos