Consejo 15: Usa las tablas sólo para mostrar datos tabulados

Consejo: usa las tablas sólo para mostrar datos tabulados, es decir, datos o información que se puede organizar por filas y columnas. No utilices las tablas para maquetar, es decir, para definir la presentación visual del contenido de la página.

Cómo lo hago: cuando tengas datos tabulados, muéstralos mediante tablas. Para maquetar utiliza CSS, nunca las tablas. Por ejemplo, si quieres disponer un contenido como un texto en varias columnas, utiliza las nuevas propiedades de CSS3 column-count, column-gap y column-rule (importante: estas propiedades no están soportadas por todos los navegadores, así que por ahora su uso es limitado).

Cómo se benefician los usuarios: algunos grupos de usuarios, en especial los usuarios que utilicen un lector de pantallas, como pueden ser los usuarios ciegos, se benefician del empleo de las tablas para los datos tabulados, ya que los lectores de pantalla proporcionan mecanismos específicos de navegación por las tablas, como por ejemplo, anunciar la posición (fila/columna) y la posibilidad de desplazarse por filas o por columnas en la tabla.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

Consejo 14: Proporciona un título significativo para cada parte individual de una página

Consejo: aunque se desaconseja su uso, una página puede estar compuestas de marcos, ya sea de tipo frame o iframe. Para cada marco (parte), debes proporcionar un título significativo y representativo, es decir, un título que ayuda al usuario a entender el contenido, propósito o función de ese marco sin tener que visitar la página. Cada marco en una página debe tener un título único.

Cómo lo hago: en la definición del marco, ya sea en la etiqueta frame o iframe, debes incluir el atributo title (no confundir con la etiqueta title) para proporcionar una descripción del contenido del marco.

Cómo se benefician los usuarios: algunos grupos de usuarios, en especial los usuarios que utilicen un lector de pantallas, como pueden ser los usuarios ciegos, se benefician ya que los lectores de pantalla proporcionan algunas ayudas, como la "lista de marcos de la página" (y se muestra el título de cada marco) que les ayuda a moverse de un marco a otro en el navegador web.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

Consejo 13: Proporciona un título significativo para cada página

Consejo: proporciona un título significativo y representativo para cada página de tu sitio web, es decir, un título que ayuda al usuario a entender el contenido, propósito o función de una página web sin tener que visitar la página. Cada página debería tener un título único.

Cómo lo hago: el título de una página se define con el elemento (etiqueta) title en el head. El elemento title es obligatorio: una página sin este elemento no es válido.

Cómo se benefician los usuarios: todos los usuarios se benefician de un título correcto, ya que el título se emplea en varios contextos (visiona mi vídeo Errores web: El título de la página). Por ejemplo, el título de la página se emplea para visualizar los resultados de una búsqueda. En especial, se benefician los usuarios que utilicen un lector de pantallas, como pueden ser los usuarios ciegos, ya que los lectores de pantalla proporcionan algunas ayudas, como la "lista de ventanas abiertas" (y se muestra el título de cada página en cada ventana) que les ayuda a cambiar de una página a otra en el navegador web.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

Consejo 12: Especifica el idioma del contenido de cada parte de la página

Consejo: especifica el idioma principal de la página web y de las distintas partes de la página cuando exista un cambio en el idioma.

Cómo lo hago: utiliza el atributo lang para indicar el idioma de las diferentes partes de una página web. Si lo colocas en la etiqueta html, estarás definiendo el idioma principal de la página. Cuando se produzca un cambio de idioma, por ejemplo en un párrafo, puedes añadir el atributo lang a la etiqueta de inicio del párrafo. Si el cambio de produce en un fragmento de texto, puedes utilizar la etiqueta span con el atributo lang para marcar ese cambio.

El valor del atributo lang debe ser un código de idioma definido en IANA Language Subtag Registry, como por ejemplo "es" para el español o "en" para el inglés.

Cómo se benefician los usuarios: muchos buscadores actuales permiten realizar búsquedas selectivas en función del idioma. Para ello, los buscadores pueden autodetectar el idioma de una página, pero algunas veces se equivocan. Con el empleo del atributo lang se mejora la indexación de las páginas web en los buscadores. Además, los usuarios que utilicen un lector de pantallas, se benefician enormemente, ya que los lectores de pantalla pueden detectar el atributo lang y lo pueden emplear para leer con la pronunciación adecuada un texto.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

