Diez razones por las que los placeholders son problemáticos

El artículo 10 reasons why placeholders are problematic explica situaciones problemáticas al usar el atributo placeholder en un control de un formulario. Estas situaciones pueden afectar de forma negativa a la usabilidad y accesibilidad de una página web:

1. Disappearing placeholder text is easy to forget
2. Not all browsers support placeholders
3. Pre-populated values are hard to understand
4. Reviewing a long form is difficult
5. Erroneous fields are harder to fix
6. Some browsers will remove placeholder text on focus
7. Placeholder text may be mistaken for a value
8. They have insufficient contrast
9. Screen readers may not announce them
10. A missing label reduces the size of the hit area

Ejemplo de que usar el placeholder es una mala idea

El siguiente formulario se encuentra en Mejor con lentillas:

El aviso "* Campos obligatorios" al final del formulario en vez de al principio no es muy adecuado, pero ese no es el problema más grave de este formulario.

Para indicar el contenido de cada campo del formulario se emplea el atributo placeholder en vez de una etiqueta con :

Lo podemos comprobar viendo el código fuente:

¿Por qué es una mala idea usar el placeholder? Imaginemos que me equivoco y en el campo para el teléfono escribo el DNI y en el campo para el DNI escribo el teléfono. El resultado será el siguiente:

¿Qué está pasando? ¿Cuál es mi error? Si no me he fijado bien al rellenar el formulario, no recordaré qué debo introducir en cada campo. Para saberlo deberé ¡¡borrar lo he escrito!!

Además, desde un punto de vista de la accesibilidad web, algunos lectores de pantalla no reconocen el atributo placeholder, así que los usuarios que dependen de su uso para poder navegar por la Web no podrán rellenar este formulario de forma autónoma.

Cómo mostrar mensajes de error que sean accesibles

El artículo How to Provide Accessible Error Identification explica las diferentes formas accesibles que existen para mostrar mensajes de error en un formulario.

El artículo indica que existen tres criterios de éxito de WCAG 2.0 que se deben tener en cuenta:

• SC 3.3.1 Error identification
• SC 3.3.3 Error suggestions
• SC 3.3.4 Error Prevention in legal and Financial transactions

YouDescribe y Amara

YouDescribe y Amara son dos herramientas muy útiles para lograr que los vídeos sean accesibles.

YouDescribe permite añadir una audiodescripción a cualquier vídeo publicado en YouTube. Por ejemplo (si no funciona el contenido embebido, navega a The Quiet Man - Kiss Scene):



Que se corresponde al vídeo:



Amara permite añadir subtítulos a cualquier vídeo publicado en YouTube. Por ejemplo, el siguiente vídeo tiene subítulos en 10 idiomas (si no funciona el contenido embebido, navega a  Honest Trailers - El Hombre de Acero):

Cómo mejorar la experiencia de usuario para las personas con ceguera al color

En Accessibility: Improving The UX For Color-Blind Users se explica cómo mejorar la experiencia de usuario para las personas con ceguera al color.

Según el artículo, un 4.5% de la población presenta algún grado de ceguera al color. Pero entre los hombres sube hasta un 8%.

En este artículo se proporcionan 13 consejos que no sólo benefician a las personas con ceguera al color:

1. Text Readability
2. Text Overlaid On Background Images
3. Color Filters, Pickers And Swatches Link
4. Photographs Without Useful Descriptions
5. Link Recognition
6. Color Combinations
7. Form Placeholders
8. Primary Buttons
9. Alert Messaging
10. Required Form Fields
11. Graphs
12. Zoom
13. Relative Font Size

SVG accesible

En Accessible SVGs se explican algunas cosas para lograr que las imágenes en formato SVG sean accesibles:

Scalable Vector Graphic (SVG) is emerging as the preferred graphic format to use on the web today. Are you abandoning the icon font or replacing old pg, gif and png graphics for the well-supported SVG, too? Let’s see how this will impact users of assistive technology (AT) and what is needed in order to ensure a great user experience for everyone.

El artículo incluye varios ejemplos.

