También existe la vesión sólo texto de esta infografía.
miércoles, 23 de octubre de 2013
La accesibilidad es buena para Ontario
Una infografía publicada en Understanding accessibility:
También existe la vesión sólo texto de esta infografía.
También existe la vesión sólo texto de esta infografía.
martes, 22 de octubre de 2013
Cómo hacer un cuadro de diálogo modal accesible
Imprescindible el artículo The Incredible Accessible Modal Dialog, que explica cómo hacer un cuadro de diálogo modal accesible que tenga en cuenta a los usuarios que utilizan el ordenador con teclado o a los usuarios ciegos (que también lo usan con el teclado, pero que presentan otras consideraciones propias).
La idea general de esta solución es:
La idea general de esta solución es:
- The first focusable item in the modal dialog should receive the keyboard focus.
- The window behind the modal dialog should not be allowed to be clicked on
- The modal dialog must trap the keyboard focus inside the modal dialog so the user can’t accidentally interact with the window behind the modal dialog.
- When the user is on the last focusable item and presses Tab, the user should be taken to the first focusable item in the modal dialog.
- When the user is on the first focusable item and presses Shift-Tab, the user should be taken to the last focusable item in the modal dialog.
- The position of the keyboard focus before the modal window opens must be saved, and the focus must be restored to this location after the modal dialog closes.
lunes, 21 de octubre de 2013
Párrafos correctos
Algo tan simple como la etiqueta "p" de párrafo se puede usar de forma incorrecta y puede acabar originando problemas de usabilidad y accesibilidad.
En el artículo Use the p element to create paragraphs nos explican las ventajas de crear párrafos que son realmente párrafos y no usar la etiqueta "br" para separar el texto:
En el artículo Use the p element to create paragraphs nos explican las ventajas de crear párrafos que son realmente párrafos y no usar la etiqueta "br" para separar el texto:
- Hace más fácil controlar los márgenes de los párrafos con CSS.
- Permite a los usuarios de lectores de pantallas y otros productos de apoyo "ojear" un documento saltando de un párrafo a otro párrafo.
- Describe semánticamente el texto como lo que es, un párrafo.
- HTML4: 9.3.1 Paragraphs: the p element: no uses párrafos vacíos para separar el contenido.
- HTML5: 4.5.1 The p element: no uses el elemento p cuando exista uno más específico (por ejemplo, address), un párrafo no puede contener una lista.
viernes, 18 de octubre de 2013
Contenido dinámico accesible
Mañana sábado 19 de octubre, en el marco de Codemotion, el gran Ramón Corominas dará la charla Contenido dinámico accesible: Yes we can!
La descripción de la charla es:
La descripción de la charla es:
Desde simples menús desplegables, pasando por carruseles, lightboxes... a bloques de información actualizada mediante AJAX; muchos de estos contenidos pueden provocar graves barreras de accesibilidad que deben tenerse en cuenta para no dejar fuera a nadie.
Contenido:
- Lectores de pantalla y buffer virtual
- Casos típicos y sus problemas
- Posibles soluciones accesibles
jueves, 17 de octubre de 2013
Adiós a useit.com
Acabo de descubrir que useit.com, el sito web de Jakob Nielsen, el famoso gurú de la usabilidad, desapareció el 31 de diciembre de 2012.
Este sitio web estuvo en funcionamiento 18 años, y fue bastante criticado ya que su aspecto no ayudaba a su usabilidad... Hasta el periódico The Guardian se hizo eco de ello en el año 2007: The web design guru that web designers love to hate.
En realidad no ha desaparecido, se ha integrado en el sitio web de su empresa, Nielsen Norman Group:
Tampoco es una maravilla del diseño, pero mejorar sí que ha mejorado.
Por cierto, los artículos no se han perdido, los podemos encontrar en Articles.
Y si quieres saber las razones de este cambio, en Alertbox Columns Moved From Useit.com to NNgroup.com las explican.
Este sitio web estuvo en funcionamiento 18 años, y fue bastante criticado ya que su aspecto no ayudaba a su usabilidad... Hasta el periódico The Guardian se hizo eco de ello en el año 2007: The web design guru that web designers love to hate.
En realidad no ha desaparecido, se ha integrado en el sitio web de su empresa, Nielsen Norman Group:
Tampoco es una maravilla del diseño, pero mejorar sí que ha mejorado.
Por cierto, los artículos no se han perdido, los podemos encontrar en Articles.
Y si quieres saber las razones de este cambio, en Alertbox Columns Moved From Useit.com to NNgroup.com las explican.
miércoles, 16 de octubre de 2013
Evaluación de la accesibilidad web
Aunque un poco viejo, es de abril de 2006, el artículo Evaluating website accessibility sigue siendo muy interesante.
Dividido en tres partes, explica paso a paso cómo realizar la accesibilidad de un sitio web. para ello, propone el uso de diversas herramientas, como programas para verificar que el contraste de color es suficiente o Fangs para simular la navegación mediante un lector de pantallas.
Dividido en tres partes, explica paso a paso cómo realizar la accesibilidad de un sitio web. para ello, propone el uso de diversas herramientas, como programas para verificar que el contraste de color es suficiente o Fangs para simular la navegación mediante un lector de pantallas.
martes, 15 de octubre de 2013
Día Mundial de la Vista
El 10 de octubre es el Día Mundial de la Vista. La siguiente infografía creada por la Secretaría de Salud de México nos recuerda algunos datos importantes sobre los problemas relacionados con la vista:
lunes, 14 de octubre de 2013
Artículos sobre la accesibilidad web para las personas mayores
Está página ya tiene unos años, es del año 2008, pero contiene material muy interesante: Web Accessibility for Older Users: A Literature Review.
viernes, 11 de octubre de 2013
Entrevista a una persona sordociega
Hace un par de meses publiqué unos vídeos de una entrevista que realicé a Santi Trigueros, una persona sordociega. A continuación incluyo los tres vídeos que forman la entrevista (los vídeos incluyen subtítulos), junto con un enlace a la publicación original en la que se puede encontrar la transcripción del audio de cada vídeo:
jueves, 10 de octubre de 2013
El uso del atributo title
Llevaba tiempo buscando un artículo que desaconsejase el uso del atributo title, y por fin lo he encontrado: Using the HTML title attribute - updated.
En este artículo se explica que hay ciertos grupos de usuarios que no pueden acceder a la información transmitida a través de este atributo:
Aunque sí que es verdad que hay lectores de pantalla que anuncian al usuario el contenido del atributo title, también es verdad que hay lectores que no lo hacen. Así que, no hay que confiar en este atributo para transmitir información esencial.
[Actualización 11/10/2013]
Más información sobre el atributo title:
En este artículo se explica que hay ciertos grupos de usuarios que no pueden acceder a la información transmitida a través de este atributo:
- Usuarios de teléfonos móviles.
- Usuarios de teclado.
- Usuarios de magnificadores de pantalla.
- Usuarios de lectores de pantalla.
- Usuarios con problemas de movilidad.
- Usuarios con problemas cognitivos.
Aunque sí que es verdad que hay lectores de pantalla que anuncian al usuario el contenido del atributo title, también es verdad que hay lectores que no lo hacen. Así que, no hay que confiar en este atributo para transmitir información esencial.
[Actualización 11/10/2013]
Más información sobre el atributo title:
- El atributo title (2/2/2007)
- Sobre el atributo alt y title, ¿cumplen la misma función? (4/3/2011)
miércoles, 9 de octubre de 2013
Los cursos en Coursera tienen que ser accesibles por contrato
Coursera es una de las plataformas más famosas de cursos MOOC. Si no sabes qué es un MOOC, te recomiendo que consultes mi sitio web ¿Qué son los MOOCs?
En julio del año pasado, alguien le pasó a la prensa el contrato firmado entre Coursera y la Universidad de Michigan: The U. of Michigan's Contract With Coursera. El contrato tiene ¡¡¡42 páginas!!! Es un contrato y lo demás son tonterías.
En el apartado 11 ADA COMPLIANCE se indica que la universidad que ofrece los cursos debe cumplir la ley ADA (Americans with Disabilites Act) y debe ofrecer los contenidos de forma que sean accesibles para las personas con discapacidad, y se indica de forma expresa los usuarios ciegos que utilizan un lector de pantallas. Además, se indica que se tienen que proporcionar los transparencias empleadas en los vídeos y descripciones textuales de cualquier material gráfico usado en los ejercicios de tipo test y en los problemas.
Por su lado, Coursera se compromete a que la plataforma sea accesible, a ofrecer los vídeos subtitulados cuando el número de inscripciones en un curso supere las diez mil personas y a realizar el subtitulado de los vídeos en cursos con un número inferior de inscripciones cuando así lo solicite un usuario discapacitado.
En julio del año pasado, alguien le pasó a la prensa el contrato firmado entre Coursera y la Universidad de Michigan: The U. of Michigan's Contract With Coursera. El contrato tiene ¡¡¡42 páginas!!! Es un contrato y lo demás son tonterías.
En el apartado 11 ADA COMPLIANCE se indica que la universidad que ofrece los cursos debe cumplir la ley ADA (Americans with Disabilites Act) y debe ofrecer los contenidos de forma que sean accesibles para las personas con discapacidad, y se indica de forma expresa los usuarios ciegos que utilizan un lector de pantallas. Además, se indica que se tienen que proporcionar los transparencias empleadas en los vídeos y descripciones textuales de cualquier material gráfico usado en los ejercicios de tipo test y en los problemas.
Por su lado, Coursera se compromete a que la plataforma sea accesible, a ofrecer los vídeos subtitulados cuando el número de inscripciones en un curso supere las diez mil personas y a realizar el subtitulado de los vídeos en cursos con un número inferior de inscripciones cuando así lo solicite un usuario discapacitado.
martes, 8 de octubre de 2013
People-first language
People-first language es una recomendación que existe en inglés para referirse a las personas con discapacidad. Esta recomendación indica que primero hay que hacer referencia a la persona, y después a su condición o discapacidad.
En inglés, los adjetivos se colocan antes del nombre. En español, normalmente se colocan después, por lo que no tiene sentido esta recomendación.
En inglés se puede cambiar la posición del adjetivo con oraciones relativas. Por ejemplo:
"He's retard or a retard" se tiene que decir "He is a person with a cognitive disability".
"She's autistic" se tiene que decir "She is an individual with autism".
"He's a wheelchair bound" se tiene que decir "He uses a wheelchair".
"She's dumb or mute" se tiene que decir "She's unable to speak".
"He's crazy or nuts" se tiene que decir "He is a person with mental illness".
Además, esta recomendación también indica que hay que evitar los nombres genéricos. Por ejemplo:
"the handicapped" o "the disabled" se tiene que decir "people with disabilities" o "people who have disabilities".
Además, sólo se tiene que hacer referencia a la discapacidad cuando realmente sea necesario.
Sin embargo, esta forma de usar el lenguaje no es aceptada por todos. Por ejemplo, la comunidad sorda prefiere que se usen los términos "deaf person" o "hard of hearing person", pero no "hearing impaired".
En España hay un movimiento que aboga por el uso del término persona con diversidad funcional. Y recordemos que otros términos, como minusválido o inválido no se deben usar.
En inglés, los adjetivos se colocan antes del nombre. En español, normalmente se colocan después, por lo que no tiene sentido esta recomendación.
En inglés se puede cambiar la posición del adjetivo con oraciones relativas. Por ejemplo:
"He's retard or a retard" se tiene que decir "He is a person with a cognitive disability".
"She's autistic" se tiene que decir "She is an individual with autism".
"He's a wheelchair bound" se tiene que decir "He uses a wheelchair".
"She's dumb or mute" se tiene que decir "She's unable to speak".
"He's crazy or nuts" se tiene que decir "He is a person with mental illness".
Además, esta recomendación también indica que hay que evitar los nombres genéricos. Por ejemplo:
"the handicapped" o "the disabled" se tiene que decir "people with disabilities" o "people who have disabilities".
Además, sólo se tiene que hacer referencia a la discapacidad cuando realmente sea necesario.
Sin embargo, esta forma de usar el lenguaje no es aceptada por todos. Por ejemplo, la comunidad sorda prefiere que se usen los términos "deaf person" o "hard of hearing person", pero no "hearing impaired".
En España hay un movimiento que aboga por el uso del término persona con diversidad funcional. Y recordemos que otros términos, como minusválido o inválido no se deben usar.
lunes, 7 de octubre de 2013
A la tercera, ¿va la vencida?
Recordemos:
- El 21 de abril de 2012 envié un correo a la Oficina de Información y Atención al Ciudadano del Ministerio de Sanidad, Servicios Sociales e Igualdad solicitando información sobre las denuncias en materia de accesibilidad web presentadas en España: ¿Cuántas denuncias por falta de accesibilidad web se han presentado en España? El escrito fue recibido, pero no me enviaron la información.
- El 8 de abril de 2013 volví a escribir un correo: Segundo intento con el Ministerio. A los dos días me contestaron y me dijeron que "confiaban en que en un muy breve plazo iba a recibir la información solicitada": El Ministerio de Sanidad Contesta. La información no llegó.
- El 1 de octubre de 2013 volví a escribir el siguiente correo. En este caso no he recibido ni un acuse de lectura del correo. Sigo esperando una respuesta.
Hola.
Este es el tercer intento de solicitud de información que realizo. La última vez, como pueden ver en este mensaje, fue en abril de este año. Les recuerdo mi solicitud:
Me pongo en contacto con ustedes para recabar información sobre las sanciones impuestas de acuerdo a la LEY 49/2007, de 26 de diciembre, por la que se establece el régimen de infracciones y sanciones en materia de igualdad de oportunidades, no discriminación y accesibilidad universal de las personas con discapacidad. En concreto, estoy interesado en conocer las sanciones que se han impuesto por incumplimiento de la legislación existente en materia de accesibilidad web, es decir, sitios web que presentan problemas de accesibilidad. Tengo constancia de que la Oficina Permanente Especializada del Consejo Nacional de la Discapacidad tiene abiertos varios expedientes sobre este tema, pero me han indicado que el organismo sancionador es la Dirección General de Políticas de Apoyo a la Discapacidad.
Rogaría que, caso de no ser ustedes, me indicaran a quién debo dirigirme para obtener esta información.
Atentamente,
Sergio Luján Mora
viernes, 4 de octubre de 2013
Un problema de accesibilidad con Flash
Hace unos días, publiqué la entrada El extraño caso de la Confederación Hidrográfica del Segura, en el que mostraba un error que presenta el sitio web de esa entidad.
No tengo ningún problema con esa web, al contrario, me parece que se han preocupado en lograr que sea una buena web, y la accesibilidad ha sido una de sus preocupaciones.
En la página principal hay un panel que muestra el estado de los embalses de la cuenca:
El panel se puede leer bien con un tamaño normal del texto:
Sin embargo, si se amplia mucho el tamaño de la página (si se hace zoom), ocurre algo:
¿Qué ha pasado? ¿Por qué se ve así de mal la leyenda y las etiquetas del gráfico?
¡Es Flash!
Bueno, la culpa no la tiene del todo Flash, porque la lista desplegable en la que se puede elegir un embalse sí que se visualiza correctamente.
No tengo ningún problema con esa web, al contrario, me parece que se han preocupado en lograr que sea una buena web, y la accesibilidad ha sido una de sus preocupaciones.
En la página principal hay un panel que muestra el estado de los embalses de la cuenca:
El panel se puede leer bien con un tamaño normal del texto:
Sin embargo, si se amplia mucho el tamaño de la página (si se hace zoom), ocurre algo:
¿Qué ha pasado? ¿Por qué se ve así de mal la leyenda y las etiquetas del gráfico?
¡Es Flash!
Bueno, la culpa no la tiene del todo Flash, porque la lista desplegable en la que se puede elegir un embalse sí que se visualiza correctamente.
miércoles, 2 de octubre de 2013
KYMCO, creo que me he ganado una moto
Según la Wikipedia, KYMCO es la principal marca de motocicletas de Taiwán.
El sitio web en español de esta marca tiene un apartado sobre la accesibilidad del sitio web.
La declaración de accesibilidad está muy bien:
La verdad es que me ha sorprendido gratamente encontrar esta declaración de accesibilidad en un sitio web que no está obligado a garantizar la accesibilidad.
En una revisión rápida de la página he encontrado algunos detalles interesantes, pero también he encontrado algunas cosas que "chirrían" como una correa de distribución en mal estado.
Por ejemplo, en la página principal aparece un banner central con el texto "Cuando tocas con los pies en el suelo, ¿dónde está tu techo?". Todo el banner es un enlace que lleva a la página de promoción de la KYMCO YAGER GT 125i:
Al ver el código fuente y la página sin hoja de estilo (una simulación rápida de cómo lo percibe una persona ciega que use un lector de pantallas), ¡¡¡no encuentro el enlace!!!
Bueno, sí que encuentro el enlace, ¡¡¡es un enlace vacío!!!
¿Y cuál es el problema? Una persona ciega que utilice un lector de pantallas no tendrá acceso a ese enlace, y por tanto, no tendrá acceso a la información facilitada.
¡Ahhh, pero después hay un span con display:none con un texto significativo! Alguien ha puesto ese span donde no debía... Pero si lo ha puesto con el objetivo de que le aparezca a una persona ciega que utilice un lector de pantallas, se ha equivocado: con display:none se oculta el contenido a todo el mundo.
Hay más, hay más, pero ya que KYMCO parece que se preocupa por la accesibilidad web, no se merece que saque más errores.
¡Ánimo, seguro que lo podéis hacer mejor!
El sitio web en español de esta marca tiene un apartado sobre la accesibilidad del sitio web.
La declaración de accesibilidad está muy bien:
La Web de Kymco está concebida para facilitar el acceso al mayor numero de personas posibles, con o sin limitaciones, sin necesidad de realizar adecuaciones determinadas. Dichas limitaciones pueden ser físicas (visuales, auditivas, cognitivas o motrices) o tecnológicas (conexiones lentas, navegadores obsoletos, dispositivos alternativos, etc.)Seguro que más de uno pensará "¿para qué quiere una persona ciega o con problemas motrices acceder a un sitio web en el que venden motos, si no puede conducir una moto?". Ya, ¿y si le gustan las motos y está buscando información? ¿Y si le quiere comprar una moto a su hijo? ¿Y si la persona ciega o con problemas motrices es el gerente de un concesionario de este fabricante?
La verdad es que me ha sorprendido gratamente encontrar esta declaración de accesibilidad en un sitio web que no está obligado a garantizar la accesibilidad.
En una revisión rápida de la página he encontrado algunos detalles interesantes, pero también he encontrado algunas cosas que "chirrían" como una correa de distribución en mal estado.
Por ejemplo, en la página principal aparece un banner central con el texto "Cuando tocas con los pies en el suelo, ¿dónde está tu techo?". Todo el banner es un enlace que lleva a la página de promoción de la KYMCO YAGER GT 125i:
Al ver el código fuente y la página sin hoja de estilo (una simulación rápida de cómo lo percibe una persona ciega que use un lector de pantallas), ¡¡¡no encuentro el enlace!!!
Bueno, sí que encuentro el enlace, ¡¡¡es un enlace vacío!!!
¿Y cuál es el problema? Una persona ciega que utilice un lector de pantallas no tendrá acceso a ese enlace, y por tanto, no tendrá acceso a la información facilitada.
¡Ahhh, pero después hay un span con display:none con un texto significativo! Alguien ha puesto ese span donde no debía... Pero si lo ha puesto con el objetivo de que le aparezca a una persona ciega que utilice un lector de pantallas, se ha equivocado: con display:none se oculta el contenido a todo el mundo.
Hay más, hay más, pero ya que KYMCO parece que se preocupa por la accesibilidad web, no se merece que saque más errores.
¡Ánimo, seguro que lo podéis hacer mejor!
martes, 1 de octubre de 2013
Tercera edición de iDESWEB
La semana pasada comenzó la tercera edición de iDESWEB, Introducción al desarrollo web.
iDESWEB es un curso de tipo MOOC, totalmente gratuito y disponible en la Web (curso online), con el que vas a aprender los conceptos básicos del desarrollo de aplicaciones web.
Con iDESWEB puedes aprender HTML, CSS, JavaScript, PHP… y los principios básicos del diseño, de la usabilidad y de la accesibilidad web.
El curso tiene una duración de 15 semanas.
iDESWEB es un curso de tipo MOOC, totalmente gratuito y disponible en la Web (curso online), con el que vas a aprender los conceptos básicos del desarrollo de aplicaciones web.
Con iDESWEB puedes aprender HTML, CSS, JavaScript, PHP… y los principios básicos del diseño, de la usabilidad y de la accesibilidad web.
El curso tiene una duración de 15 semanas.
lunes, 30 de septiembre de 2013
Accesibilidad web para las discapacidades cognitivas y los problemas de aprendizaje
Un buen artículo publicado en el sitio web de desarrolladores de Opera: Web accessibility for cognitive disabilities and learning difficulties.
Las personas con una discapacidad cognitiva o problemas de aprendizaje pueden tener problemas en las páginas web con las siguientes tareas:
- Lectura del texto.
- Memoria.
- Resolución de problemas.
- Mantener la atención.
- Calcular.
- Aprendizaje no verbal.
En el artículo se proporcionan consejos para limitar los problemas en estas tareas.
viernes, 27 de septiembre de 2013
Vídeos sobre accesibilidad web publicados en iDESWEB
Un recordatorio de los vídeos sobre accesibilidad web publicados en el curso iDESWEB, Introducción al desarrollo web:
Accesibilidad: Discapacidad en la Web (parte 1)
Qué es discapacidad, tipos de discapacidad (visuales, auditivas, motrices, neurológicas o cognitivas, derivadas del envejecimiento, derivadas del entorno), barreras de la discapacidad visual (ceguera, baja visión, daltonismo), productos de apoyo (lector de pantallas, línea de braille, navegadores de voz, pantallas grandes, ampliadores de pantalla), estrategias.
Accesibilidad: Discapacidad en la Web (parte 2)
Tipos de discapacidad (visuales, auditivas, motrices, neurológicas o cognitivas, derivadas del envejecimiento, derivadas del entorno), discapacidad auditiva (sordera, hipoacusia), discapacidad motriz (muscular, degenerativas), discapacidad neurológica o cognitiva (problemas de aprendizaje, déficit de atención, falta de memoria), discapacidad relacionada con el envejecimiento, limitaciones derivadas del entorno, barreras, productos de apoyo, estrategias.
Accesibilidad web: 4 elementos más problemáticos
¿Qué elemento es el más problemático en una página web?, los cuatro principales problemas de acceso a la información:
1. Flash.
2. Captchas.
3. Enlaces o botones no que no tienen sentido fuera del contexto.
4. Imágenes sin texto alternativo o con un texto alternativo inapropiado.
Accesibilidad: Discapacidad en la Web (parte 1)
Qué es discapacidad, tipos de discapacidad (visuales, auditivas, motrices, neurológicas o cognitivas, derivadas del envejecimiento, derivadas del entorno), barreras de la discapacidad visual (ceguera, baja visión, daltonismo), productos de apoyo (lector de pantallas, línea de braille, navegadores de voz, pantallas grandes, ampliadores de pantalla), estrategias.
Accesibilidad: Discapacidad en la Web (parte 2)
Tipos de discapacidad (visuales, auditivas, motrices, neurológicas o cognitivas, derivadas del envejecimiento, derivadas del entorno), discapacidad auditiva (sordera, hipoacusia), discapacidad motriz (muscular, degenerativas), discapacidad neurológica o cognitiva (problemas de aprendizaje, déficit de atención, falta de memoria), discapacidad relacionada con el envejecimiento, limitaciones derivadas del entorno, barreras, productos de apoyo, estrategias.
Accesibilidad web: 4 elementos más problemáticos
¿Qué elemento es el más problemático en una página web?, los cuatro principales problemas de acceso a la información:
1. Flash.
2. Captchas.
3. Enlaces o botones no que no tienen sentido fuera del contexto.
4. Imágenes sin texto alternativo o con un texto alternativo inapropiado.
jueves, 26 de septiembre de 2013
Accesibilidad de SVG
Current State of Authoring Accessible SVG es un pequeño artículo en el que se tratan dos cosas: las características de accesibilidad que ofrece SVG y el soporte que ofrecen dos herramientas muy populares, Inkscape y Adobe Illustrator, para definir los metadatos necesarios para mejor la accesibilidad.
martes, 24 de septiembre de 2013
El extraño caso de la Confederación Hidrográfica del Segura
Hace unos días me topé con la página de Meteorología de la web de la Confederación Hidrográfica del Segura. En esa página me llamó la atención el mapa de imagen, porque tiene una barra de enlaces que proporciona la misma funcionalidad.
¿Por qué habían puesto esa barra de enlaces los desarrolladores de ese sitio web? ¿Para ofrecer una alternativa y que el mapa de imagen fuera accesible? Seguramente, casi seguro que sí... pero desde hace tiempo no hace falta hacer eso: un mapa de imagen bien hecho es accesible. Pero claro, este mapa de imagen NO ESTABA BIEN HECHO.
Todo eso lo explico en el vídeo ¿Por qué es importante escribir código correcto? El extraño caso de la CHS:
Y la transcripción del vídeo:
Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y este vídeo forma parte de una serie de videotutoriales dedicados a la accesibilidad web. En este vídeo vamos a ver un error que tiene una página del sitio web de la Confederación Hidrográfica del Segura, y cómo afecta este error al funcionamiento de la página y a su accesibilidad.
Recientemente me he topado con el sitio web de la Confederación Hidrográfica del Segura.
En el pie de página de este sitio web podemos ver todos estos logos, que nos dicen que el HTML y el CSS de la página son válidos y que cumple el nivel AA de accesibilidad del W3C.
¿Es verdad que el código es válido? ¿Es verdad que la página es accesible?
Vamos a revisar esta página, la página que permite consultar la meteorología de las provincias que pertenecen a la Confederación Hidrográfica del Segura. En esta página podemos encontrar este mapa.
Al ver este mapa me llamó la atención esta barra de navegación.
¿Para qué incluir esta barra de navegación si un mapa de imagen es accesible si está bien hecho?
Vamos a probar este mapa de imagen con dos navegadores, con Google Chrome y con Microsoft Internet Explorer.
Con Google Chrome podemos ver que al situar el cursor del ratón encima del mapa, aparece el típico “tool tip” que nos proporciona información sobre el destino del enlace.
Por ejemplo, aquí estoy situado sobre Albacete y me dice “Ver predicción meteorológica de Albacete”. Y si aquí me sitúo sobre la provincia de Alicante me dice “Ver predicción meteorológica de Alicante/Alacante”. Además, al pulsar fíjate en la barra de direcciones del navegador, cómo cambia la dirección y se desplaza al destino, el destino que está situado en la misma página web.
Sin embargo, al realizar lo mismo en el navegador Microsoft Internet Explorer 10, fíjate que al situar el cursor del ratón encima del mapa no aparece ninguna información, y el cursor no cambia a una mano para indicar que se puede pulsar. Además, si pulso, fíjate que no pasa nada.
El mapa de imagen no está funcionando. ¿Qué está ocurriendo?
Aquí tenemos el código del mapa de imagen. Podemos ver que hay un error: la referencia al mapa de imagen en la imagen está mal, porque le falta la almohadilla en el nombre.
¿Cómo?
El sitio web de la Confederación Hidrográfica del Segura emplea XHTML 1.0, que son las mismas etiquetas y la misma semántica que HTML 4.01, pero escrito con la sintaxis más estricta de XML.
Si consultamos la recomendación oficial de HTML 4.01 y buscamos la definición del atributo usemap, vemos que nos dice que el valor de usemap debe coincidir con el valor del atributo name del elemento map asociado. Por tanto, podría parecer que está bien hecho, porque en la página sí que coincide el valor.
Pero nos dice algo más, también nos dice que tiene que ser una URI. Y por ser una URI, si hace referencia a un elemento que está en la misma página, debe comenzar con el carácter almohadilla.
Si no nos queda claro, se pueden consultar los ejemplos que hay en la misma página de la recomendación de HTML. Podemos ver que en todos los ejemplos se hace uso del carácter almohadilla.
En la especificación de HTML5 se explica mejor el uso del atributo usemap.
Ahora se indica que el valor de usemap debe ser una referencia de tipo “hash-name”,
que significa que debe comenzar con el símbolo almohadilla.
Vamos a comprobar que al añadir la almohadilla, el mapa de imagen funciona correctamente en todos los navegadores.
Para estudiar este error he aislado el código de la página web que crea el mapa de imagen. Aquí está el código HTML que he copiado de la página de la Confederación Hidrográfica del Segura.
El problema está en este atributo usemap que no lleva la almohadilla. Coincide su valor con el atributo name del mapa de imagen, pero debe de llevar una almohadilla.
Vamos a comprobar este ejemplo en Google Chrome. Recargo la página y fíjate como sí que funciona, se activan las distintas zonas del mapa, pero si pulso la tecla tabulador no puedo desplazarme al mapa de imagen, el mapa de imagen tiene que ser accesible por teclado.
Y en este caso fíjate como los enlaces, que simplemente se van destacando son los de esta barra pero no se activa el mapa de imagen.
Lo mismo ocurre en Internet Explorer. Recargo la página, fíjate que no funciona el mapa de imagen. Y si pulso la tecla tabulador, solamente me desplazo sobre esta barra.
Ahora voy a modificar el mapa de imagen y en el atributo usemap simplemente le voy a poner la almohadilla. Y ahora verás como todo cambia.
¿Moraleja?
Hasta los mismos validadores pueden fallar. En caso de duda, consulta siempre las especificaciones oficiales.
Si quieres saber más sobre la importancia de escribir código HTML correcto, te recomiendo que veas mi vídeo “HTML5: ¿Por qué es importante escribir código correcto?”, compuesto de tres partes.
Y con esto finaliza este videotutorial que ha mostrado un error extraño que presenta una página de la Confederación Hidrográfica del Segura.
Si necesitas más información o quieres contactar conmigo, en mis páginas web http://accesibilidadweb.dlsi.ua.es y en http://desarrolloweb.dlsi.ua.es podrás encontrar más información sobre la accesibilidad web y el desarrollo web o también puedes contactar directamente conmigo a través de mi dirección de correo electrónico sergio.lujan@ua.es o a través de mi cuenta de Twitter @sergiolujanmora.
Muchas gracias por tu atención.
¿Por qué habían puesto esa barra de enlaces los desarrolladores de ese sitio web? ¿Para ofrecer una alternativa y que el mapa de imagen fuera accesible? Seguramente, casi seguro que sí... pero desde hace tiempo no hace falta hacer eso: un mapa de imagen bien hecho es accesible. Pero claro, este mapa de imagen NO ESTABA BIEN HECHO.
Todo eso lo explico en el vídeo ¿Por qué es importante escribir código correcto? El extraño caso de la CHS:
Y la transcripción del vídeo:
Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y este vídeo forma parte de una serie de videotutoriales dedicados a la accesibilidad web. En este vídeo vamos a ver un error que tiene una página del sitio web de la Confederación Hidrográfica del Segura, y cómo afecta este error al funcionamiento de la página y a su accesibilidad.
Recientemente me he topado con el sitio web de la Confederación Hidrográfica del Segura.
En el pie de página de este sitio web podemos ver todos estos logos, que nos dicen que el HTML y el CSS de la página son válidos y que cumple el nivel AA de accesibilidad del W3C.
¿Es verdad que el código es válido? ¿Es verdad que la página es accesible?
Vamos a revisar esta página, la página que permite consultar la meteorología de las provincias que pertenecen a la Confederación Hidrográfica del Segura. En esta página podemos encontrar este mapa.
Al ver este mapa me llamó la atención esta barra de navegación.
¿Para qué incluir esta barra de navegación si un mapa de imagen es accesible si está bien hecho?
Vamos a probar este mapa de imagen con dos navegadores, con Google Chrome y con Microsoft Internet Explorer.
Con Google Chrome podemos ver que al situar el cursor del ratón encima del mapa, aparece el típico “tool tip” que nos proporciona información sobre el destino del enlace.
Por ejemplo, aquí estoy situado sobre Albacete y me dice “Ver predicción meteorológica de Albacete”. Y si aquí me sitúo sobre la provincia de Alicante me dice “Ver predicción meteorológica de Alicante/Alacante”. Además, al pulsar fíjate en la barra de direcciones del navegador, cómo cambia la dirección y se desplaza al destino, el destino que está situado en la misma página web.
Sin embargo, al realizar lo mismo en el navegador Microsoft Internet Explorer 10, fíjate que al situar el cursor del ratón encima del mapa no aparece ninguna información, y el cursor no cambia a una mano para indicar que se puede pulsar. Además, si pulso, fíjate que no pasa nada.
El mapa de imagen no está funcionando. ¿Qué está ocurriendo?
Aquí tenemos el código del mapa de imagen. Podemos ver que hay un error: la referencia al mapa de imagen en la imagen está mal, porque le falta la almohadilla en el nombre.
¿Cómo?
El sitio web de la Confederación Hidrográfica del Segura emplea XHTML 1.0, que son las mismas etiquetas y la misma semántica que HTML 4.01, pero escrito con la sintaxis más estricta de XML.
Si consultamos la recomendación oficial de HTML 4.01 y buscamos la definición del atributo usemap, vemos que nos dice que el valor de usemap debe coincidir con el valor del atributo name del elemento map asociado. Por tanto, podría parecer que está bien hecho, porque en la página sí que coincide el valor.
Pero nos dice algo más, también nos dice que tiene que ser una URI. Y por ser una URI, si hace referencia a un elemento que está en la misma página, debe comenzar con el carácter almohadilla.
Si no nos queda claro, se pueden consultar los ejemplos que hay en la misma página de la recomendación de HTML. Podemos ver que en todos los ejemplos se hace uso del carácter almohadilla.
En la especificación de HTML5 se explica mejor el uso del atributo usemap.
Ahora se indica que el valor de usemap debe ser una referencia de tipo “hash-name”,
que significa que debe comenzar con el símbolo almohadilla.
Vamos a comprobar que al añadir la almohadilla, el mapa de imagen funciona correctamente en todos los navegadores.
Para estudiar este error he aislado el código de la página web que crea el mapa de imagen. Aquí está el código HTML que he copiado de la página de la Confederación Hidrográfica del Segura.
El problema está en este atributo usemap que no lleva la almohadilla. Coincide su valor con el atributo name del mapa de imagen, pero debe de llevar una almohadilla.
Vamos a comprobar este ejemplo en Google Chrome. Recargo la página y fíjate como sí que funciona, se activan las distintas zonas del mapa, pero si pulso la tecla tabulador no puedo desplazarme al mapa de imagen, el mapa de imagen tiene que ser accesible por teclado.
Y en este caso fíjate como los enlaces, que simplemente se van destacando son los de esta barra pero no se activa el mapa de imagen.
Lo mismo ocurre en Internet Explorer. Recargo la página, fíjate que no funciona el mapa de imagen. Y si pulso la tecla tabulador, solamente me desplazo sobre esta barra.
Ahora voy a modificar el mapa de imagen y en el atributo usemap simplemente le voy a poner la almohadilla. Y ahora verás como todo cambia.
¿Moraleja?
Hasta los mismos validadores pueden fallar. En caso de duda, consulta siempre las especificaciones oficiales.
Si quieres saber más sobre la importancia de escribir código HTML correcto, te recomiendo que veas mi vídeo “HTML5: ¿Por qué es importante escribir código correcto?”, compuesto de tres partes.
Y con esto finaliza este videotutorial que ha mostrado un error extraño que presenta una página de la Confederación Hidrográfica del Segura.
Si necesitas más información o quieres contactar conmigo, en mis páginas web http://accesibilidadweb.dlsi.ua.es y en http://desarrolloweb.dlsi.ua.es podrás encontrar más información sobre la accesibilidad web y el desarrollo web o también puedes contactar directamente conmigo a través de mi dirección de correo electrónico sergio.lujan@ua.es o a través de mi cuenta de Twitter @sergiolujanmora.
Muchas gracias por tu atención.
Suscribirse a:
Entradas (Atom)