Aplicación con inteligencia artificial para ayudar a las personas ciegas

La Imagine Cup 2012 que organiza Microsoft está dando muy buenos resultados en cuanto a la accesibilidad y las personas con discapacidad. Y bueno, quizás sea por el tema que tenía este año: Imagina un mundo en el que la tecnología ayuda a resolver los problemas más difíciles.

Hace unos días escribí la entrada Guantes que traducen la lengua de signos en habla en la que me hacía eco de los ganadores de la competición que habían inventado un guante que traduce la lengua de signos en habla.

Ahora acabo de leer el artículo Artificial intelligence app helps blind people en el que se comenta que uno de los finalistas, un grupo de estudiantes de la Universidad de Auckland y la Universidad Tecnológica de Auckland (Australia), han desarrollado un aplicación para teléfonos móviles inteligentes (smarphones) que permite a las personas ciegas percibir lo que tienen alrededor.

La aplicación permite tomar una fotografía y mediante inteligencia artificial se intenta reconocer lo que contiene la fotografía, como formas, colores, texturas y objetos. En aquellos casos en que la inteligencia artificial no sea capaz de reconocer la fotografía, se la envía a un amigo o un voluntario para que realice la descripción de forma manual.

Máster en Tecnologías de Apoyo, Accesibilidad y Diseño para Todos

La Universidad Carlos III de Madrid organiza una nueva edición del Máster en Tecnologías de Apoyo, Accesibilidad y Diseño Para Todos. El máster se compone de dos cursos de especialización que se pueden realizar por separado o de forma conjunta:

• Especialista en tecnologías de subtitulado y audiodescripción
• Experto en tecnologías de accesibilidad web

La información disponible es un poco confusa porque, por ejemplo, aparece fecha de comienzo del programa el 15 de noviembre de 2011, pero es de esperar que actualicen la página web en poco tiempo.

Pregunta: ¿Un buen semáforo?

¿Qué opinas? ¿Te parece un buen rediseño este semáforo? Déjame un comentario con tu opinión o con algún ejemplo de otro sistema que presente el mismo error.

Consejo 11: Emplea algunas etiquetas "olvidadas"

Consejo: emplea algunas etiquetas olvidadas de HTML para mejorar la estructura y la semántica de tus páginas web.

Cómo lo hago: existen algunas etiquetas de HTML como address, blockquote, cite, code y pre que no son muy conocidas y no se suelen emplear. Otras etiquetas que también suelen ser desconocidas, como big, dir, strike o tt no están soportadas en HTML5, así que no conviene utilizarlas (aunque esto puede cambiar en cualquier momento, ya que HTML5 todavía no es una recomendación).

Cómo se benefician los usuarios: en el futuro, cuando los buscadores incorporen más "inteligencia" y la web semántica sea una realidad, el uso de estas etiquetas puede ayudar a mejorar el resultado de las búsquedas. En la actualidad, algunos grupos de usuarios, en especial los usuarios que utilicen un lector de pantallas, se benefician de que se utilicen estas etiquetas, ya que los lectores de pantalla pueden leer el contenido etiquetado con esos elementos con un tipo de voz diferente.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

Control del ordenador con gestos y una webcam

En el periódico La Vanguardia han publicado la noticia Un programa permite a discapacitados controlar el ordenador con una webcam. El sistema, llamado Switch Viacam, es descrito por sus propios autores como:

Switch Viacam (sViacam) es un emulador libre de conmutador basado en webcam. Utilizando una cámara web, puede configurar una área concreta dentro de la cual se detecta movimiento, lo que dispara un clic del ratón o la pulsación de una tecla. Al no basarse en la detección de formas o características particulares, los eventos pueden ser disparados usando casi cualquier parte del cuerpo u objeto que se mueva delante de la cámara. Actualmente permite emular hasta dos conmutadores virtuales.

El programa es gratuito y ha sido desarrollado por la Asociación de Parálisis Cerebral de Tarragona (APPC).

Y un vídeo en el que nos explican cómo se usa y los beneficios que aporta en algunos usuarios:

Guantes que traducen la lengua de signos en habla

En TechCrunch han publicado una noticia muy interesante: Ukrainian Students Develop Gloves That Translate Sign Language Into Speech (Estudiantes ucranianos desarrollan unos guantes que traducen la lengua de signos en habla). Esta noticia también acaba de aparecer en el periódico El Mundo, Ucrania gana la Imagine Cup con un guante que traduce la lengua de signos en letras.