Publicada la directiva de accesibilidad de los sitios web y aplicaciones móviles del sector público

Con fecha 2 de diciembre se ha publicado la noticia Publicada la directiva de accesibilidad de los sitios web y aplicaciones móviles del sector público en el portal de administración electrónica del Gobierno de España:

Se ha publicado en el Boletín oficial de la Unión Europea la Directiva (UE) 2016/2102 del Parlamento Europeo y del Consejo, de 26 de octubre de 2016, sobre la accesibilidad de los sitios web y aplicaciones para dispositivos móviles de los organismos del sector público(Abre en nueva ventana)

Tras el acuerdo político alcanzado el pasado mes de mayo por Comisión Europea, Parlamento Europeo y Consejo europeo (estados miembros) se publica esta directiva que entrará en vigor a los 20 días de su publicación en el DOUE.

La Directiva cubrirá todos los sitios web y aplicaciones móviles del sector público, desde los de las administraciones, tribunales y servicios de policía a los de los hospitales, universidades y bibliotecas públicas, y hará que sean accesibles a todos los ciudadanos, especialmente a aquellos con dificultades auditivas, visuales o funcionales.

En los próximos 21 meses se deberá trasponer a la legislación española y vendrá a sustituir y mejorar las condiciones ya exigidas a los portales de las administraciones públicas en el Real Decreto 1494/2007(Abre en nueva ventana) , es decir, que todos los portales cumplan los requisitos de prioridad 1 y 2 de la norma UNE 139803:2012 (equivalente a nivel AA en WCAG 2.0).

Algunos aspectos destacables con respecto a las exigencias actuales en España son:

• La inclusión de las aplicaciones móviles desarrolladas por las Administraciones Públicas.
• La inclusión de intranets o extranets nuevas o que se renueven sustancialmente.
• En cada portal deberá existir una declaración de accesibilidad, un mecanismo para reportar errores y solicitar a demanda contenidos no accesibles.
• Cada Estado Miembro deberá definir un mecanismo de supervisión y organismo encargado de ello.
• Se realizarán reportes públicos a la Comisión Europea cada 3 años del estado de aplicación de la directiva.

Las normas establecidas entrarán en vigor para los portales nuevos 12 meses después de la trasposición, para el resto de portales 24 meses después de la trasposición y para las aplicaciones móviles 33 meses después de la trasposición.

En los próximos 24 meses, según establece la propia directiva, los estados miembros deberán ponerse de acuerdo y definir la metodología de monitorización y reporte, los modelos de declaración de accesibilidad y unas especificaciones técnicas comunes para el ámbito de las aplicaciones móviles.

Día Internacional de las Personas con Discapacidad

El Día Internacional de las Personas con Discapacidad se observa en todo el mundo cada 3 de diciembre de acuerdo a la resolución 47/3 de la Asamblea General adoptada el 14 de octubre de 1992, con el objetivo de llamar la atención y movilizar apoyos para aspectos clave relativos a la inclusión de personas con discapacidad en la sociedad y en el desarrollo.

Ejemplo de sitio web accesible y no accesible

Accessible University 3.0 es un sitio web de demostración que incluye un sitio web con problemas de accesibilidad y el mismo sitio web con esos problemas corregidos.

Además, se incluye una lista de los problemas que existen en el sitio web (Accessible University: List of Accessibility Issues).

Usar Google Calendar con un lector de pantalla

Google tiene la página Usar Google Calendar con un lector de pantalla que ofrece consejos para usar Google Calendar con un lector de pantallas. No ofrece muchos consejos, quizás lo más interesante es la opción de utilizar las combinaciones de teclas.

Estándares sobre accesibilidad web y WCAG 2.0

En Government accessibility standards and WCAG 2 se recoge algo de información sobre la legislación de varios países.

¿Cómo me ha cambiado la vida la Web?

En mi curso en línea sobre desarrollo web iDESWEB, tengo unas preguntas sobre cómo nos ha cambiado la vida la Web. Una persona con discapacidad visual (ciego) me ha pasado sus respuestas:

¿Crees que la Web (Internet) es el invento más importante del siglo XX?

