Buscador

Mostrando entradas con la etiqueta Ejemplos. Mostrar todas las entradas
Mostrando entradas con la etiqueta Ejemplos. Mostrar todas las entradas

viernes, 16 de octubre de 2015

Ejemplo de descripción larga (longdesc)

En Example for Checkpoint 1.1a se muestra un ejemplo de imagen con descripción larga con longdesc.

El atributo longdesc se puede mostrar y activar en los navegadores web de diferentes formas.

En Mozilla Firefox se ha añadido recientemente la opción "Ver descripción" que permite navegar a la página web con la descripción larga:


En Google Chrome es necesario instalar la extensión oficial Longdesc:


Al navegar a la página con la descripción larga se muestra otra página web:

viernes, 28 de octubre de 2011

El antes y después de un sitio web accesible

El W3C ha publicado el sitio web Before and After Demostration que muestra cómo un sitio web no accesible se puede convertir en accesible. El sitio web está compuesto por cinco páginas, y para cada una se incluye la versión no accesible y la versión accesible, junto con comentarios que explican los cambios realizados.

martes, 1 de marzo de 2011

Cómo hacer que un gráfico sea accesible

Si hubiese que elegir una regla o principio que resumiese toda las pautas, guías y consejos para hacer una página web accesible yo me quedaría con ofrece alternativas. No te limites a proporcionar la información en un solo formato, ya que estarás excluyendo a muchos usuarios.

Como suele ocurrir, la teoría es más sencilla que la práctica, y muchas veces es difícil encontrar buenos ejemplos que reflejen la teoría.

Pero acabo de encontrar un buen ejemplo. Un buen ejemplo de cómo hacer que un gráfico sea accesible. Tampoco es que haya descubierto algo sorprendente (lo que vamos a ver se lleva haciendo muchos años con el enlace D de información detallada), pero vale la pena recordarlo.

La página web WebKit SunPider ofrece los resultados de un test para medir el tiempo de ejecución de JavaScript en diferentes navegadores. Es decir, es un test para evaluar el rendimiento de los motores de JavaScript que llevan incorporados los navegadores. Sorprendentemente, el navegador más rápido de todos los probados es la versión candidata de Internet Explorer 9. Y también sorprende que no les importe reconocer que Internet Explorer 8 es el navegador más lento con diferencia (más de 10 veces más lento).

Volviendo al tema de la accesibilidad, como podemos ver en la siguiente imagen, los resultados se ofrecen mediante un gráfico de barras.


La forma correcta de ofrecer información adicional o alternativa sería mediante el atributo longdesc, pero desgraciadamente poca gente lo conoce y mucha menos gente lo usa.

Pero también se ofrece una versión textual en forma de tabla mediante el texto "A textual version of the results can be found here".



Para una persona que no pueda ver, la versión en forma de tabla, que está correctamente etiquetada porque emplea la etiqueta <th> para crear los encabezados de columna, le ofrece la misma información que el gráfico de barras. Pero es que además, la versión en forma de tabla beneficia a todo el mundo: ¿y si quiero hacer un trabajo con esos datos? No hay problema, los puedo copiar y pegar fácilmente a partir de la tabla, no tengo que escribir la tabla desde cero a partir del gráfico.

domingo, 7 de marzo de 2010

Enlaces que no son enlaces

Hace unos días, un amigo me pasó la web que le había hecho una empresa para su negocio. Le eché un vistazo de 5 minutos y encontré un error muy, muy grave de accesibilidad. Además, este error también era importante para el tema de buscadores y posicionamiento.

El error era que el menú o barra de navegación del sitio web se había implementado mediante etiquetas <div> con el atributo onclick y código JavaScript para simular la función de enlace. Para un usuario que utilice un lector de pantallas, para un usuario que utilice un navegador en modo texto o para un buscador, estos "enlaces" no existen y, por tanto, no se puede acceder al contenido del sitio web.

En mi ejemplo Enlaces que no son enlaces explico este error y proporciono dos posibles soluciones.

jueves, 19 de noviembre de 2009

Internacionalización