El proyecto, llamado Enable Talk, ha sido presentado en la Imagine Cup organizada por Microsoft que se está celebrando estos días en Sidney. Los guantes están dotados de sensores flexibles, sensores de tacto, giroscopios y acelerómetros. Los guantes se conectan a un teléfono inteligente (smartphone) mediante Bluetooth. El teléfono, mediante un software text-to-speech, es capaz de convertir los gestos de la lengua de signos en habla.

Según la noticia, el coste de este sistema está sobre los $75, mientras que otros sistemas parecidos cuestan más de $1000. ¿Lo podremos comprar dentro de poco?

A continuación un vídeo en el que se explica el proyecto y se puede ver en funcionamiento:



[Actualización 16/07/2012]
Más información en App that allows deaf people to verbally communicate wins Imagine Cup.

Consejo 10: Resalta partes del texto con los elementos apropiados

Consejo: cuando quieras resaltar una parte del texto de una página, por ejemplo con un color o un tipo de letra diferente, utiliza las etiquetas de HTML disponibles para ello. No apliques simplemente un estilo visual diferente con un span y CSS.

Cómo lo hago: utiliza las etiquetas strong (mejor que b) y em (mejor que i) para resaltar aquellas partes del texto que quieras destacar. Posteriormente, con CSS, puedes aplicarles el estilo visual que desees, como cambiar el tipo de letra, el color, el estilo, etc.

Cómo se benefician los usuarios: algunos grupos de usuarios, en especial los usuarios que utilicen un lector de pantallas, se benefician de que se utilicen los elementos de HTML para resaltar partes del texto, ya que los lectores de pantalla pueden leer esas partes con otro tipo de voz para que el usuario perciba que esa parte está destacada. Además, también se beneficiará cualquier usuario que tenga que visualizar una página web sin CSS, ya que los navegadores están preparados para aplicar unos estilos por defecto en ausencia de un CSS.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

Errores web: Renfe y los encabezados

He realizado un vídeo sobre un grave error (creo que ni mis alumnos escriben un código tan malo) que existe en la página de venta de Renfe:


A continuación, la transcripción del audio:

Hola, soy Sergio Luján Mora, profesor de la Universidad de Alicante, y este videotutorial forma parte de una serie de videotutoriales dedicados a estudiar errores de diseño, de usabilidad y de accesibilidad que presentan sitios web importantes.

El sitio web que vamos a analizar a continuación es el del principal operador ferroviario de España, la compañía Renfe Operadora. En la actualidad, Renfe es la única operadora de viajeros del sector ferroviario español.
Hoy, 9 de julio de 2012, este es el aspecto que presenta la página principal del sitio web de Renfe. Podemos ver un par de referencias a la fiesta de San Fermín: muy bien, Renfe dispone de un equipo de desarrolladores web capaces de actualizar y renovar este sitio web cuando sea necesario. ¿Seguro? De esta página me interesa mucho el logotipo del Gobierno de España – Ministerio de Fomento. ¿Por qué?

Recordemos que en España, desde hace tiempo, existen diferentes leyes que establecen los niveles mínimos de accesibilidad web que deben presentar los sitios web de las administraciones públicas o que estén financiados por dinero de las administraciones públicas.

Según la Wikipedia, Renfe Operadora se configura como una entidad pública empresarial dependiente del Ministerio de Fomento.

Por tanto, el sitio web de Renfe debe ser accesible.

Pero además, en el caso de Renfe, se le debe aplicar también la LEY 56/2007, de 28 de diciembre, de Medidas de Impulso de la Sociedad de la Información, ya que en el artículo 2, esta ley obliga a las empresas que cumplan una serie de condiciones a satisfacer un nivel de accesibilidad en sus páginas web equivalente al nivel AA del W3C.

Entre estas empresas, figura en el apartado g “Servicios de transporte de viajeros por carretera, ferrocarril, por vía marítima, o por vía aérea, de acuerdo con lo dispuesto en la normativa específica aplicable”.

Por tanto, el sitio web de Renfe debe ser accesible por partida doble: por ser un sitio web dependiente de las administraciones públicas y por ser un sitio web de una empresa de especial trascendencia económica.