Viendo esta pregunta desde la óptica de discapacidad, es innegable señalar que sí es uno de los inventos más importantes ya que si pone al alcance de muchos infinidad de posibilidades para entretenimiento, negocios, cultura, aprendizaje, ¿Cuánto más pondrá al alcance de una persona que no puede salir de su casa, porque presenta algún tipo de discapacidad que se lo imposibilite?
Las tecnologías son la llave al conocimiento, y el motor que esa llave enciende es la web.


¿Crees que la Web (Internet) debería aparecer también en una lista de los inventos más importantes de la humanidad?

Sin duda es un elemento trascendental en la vida de muchos, por todos sus alcances, sin embargo, falta más difusión en los sectores sobre todo de escasos recursos, el internet de la mano con la información deben de democratizarse.

Sin embargo su influencia en los que si logran desfrutar de éste, lo hacen acreedor de un lugar en la lista de los inventos más importantes en el mundo.


¿Cómo te ha cambiado la vida la Web?

Si bien es cierto la magnitud de información que se encuentra en bibliotecas, es abrumadora, sin duda lo es más la cantidad que en la internet se encuentra.

En lo personal, y partiendo de que tengo discapacidad visual, el poder acceder a la información a través de medios digitales, alimentados sin duda por la web, hacen que se me abra un abanico de posibilidades para desarrollarme profesionalmente, en muchos ámbitos, como el social, laboral y académico entre otros.

Precisamente internet me ha permitido graduarme en la Universidad Carlos III de Madrid, sin salir de casa en Costa Rica. ¿Qué más puedo acotar sobre sí internet a cambiado mi vida?


¿Qué cosas has dejado de hacer en el "mundo real" porque ahora las haces en el "mundo virtual" de la Web?

Aquí es donde la web se convierte en una maldición, pues no hay que ser genio para saber que antes si bien es cierto las relaciones humanas, eran más limitadas, hoy en día se han acrecentado exponencialmente, pero la web como un ejemplo, Facebook, por citar alguna red social, hace que ya no llames a nadie para desearle un feliz cumple años o desearle felices fiestas, ahora le ponemos un comentario en el muro y listo.

La web ha logrado enfriar las relaciones humanas tu a tu,.

Al ser ciego, nunca entré solo a una biblioteca tradicional, ahora utilizo la web para aprender, conocer e investigar.

Accesibilidad web: claves y consejos

Un webinar que realicé el 25 de junio de 2015:

Una web accesible, es una web abierta a todo el mundo sin excepción. Y es que si no se aplican los principios de la accesibilidad web a la hora de crear, desarrollar y diseñar un sitio web, se cierran las puertas a que muchas personas puedan navegar e interactuar por las múltiples barreras que encuentran y se cierra así la puerta a múltiples visitas, ventas y posicionamiento web por esos usuarios que tienen dificultades de navegación.

En HangoutON nos adentramos en el principio de la accesibilidad web para conocer al detalle en qué consiste, qué marca la ley y sobre todo cómo podemos hacer sitios webs más accesibles atendiendo a varios detalles que pueden pasarnos desapercibidos y que son vitales para navegar sin barreras y ganar así más visitas a nuestro sitio web.

Gulp accessibility

Hace unas semanas estuve en la III Jornada de Accesibilidad Digital 2016 en Costa Rica. Uno de los asistentes, Víctor V.R. (un saludo) me habló de la existencia de Gulp accessibility, un entorno para la automatización de pruebas de accesibilidad.

En gulp-accessibility se dan algunos detalles de su instalación y funcionamiento.

European Internet Inclusion Initiative (EIII)

European Internet Inclusion Initiative es un proyecto financiado por la Unión Europea que tiene como objetivo:

prepare a collection of services in a new combination of existing automated evaluation tools for accessibility and also supports user testing of websites and audio-visual media. EIII is open source to ensure accountability of results and facilitate adoption and competition among vendors.

El proyecto ha desarrollado dos herramientas, Page Checker y PDF Checker.

Ejemplo de sitio web con opciones para mejorar la accesibilidad