Según la Wikipedia, la internacionalización es "el proceso de diseñar software de manera tal que pueda adaptarse a diferentes idiomas y regiones sin la necesidad de realizar cambios de ingeniería ni en el código". ¿Qué relación guarda la internacionalización con la accesibilidad web? Está claro que ofrecer un contenido en el idioma preferido del usuario facilita su uso y comprensión para todo el mundo, con o sin discapacidad. ¿Qué dicen las pautas de accesibilidad del WAI respecto al idioma de una página web?

En mi ejemplo Internacionalización detallo las pautas de WCAG 1.0 y WCAG 2.0 que hacen referencia al idioma y explico el correcto uso de los atributos lang y xml:lang.

miércoles, 15 de julio de 2009

Ejemplo de espacio entre las letras de una palabra

Muchos desarrolladores de páginas web introducen espacios en blanco entre las letras de una palabra para crear un efecto visual especial, normalmente cuando la palabra forma parte de un título. Esto ocasiona un grave problema de accesibilidad: un lector de pantalla no lee la palabra entera como tal, sino que la lee letra a letra.

En mi ejemplo Espacio entre las letras de una palabra explico qué propiedades de CSS se pueden emplear para separar las letras de una palabra sin que afecte a su lectura.

domingo, 5 de julio de 2009

Ejemplo de enlace "más información" correcto

En algunos tipos de sitios web, como portales de noticias, de productos o blogs, es muy común mostrar un listado de elementos (noticias, productos o entradas) con un cierto texto breve y con un enlace para obtener el texto completo asociado al elemento (la noticia completa, la descripción completa del producto o la entrada completa). En estos enlaces se suelen emplear textos como "Más información", "Más info", "Más detalle", "Leer más", "Ver más" o incluso simplemente unos puntos suspensivos "...". Estos textos no son descriptivos y no indican el contenido que se va a encontrar, lo cual plantea un problema de accesibilidad.

En mi ejemplo Enlace "Más información" explico cómo se tienen que escribir estos enlaces para que no supongan un problema de accesibilidad.

viernes, 26 de junio de 2009

Ejemplo de formulario con un cuestionario tipo test accesible

En mi ejemplo Formulario con un cuestionario tipo test explico cómo se puede crear un formulario con un cuestionario tipo test que sea accesible. Para ello, se emplean las etiquetas HTML de listas (numeradas y no numeradas) para estructurar de forma accesible las preguntas y respuestas y se utilizan las propiedades de CSS list-style-position y list-style-type para configurar el aspecto visual de las listas.

sábado, 13 de junio de 2009

Ejemplo de encabezados de sección correctos

He creado un nuevo apartado con ejemplos en mi sitio web sobre Accesibilidad web. Escribir allí los ejemplos me es más cómodo que hacerlo aquí en Blogger.

El primer ejemplo es Encabezados, y explica el porqué de su uso. Además de explicar la "teoría", incluyo un ejemplo donde se hacen las "cosas mal", para posteriormente corregirlo con las etiquetas de encabezado (h1, h2, ...). También explico cómo beneficia el empleo de los encabezados a los usuarios discapacitados que utilizan un lector de pantallas e incluyo un par de archivos de sonido con grabaciones de JAWS.

domingo, 11 de junio de 2006

El enlace [D] de información detallada

En la entrada de ayer, El atributo longdesc, expliqué el uso del atributo longdesc que "complementa al atributo alt y se emplea para ofrecer una descripción más larga del elemento que la proporcionada por el atributo alt".

Desgraciadamente, el atributo longdesc no se suele emplear por desconocimiento y por falta de soporte de los agentes de usuario (los navegadores). Si no se puede usar, ¿para qué ponerlo?

Sin embargo, es una buena solución que permite proporcionar información adicional para aquellos elementos que sean muy complejos, como puede ser un gráfico.

En su lugar, hay gente que emplea el enlace [D] (descripción), una enlace textual que se suele situar cerca del elemento al que se refiere, como puede ser el título de un gráfico.

Por ejemplo, en el siguiente código se proporciona un texto alternativo y una descripción larga de un gráfico mediante este método, además, también se emplea el atributo longdesc y se emplean la etiqueta de abreviatura para definir el significado de la letra [D]:

<img alt="Gráfico de las ventas" longdesc="descripcion-ventas.html" src="grafico-ventas.png" />
<a href="descripcion-ventas.html"><abbr title="Descripción del gráfico de ventas">[D]</abbr></a>