Sin embargo, el sitio web de Renfe no cumple los niveles exigidos de accesibilidad. En este vídeo vamos a ver un pequeño ejemplo de ello.

En concreto, el error que vamos a mostrar consiste en un uso incorrecto de los encabezados, es decir, de las etiquetas h1, h2, h3, etc. Los encabezados ayudan a mejorar la accesibilidad de una página web, ya que, por ejemplo, los usuarios que utilicen un lector de pantallas, como pueden ser los usuarios ciegos, pueden navegar directamente de un encabezado a otro ya que los lectores de pantalla suelen proporcionar una lista con los encabezados de la página.

En la página principal de Renfe, si utilizamos la barra de herramientas Web Developer en Mozilla Firefox para descubrir los encabezados de la página, vemos que aparentemente sólo hay un encabezado, sólo aparece resaltado un único encabezado, lo cual sería un grave error.

Sin embargo, si utilizamos el complemento HeadingsMap también para Mozilla Firefox, podemos comprobar que hay más encabezados, de nivel 1 y varios de nivel 2. ¿Cómo puede ser que Web Developer sólo nos resalte un encabezado?

Si exploramos el código fuente de la página principal encontraremos que existen varios encabezados con la clase “oculto”. ¿Puede ser que estos encabezados se estén ocultando a propósito? ¿O es esto un error?

Al ver la definición de la clase oculto en el CSS, comprobamos que efectivamente los encabezados de nivel 2 que llevan esta clase se han ocultado en la presentación gráfica de la página web, ya que se desplazan fuera de la ventana, y, por tanto, no son visibles, aunque están ahí. Sin embargo, para un usuario que utilice un lector de pantallas sí que estarán disponibles y les ayudarán a navegar por la página web.
Los encabezados se han ocultado correctamente: no se ha usado {display: none}, que no funciona correctamente, ya que también lo oculta a los usuarios de lectores de pantalla.

Así que, como vemos, los desarrolladores web de Renfe saben hacer las cosas bien, muy bien, y en la página principal lo han demostrado, pero como veremos a continuación, tienen mala memoria y a veces se les olvida cómo hacer las cosas bien.

En concreto, veamos la página de “Compra de billetes”, la que sin duda es la más importante para la mayoría de los usuarios que visitan este sitio web, y debería ser la más importante para Renfe, ya que es la página web con la que hace dinero.

Si en esta página, utilizamos otra vez el complemento HeadingsMap para explorar los encabezados de la página descubrimos unos encabezados muy largos y raros. ¡Raro, raro!

Y si validamos el código HTML, nos encontramos con 92 errores y 20 advertencias. ¡¡Madre mía!! ¿Qué está pasando en esta página web?

A los desarrolladores web de Renfe habría que darles un buen tirón de orejas por el código HTML que contiene esta página.

Vamos a ver el código fuente de esta página y así descubriremos el problema que hay con los encabezados.

Aquí podemos ver resaltado el código HTML de este encabezado. El segundo encabezado que vemos aquí, que aparentemente, y realmente, contiene también la barra de selección de idiomas.

Como vemos, no se ha cerrado la etiqueta h1, así que el encabezado sigue, sigue y sigue, hasta que se encuentra el inicio de otro encabezado.

Y aquí, con este encabezado se vuelve a repetir el mismo problema, se les ha olvidado cerrar esta etiqueta h3, así que el encabezado, su contenido, es esto, y esto, y esto, y esto, y todo lo que venga a continuación.

¡Mal, muy mal, fatal!

Y bueno, ya está bien de trabajar gratis para una compañía como Renfe que luego me cobra muy bien sus billetes.

Antes de finalizar este vídeo, me gustaría mandarle un afectuoso saludo a Óscar Gorri y a José María Ortiz por haberme señalado este grave error que existe en la página web de Renfe y que estropea la accesibilidad web.

Y con esto finaliza este videotutorial que ha mostrado un grave error, no sólo de accesibilidad, sino de desarrollo web, que existe en una de las páginas más importantes del sitio web de Renfe.

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.

Consejo 9: Crea listas que realmente son listas

Consejo: crea listas que realmente sean listas. Las listas que no están etiquetadas como listas, como por ejemplo un conjunto de líneas de texto separadas con saltos de línea y con un elemento gráfico a modo de viñeta al principio de la línea dificultan la navegación por el contenido de la página.