OER Commons es un buscador de recursos educativos abiertos que ofrece algunas opciones para mejorar la accesibilidad del sitio web.

Texto y visualización:

Disposición y navegación:

Enlaces y botones:

Accesibilidad a la información digital: Web, redes sociales y aplicaciones móviles

El próximo 3 de diciembre es el Día Internacional de las Personas con Discapacidad. AERCO-PSM, la Asociación española de responsables de comunidad y profesionales social media, organiza Accesibilidad a la información digital: Web, redes sociales y aplicaciones móviles el 29 de noviembre en Madrid:

El objetivo del evento es dar conocer cómo crear una web o nuestro blog para que sean accesibles a los más de 4 millones de personas con discapacidad que tienen dificultades para incorporarse al mundo 2.0. Veremos cómo navega una persona con discapacidad visual en la Web, en las Redes Sociales, y cómo los dispositivos móviles facilitan salvar las barreras que Facebook, Twitter o Snapchat plantean a las personas con discapacidad visual o con movilidad reducida, para participar en igualdad de condiciones y sin problemas de la conversación en redes sociales.
Contaremos con la participación de Lourdes González Perea, responsable de Desarrollo de Negocio y Conocimiento en ILUNION Tecnología y Accesibilidad. Co-Directora del Máster en Tecnologías Accesibles de la Universidad Internacional de la Rioja (UNIR). Experta en Tecnologías Accesibles e I+D+i, y con una amplia experiencia en la gestión de proyectos tecnológicos y de investigación, así como en docencia presencial y on line. Más detalles en su perfil en Linkedin.
La entrada al evento es totalmente gratuita, pero deberás confirmar tu asistencia a través del siguiente enlace de Ticketea ¡hay plazas limitadas!

Ejemplo de periódico accesible

Una persona ciega de Argentina me ha indicado que suele leer el periódico La Nación de Argentina porque es accesible.

Al principio de la página principal existe un enlace con el texto "Si usted es una persona con dificultades visuales, navegue el sitio desde aquí". Este enlace dirige al usuario a la versión sólo texto del sitio web. Esta versión es una simplificación de la versión principal, pero parece que contiene la misma información.

Esto no es la mejor solución para garantizar la accesibilidad, pero es mejor que nada.

Estudio de los productos de apoyo en el Reino Unido

Results of the 2016 GOV.UK assistive technology survey presenta los resultados de una encuesta online que se realizó en el Reino Unido en el mes de mayo de 2016.

Se obtuvieron 712 respuestas completas.

Los datos se presentan de forma muy acertada en forma de gráfico y en forma de tabla, es decir, es accesible el informe, como se puede ver en la siguiente imagen:

En la pregunta tipo de magnificador de pantalla utilizado, ZoomText es el más popular con un 54,3% de los usuarios:

En la pregunta tipo de lector de pantalla utilizado,  el más utilizado es JAWS con un 38,5%, en segundo lugar VoiceOver con un 21,2% y en tercer lugar NVDA con un 12%. A continuación se sitúan otros lectores de pantalla con porcentajes por debajo del 5%:

En cuanto a programas de reconocimiento del habla, parece que el único que se emplea es Dragon Naturallyspeaking:

Online Course on Media Accessibility

Online Course on Media Accessibility es un curso de tipo MOOC gratuito:

The course is structured in four units, which are: Accessibility, Subtitling/Captioning, Audio Description and Sign Language. Regarding the first unit, accessibility, we will go through all the issues related to: why and for whom is it accessibility important or necessary, laws and regulations, rights and duties, etc. The second unit deals with the topic of Subtitling/Captioning. Here we will be going through the different aspects to consider when subtitling, such as translation, timing, scrolling, etc. Units one and three will be tutored by Pilar Orero. Thirdly, we will talk about Audio Description. In this third unit we will highlight the importance of a qualitative description and how to achieve this. This third unit will be tutored by Pablo Romero-Fresco. Lastly, in the four unit, we will talk about Sign Language. This topic involves many different issues, due to the fact that sign language it’s a language itself, so there are many things to take into account. This last unit will be tutored by Marta Bosch-Baliarda.