Cómo lo hago: utiliza las etiquetas de HTML que se emplean para crear los diferentes tipos de listas: ul, ol, li, dl, dt, dd.

Cómo se benefician los usuarios: algunos grupos de usuarios, en especial los usuarios que utilicen un lector de pantallas, se benefician de las listas "de verdad", ya que pueden navegar entre sus elementos y reciben información del elemento en el que se encuentran. Además, también se beneficiará cualquier usuario que tenga que visualizar una página web sin CSS, ya que si las listas no están correctamente etiquetadas, al eliminar el CSS desaparecerán.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

Consejo 8: Crea encabezados que realmente son encabezados

Consejo: el Consejo 4: Utiliza encabezados para organizar el contenido de tu página explica que los encabezados ayudan a algunos grupos de usuarios a desplazarse de una parte a otra parte de la página saltando de encabezado a encabezado. Pero crea encabezados que realmente sean encabezados.

Cómo lo hago: los encabezados los tienes que crear con las etiquetas correspondientes de HTML: h1, h2, h3, etc. Crear encabezados con otro tipo de elementos, como divs, para luego darles un estilo especial con CSS no sirve para nada.

Cómo se benefician los usuarios: tal como se explicaba en el Consejo 4, algunos grupos de usuarios, en especial los usuarios que utilicen un lector de pantallas, se benefician de los encabezados "de verdad". Además, también se beneficiará cualquier usuario que tenga que visualizar una página web sin CSS, ya que si los encabezados no están correctamente etiquetados, al eliminar el CSS desaparecerán.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

vozMe

vozMe es un servicio gratuito que podemos incorporar en una página web y que permite generar un fichero de audio en formato MP3 en el que se escucha todo o parte del texto que contiene la página.

Esta función, mediante otros sistemas similares, la ofrecen muchos sitios web, como el periódico El Mundo en su apartado Herramientas:

o el periódico 20 Minutos con su versión accesible ofrecida por Inclusite.

En la página Añade voz a tu web se explica cómo incorporar este servicio en los sistemas de blog más conocidos o en cualquier página web.

Consejo 7: Crea contenido para grupos específicos de usuarios

Consejo: aunque esta es una mala práctica, porque al final puedes acabar teniendo varias versiones de una misma página en una misma página (lo cual dificulta su mantenimiento), en algunas situaciones concretas puede ser necesario crear o proporcionar contenido para grupos específicos. Por ejemplo, este consejo ayuda a resolver el problema del Consejo 3: Crea enlaces significativos.

Cómo lo hago: el lenguaje HTML no proporciona un mecanismo propio para lograr este objetivo, así que se tienen que aplicar algunos trucos. Por ejemplo, para ofrecer un contenido específico a los usuarios de lectores de pantalla, no se puede emplear la propiedad de CSS {display: none}, ya que lo oculta en todas las versiones. El truco consiste en desplazar el contenido fuera de la ventana de visualización de la página web y eso se puede lograr de varias formas, cada una con sus ventajas y desventajas. Por ejemplo, una forma es utilizando las propiedades de CSS {position: absolute; left: -5000px;}.

Cómo se benefician los usuarios: se benefician todos los usuarios, ya que podemos ofrecer contenido específico para diferentes grupos.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

Consejo 6: Proporciona enlaces para saltar partes de la página

Consejo: aunque el Consejo 4: Utiliza encabezados para organizar el contenido de tu página y el Consejo 5: Proporciona al principio de la página enlaces para saltar directamente a partes concretas de la página ya proporcionan un método para saltar directamente a partes concretas de la página, proporciona también enlaces para saltar partes de la página que tengan un extensión considerable, como por ejemplo, la cabecera, el menú principal, el menú secundario contextual, el contenido principal y el pie de página.

Este consejo se puede confundir con el Consejo 5: Proporciona al principio de la página enlaces para saltar directamente a partes concretas de la página, ya que son muy similares y se complementan. Pero mientras que el Consejo 5 sugiere colocar una lista de enlaces al principio de la página (Saltar "al" menú principal, Saltar "al" menú secundario, Saltar "al" contenido principal), este consejo sugiere colocar un enlace antes de cada parte para saltarla (Saltar "el" menú principal, Saltar "el" menú secundario, Saltar el contenido principal).

Cómo lo hago: añade un enlace antes de cada parte de la página que tenga una extensión considerable y que al usuario le pueda interesar pasar por encima sin leer su contenido. Para ello tienes que crear puntos concretos (destinos) a los que se pueda saltar en la página. Los puntos concretos los puedes identificar con el atributo id y en el enlace tienes que poner el valor del atributo id precedido por #. Si no quieres que los enlaces se vean en la presentación visual de la página web, utiliza CSS para ocultarlos, pero no utilices {display: none}, ya que lo oculta en todas las versiones. En un próximo consejo veremos cómo ocultar un contenido sólo para ciertos grupos de usuarios.

Cómo se benefician los usuarios: todos los usuarios que utilicen el teclado para manejar el ordenador se pueden beneficiar, ya que normalmente los usuarios no leen las páginas web desde el principio hasta el final, sino que realizan un proceso de exploración visual "saltando de una parte a otra parte de la página", por lo que estos enlaces les pueden ayudar a desplazarse directamente a la parte de la página que les interesa. En especial, se benefician los usuarios que utilicen un lector de pantallas, como pueden ser los usuarios ciegos, ya que así estos usuarios no tienen que escuchar todo el contenido de la página hasta llegar a la zona que les interesa.


Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

Consejo 5: Proporciona al principio de la página enlaces para saltar directamente a partes concretas de la página

Consejo: aunque el Consejo 4: Utiliza encabezados para organizar el contenido de tu página ya proporciona un método para saltar directamente a partes concretas de la página, proporciona también al principio de la página enlaces para saltar directamente a partes concretas de la página, como por ejemplo, el menú principal, el menú secundario contextual, el contenido principal y el pie de página.

Cómo lo hago: crea una lista de enlaces al principio de la página con destinos a puntos concretos de la página (enlaces intradocumentales). Los puntos concretos los puedes identificar con el atributo id y en el enlace tienes que poner el valor del atributo id precedido por #. Si no quieres que los enlaces se vean en la presentación visual de la página web, utiliza CSS para ocultarlos, pero no utilices {display: none}, ya que lo oculta en todas las versiones. En un próximo consejo veremos cómo ocultar un contenido sólo para ciertos grupos de usuarios.


Cómo se benefician los usuarios: todos los usuarios que utilicen el teclado para manejar el ordenador se pueden beneficiar, ya que normalmente los usuarios no leen las páginas web desde el principio hasta el final, sino que realizan un proceso de exploración visual "saltando de una parte a otra parte de la página", por lo que estos enlaces les pueden ayudar a desplazarse directamente a la parte de la página que les interesa. En especial, se benefician los usuarios que utilicen un lector de pantallas, como pueden ser los usuarios ciegos, ya que así estos usuarios no tienen que escuchar todo el contenido de la página hasta llegar a la zona que les interesa.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

Taller de expertos "Accesibilidad Cognitiva"

El CENTAC, el Centro Nacional de Tecnologías de la Accesibilidad, ha publicado el vídeo del taller de expertos (¡casi 2 horas, por favor, la próxima vez organizarlo en varios vídeos!) Accesibilidad Cognitiva:



Se puede encontrar más información en la página web del taller y en la nota de prensa.

Consejo 4: Utiliza encabezados para organizar el contenido de tu página

Consejo: una página web se compone de diferentes partes (componentes, paneles, secciones, widgets, divs o como las quieras llamar). A cada parte significativa debes ponerle un título que la identifique y debes etiquetar ese título con las etiquetas de encabezado. No utilices las etiquetas de encabezado simplemente para resaltar algún texto de tu página web.

Cómo lo hago: debes emplear las etiquetas de encabezado h1, h2, h3, etc. para ponerle un título a cada parte significativa de tu página. Empieza siempre desde h1 para el título de la página y desciende por la jerarquía de encabezados sin dar saltos (por ejemplo, no saltes de  h2 a h4 sin antes haber utilizado h2). Si alguno de los títulos no quieres que aparezca en la presentación normal de la página, utiliza CSS para esconderlo.

Cómo se benefician los usuarios: todos los usuarios se pueden beneficiar, ya que algunos navegadores como Opera permiten desplazarse en una página web entre los encabezados de la página. Sin embargo, está opción es desconocida por la mayor parte del público. En especial, se benefician los usuarios que utilicen un lector de pantallas, como pueden ser los usuarios ciegos, ya que los lectores de pantalla suelen proporcionar una lista con los encabezados de la página para que el usuario pueda navegar directamente a ellos.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.