Buscador

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

viernes, 24 de octubre de 2014

Uso de las listas para mejorar la accesibilidad

El artículo HTML Lists & Accessibility explica cómo se deben emplear las listas para mejorar la accesibilidad de una página web.

Los consejos que proporciona son:

  • Use appropriate type of HTML list depending on the content of the web page.
  • Do not use HTML list for styles such as indenting (Use CSS instead).
  • Use of appropriate lists helps screen reader users to navigate the webpage comfortably.
  • Unordered list provide a bulleted point by default with each list item, use CSS property to remove it.
  • Ordered list provides sequential numbering with each list item, use CSS to remove them or to change it to other orders such as a, b,c or I, ii, iii etc.

miércoles, 22 de octubre de 2014

Uso de los encabezados para mejorar la accesibilidad

El artículo Heading Structure For Accessibility explica cómo el uso de los encabezados puede ayudar a mejorar la accesibilidad de una página web.

Los consejos que proporciona son:

  • Provide only HTML headings.
  • Provide logical heading structure. Eg: H2 should follow h1, H2 or H3 should follow H2, H3 or H4 should follow H3 and so on.
  • Page should at least have one H1 and it should represent the title of the webpage.
  • The H1 of the page should be at the beginning of the main content.
  • Only one level one heading on a webpage is recommended and maximum two level one headings if the website name also needs to be marked in every page of the website.
  • If another H1 is placed in the web page it should represent the title of the website.
  • It is better to start the page with higher level of heading.
  • Never skip any level of heading.
  • The primary and secondary navigations also can have headings but should be below the level of main heading. Ideally they should be H2 considering level one for main heading.
  • Never use HTML heading for visual appearance.

lunes, 29 de septiembre de 2014

Árbol de decisión para escribir el texto alternativo

Hace unos años escribí la entrada ¿Cuándo escribir el texto alternativo? en la que mostraba un sencillo árbol de decisión para ayudar a escribir el texto alternativo de una imagen.

Olga Carreras publicó hace unos meses Textos alternativos, imágenes accesibles. Herramientas de ayuda: mapa de decisión y wizard online. Ahí propone un árbol de decisión mucho más completo.


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:
  • 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.
Además, en las recomendaciones de HTML del W3C podemos encontrar lo siguiente:

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:
  • 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.
Lo que más me molesta de este atributo últimamente es que hay gente que lo usa en vez del atributo alt para transmitir información alternativa a una imagen.

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:

lunes, 16 de septiembre de 2013

El contenido oculto

Lo de ocultar cierto contenido de una página web para que lo vean ciertos usuarios, pero otros no, en general no es una buena práctica. Dificulta el desarrollo, dificulta el mantenimiento, y al final puede ser un desastre. Por ello, no hay que abusar de esta posibilidad, pero a veces sí que es una buena solución para ciertos problemas/soluciones (por ejemplo, para ofrecer los enlaces de saltar contenido). Pero se tiene que hacer bien.

El artículo Do not use display:none to visually hide content intended for screen readers nos explica que usar display:none para que no se vea cierto contenido, pero con el propósito de que esté disponible para los usuarios que utilicen un lector de pantallas (screen reader) es un completo error.

En este artículo no se comenta cuál es la mejor técnica para esconder cierto contenido y que esté disponible para los lectores de pantalla. Pero yo eso sí que lo expliqué en mi artículo Técnicas para ocultar contenido.

Bonus, cómo se debería hacer usando WAI-ARIA Hiding visible content from screen readers with aria-hidden.

viernes, 6 de septiembre de 2013

El uso de tabindex para mejorar la accesibilidad

En WAI-ARIA se redefine el comportamiento del atributo tabindex de HTML. En WAI-ARIA 1.0 Primer está explicado en el punto 2.1.3. Provision of the Keyboard or Input Focus: "What object am I working on?".

En HTML 4.01 y XHTML 1.x, sólo los controles de los formularios (button, input, select, textarea), los enlaces (a y area) y los objetos (object) pueden recibir el foco. Esto dificulta el desarrollo de interfaces avanzadas en las que con los eventos (onclick, onkeydown) podemos hacer que se pueda interactuar con cualquier elemento de la página.

En WAI-ARIA se puede emplear tabindex para permitir que un elemento cualquiera pueda recibir el foco:
  • Si no está el atributo tabindex, el comportamiento es el normal, y sólo los controles de un formulario pueden recibir el foco con el ratón o desde JavaScript con element.focus().
  • Si tabindex toma un valor negativo (tabindex="-1"), el elemento puede recibir el foco con el ratón o desde JavaScript con element.focus(), pero no se puede navegar a él mediante la tecla tabulación, es decir, el elemento no está en el flujo normal de tabulación.
  • Si tabindex toma el valor cero (tabindex="0"), el elemento puede recibir el foco con el ratón o desde JavaScript con element.focus(), y se puede navegar a él mediante la tecla tabulación (la posición que ocupa en el orden de tabulación es la correspondiente a su posición en el documento).
  • Finalmente, si tabindex toma un valor positivo (tabindex="1"), el elemento puede recibir el foco con el ratón o desde JavaScript con element.focus(), se puede navegar a él mediante la tecla tabulación, y el valor del atributo indica su posición en el orden de tabulación; además, se colocan por delante de cualquier elemento que tenga tabindex="0" o cualquier elemento que reciba el foco de forma natural (los controles de los formularios y los enlaces).
Bueno, esto es la teoría... luego falta que los navegadores y los lectores de pantalla la cumplan.

En tabindex, keyboard focus and some ARIA in screen readers, se presentan los resultados de unas pruebas realizadas con diferentes ejemplos en diferentes navegadores y con diferentes lectores de pantalla. Con JAWS los resultados son los adecuados con Internet Explorer y Firefox, pero con otros lectores de pantalla (NVDA, SAToGo, Windows-Eyes y VoiceOver) ocurren algunas cosas raras.

viernes, 1 de marzo de 2013

Especifica el lenguaje principal que se usa en las páginas

En las páginas web se puede indicar el lenguaje principal (español, inglés, etc.) que se usa mediante el atributo lang en la etiqueta raíz html. Este pequeño acto proporciona importantes beneficios, en especial para las personas que utilicen un lector de pantallas, ya que entonces el programa sabrá cómo leer correctamente el texto de la página.

En el artículo Specify each HTML document's main natural language nos los explican y nos dan algunas referencias para ampliar esta información.

sábado, 15 de diciembre de 2012

Jugando con el atributo longdesc

Interesante el artículo Playing with Longdesc, en el que Karl Groves, uno de los guruses actuales de la accesibilidad web nos explican que en HTML5 no tendremos atributo longdesc y nos muestra algunas alternativas que podemos emplear para suplir esa carencia.


jueves, 3 de mayo de 2012

Técnicas para ocultar contenido

Hace unos días leí el artículo Hiding content untangled: Hiding vs. moving out of the visible viewport. En este artículo nos explican un caso real de una página web en la que se oculta o esconde cierto contenido, para que no se pueda ver, pero con la intención de que un usuario que utilice un lector de pantallas sí que tenga tenga acceso al contenido. En la página analizada, no se hace bien y el resultado es desastroso.

El típico uso de esta técnica se aplica con los enlaces "saltar a", pero como expliqué hace tiempo en la entrada Enlace de "saltar navegación", en muchos casos puede ser mucho mejor mostrar el contenido a todos los usuarios, ya que quizás no nos demos cuenta, pero puede haber otros usuarios que también se beneficien del contenido que queremos ocultar.

En el artículo que indico al principio se nos explica que desde hace muchos, muchos años, está extendida la idea de que display: none o visibility: hidden esconde el contenido "de la vista", pero sigue estando disponible para un usuario que utilice un lector de pantallas. Sin embargo, esto es totalmente falso, el contenido no está disponible para ningún usuario. Entonces, ¿qué hay que usar para este objetivo?

Antes que nada, según lo anterior, display: none es la mejor opción para lograr otros efectos, como por ejemplo para crear un menú desplegable (dropdown menu): el menú aparecerá y desaparecerá tanto para el usuario vidente como para el invidente.

Si se quiere ocultar cierto contenido sólo a los usuarios videntes, uno de los métodos más sencillos de entender y de aplicar es el posicionamiento fuera de pantalla, que se puede lograr con reglas como text-indent: -999em o top: -999em.

Si se quiere leer un estudio riguroso sobre todas las posibilidades que existen, recomiendo el artículo Ocultar contenido sin comprometer la accesibilidad ni el posicionamiento de la página de Olga Carreras, que realiza un repaso muy exhaustivo sobre las principales técnicas, con sus ventajas y desventajas.

Y si alguien quiere más información, un par de artículos en inglés:

jueves, 12 de abril de 2012

Pequeña mejora en la accesibilidad de Blogger

Recordemos que según la Web Accessibility Initiative (WAI), la accesibilidad web depende de tres elementos (Essential Components of Web Accessibility):
  • Los desarrolladores web, que emplean las herramientas de autor,
  • para crear el contenido web,
  • al que los usuarios acceden mediante agentes de usuario (navegadores) y productos de apoyo.

Diagrama que explica los tres elementos esenciales de la accesibilidad web: desarrolladores, contenido, usuarios

Para que la accesibilidad web funcione, los tres elementos deben funcionar correctamente. Para cada uno de esos elementos, el WAI ha creado guías concretas:


Los gestores de contenido (Content Management Systems, CMS) es el software más popular que se emplea hoy en día para crear sitios web. Ejemplos de este software son WordPress o Blogger, el software con el que está hecho este blog. Los gestores de contenido son herramientas de autor y, por tanto, se les aplican las pautas de ATAG.

El punto de verificación 3.1 de ATAG 1.0 dice:
3.1 Prompt the author to provide equivalent alternative information (e.g., captions, auditory descriptions, and collated text transcripts for video).
Traducido al castellano:
3.1 Pida al autor que proporcione información alternativa equivalente (por ejemplo, títulos, descripciones auditivas, y transcripciones intercaladas de texto para el vídeo).
Si consultamos el documento de técnicas para este punto de verificación, comprobamos que se relaciona con diferentes puntos de verificación de WCAG 1.0, como por ejemplo el 1.1 "Proporcione un texto equivalente para todo elemento no textual".

Desde hace años, cuando doy un curso y explico la accesibilidad de los gestores de contenido, comparo la forma de cumplir esta pauta en WordPress y en Blogger cuando se inserta una imagen.

En el caso de WordPress, al insertar una imagen se muestra un panel para que el usuario/autor introduzca información sobre la imagen, incluido el texto alternativo de la imagen que se utilizará en el atributo alt.


Sin embargo, en Blogger, hasta hace poco, era imposible introducir el texto alternativo. Existía una opción llamada "Añadir leyenda" que podía parecer que servía para eso, pero simplemente añadía el texto como pie de figura. Si alguien quería definir el texto alternativo de una imagen lo tenía que hacer editando directamente el código HTML, cosa que la mayoría de los usuarios de Blogger o de WordPress no saben hacer.

Afortunadamente, en Blogger recientemente han añadido una opción más llamada "Properties" (es tan reciente que todavía no han tenido tiempo de traducirla al castellano), como podemos ver en la siguiente imagen:


Al pulsar en "Properties" se muestra un panel en el que se puede introducir tanto el texto para el atributo title como para el atributo alt (otra vez, se les ha olvidado traducirlo al castellano):


Finalmente, si revisamos el código HTML que genera Blogger, podemos verificar que sí que se añaden los atributos title y alt a la etiqueta img:


martes, 27 de diciembre de 2011

Visualización de las teclas de acceso rápido o atajos de teclado

Las teclas de acceso rápido o atajos de teclado son pulsaciones de varias teclas que permiten acceder directamente o ejecutar una opción de un programa. Por ejemplo, en Microsoft Word, la pulsación de Ctrl+N aplica el formato negrita o la pulsación de Alt+A permite acceder al menú archivo.

En este blog he escrito varias veces sobre este tema en el pasado:
En las Pautas de Accesibilidad al Contenido en la Web 1.0 del WAI, el punto de verificación 9.5 dice:
9.5 Proporcione atajos de teclado para los vínculos más importantes (incluidos los de los mapas de imagen de cliente), los controles de formulario y los grupos de controles de formulario. [Prioridad 3]
Por ejemplo, en HTML, especifique los atajos a través del atributo "accesskey".
Desgraciadamente, el empleo de los atajos de teclado no está muy extendido y siempre ha habido gente a favor y en contra de su uso por los problemas que conlleva:
  • El usuario no sabe si están definidos o no los atajos de teclado.
  • El usuario no sabe qué teclas se han asignado a los atajos de teclado.
  • Los atajos de teclado pueden causar conflicto con los atajos de teclado del navegador, con los del sistema operativo o con los del lector de pantallas.
  • El usuario no sabe cómo activar los atajos de teclado (cambia de un navegador a otro y de un sistema operativo a otro).
  • El usuario no puede pulsar las combinaciones de tecla de los atajos de teclado.
Acabo de descubrir que en el navegador Opera los dos primeros problemas están resueltos, como vamos a ver a continuación.

La página web de la Seguridad Social de España tiene definidos algunos atajos de teclado. Normalmente, en la página dedicada a la accesibilidad se suele incluir la lista de atajos de teclado de un sitio web, y así ocurre en la página sobre accesibilidad de la Seguridad Social:


En el navegador Opera la combinación de teclado Mays (Shift) + Esc muestra una ventana flotante en la que se listan los atajos de teclado que contiene la página:


Como podemos ver en la imagen anterior, en primer lugar aparece la tecla correspondiente al atajo de teclado y a continuación aparece la URL de destino del enlace, ya que en este caso los atajos de teclado están asociados a enlaces. Sin embargo, que aparezca la URL no es muy útil, ya que muchas veces la URL no es suficientemente significativa como para que el usuario sepa cuál es el destino del enlace.

He realizado una prueba: he creado una página web sencilla con una lista de enlaces y un formulario con varios controles. Tanto los enlaces como los controles del formulario tienen definido un atajo de teclado con el atributto accesskey. Además, he usado el atributo title para proporcionar información adicional sobre los enlaces o los controles. Como se puede ver en la siguiente imagen, cuando un enlace o un control tiene el atributo title definido, Opera lo emplea al mostrar la lista de atajos de teclado, por lo que se puede emplear para proporcionar información sobre el uso y finalidad de los atajos de teclado.


Por ahora, me parece que Opera es el único navegador que ofrece esta funcionalidad, ya que he consultado los atajos de teclado de Mozilla Firefox, y no aparece nada parecido.

lunes, 1 de agosto de 2011

Características accesibles de HTML/XHTML

La página HTML/XHTML Accessibility Features contiene una lista de los elementos (etiquetas) y atributos de HTML 4.01 (XHTML 1.0) que podemos emplear para mejorar la accesibilidad de un sitio web:

Tablas
  • table: el atributo summary
  • th/td: el atributo scope
  • th/td: el atributo headers
Formularios
  • Los elementos fieldset y legend
  • El elemento label
Imágenes
  • El atributo alt
  • El atributo longdesc
En general
  • El título de la página: el elemento title
  • Los encabezados de la página: los elementos h1-h6
  • Las listas de elementos: los elementos ul/ol

martes, 21 de junio de 2011

Problemas con las entidades HTML

En el apartado  5.3 Character references de la especificación de HTML 4.01 del W3C encontramos la siguiente definición de referencias de caracteres:
Una codificación de caracteres dada puede no ser capaz de expresar todos los caracteres del conjunto de caracteres del documento. Para tales codificaciones, o cuando las configuraciones de hardware o de software no permitan a los usuarios introducir algunos caracteres del documento directamente, los autores pueden usar referencias de caracteres SGML. Las referencias de caracteres son un mecanismo independiente de la codificación de caracteres para introducir cualquier carácter del conjunto de caracteres del documento.

Las referencias de caracteres en HTML pueden aparecer de dos maneras:
  • Referencias numéricas de caracteres (bien decimales, bien hexadecimales). Por ejemplo: å o &Xe5;
  • Referencias a entidades de caracteres. Por ejemplo, å


Esta claro que las referencias a entidades de caracteres son más útiles porque son más intuitivas y más fáciles de recordar. En el capítulo 24 Character entity references in HTML4 de la especificación de HTML 4.01 se pueden encontrar las listas de referencias a entidades de caracteres definidas en HTML 4.

En principio, si se emplea la codificación Unicode ya no es necesario utilizar las referencias a entidades de caracteres, ya que esta codificación permite representar todos los caracteres. Sólo hay cuatro caracteres especiales que por tener una función especial en HTML sí que se tienen que representar como referencias a entidades de caracteres para evitar confusión:
  • "&lt;" representa el signo <.
  • "&gt;" representa el signo >.
  • "&amp;" representa el signo &.
  • "&quot;" representa el signo ".
En la página 10 HTML Entity Crimes You Really Shouldn't Commit nos explican 10 errores típicos que se cometen por un no uso de las referencias a entidades de caracteres. Estos errores pueden perjudicar la accesibilidad de una página web, en especial pueden perjudicar a los usuarios invidentes que utilicen un lector de pantallas, ya que el lector de pantallas puede vocalizar un carácter erróneo y puede crear cierta confusión.

Los 10 errores típicos son:
  1. No convertir el "ampersand": &amp;
  2. Uso de una elipsis propia (...): &hellip;
  3. Uso incorrecto del guión "em": &mdash;
  4. Uso incorrecto del gión "en": &ndash;
  5. Uso de un símbolo de copyright propio: &copy;
  6. Uso de un símbolo de marca registrada propio: &trade;
  7. Uso de fracciones como texto plano: &frac14; &frac12; &frac34;
  8. Uso de texto plano como símbolos matemáticos: &times; &divide;
  9. Uso de la "o" como símbolo de grados: &deg;
  10. Uso incorrecto de las comillas simples y dobles: &lsquo; &rsquo; &ldquo; &rdquo;

martes, 7 de junio de 2011

Generador de formularios accesibles

Quick Form Builder es una herramienta en línea que permite construir formularios accesibles de forma rápida y sencilla. Las opciones más interesantes que incorpora son:

  • Permite emplear los nuevos tipos de controles de HTML5, como correo electrónico, selector de fecha, selector de color, etc.
  • Etiqueta los nombres de los controles con la etiqueta <label>.
  • Emplea el atributo labelledby de ARIA.



domingo, 29 de mayo de 2011

Encabezados: h1, h2, h3, ...

Las etiquetas de encabezados (<h1>, <h2>, ..., <h6>), permiten estructurar el contenido de una página web y organizarlo en secciones. El W3C, en su Guía breve sobre accesibilidad recomienda el empleo de estas etiquetas para organizar las páginas web.

Para comprobar la estructura de una página web y ver si se están utilizando correctamente estas etiquetas disponemos de varias herramientas.

En Mozilla Firefox podemos emplear el complemento (add-on) HeadingsMap, que genera un índice o mapa de cualquier página web estructurada mediante el uso de encabezados. Además, este complemento permite navegar por la página web saltando de un encabezado a otro, tal como lo hacen los usuarios que utilizan un lector de pantallas.


En Opera podemos emplear la opción de menú View, Styles, Table of Contents, que genera una página web en la que se muestran únicamente los encabezados que posee la página web.


jueves, 26 de mayo de 2011

Soporte del atributo longdesc en los editores de HTML actuales

El atributo longdesc complementa al atributo alt y se emplea para ofrecer una descripción más larga del elemento que la proporcionada por el atributo alt. Las etiquetas de XHTML que admiten este atributo en la versión 1.0 son: img, iframe y frame. Su valor tiene que ser una Uniform Resource Identifier (URI), la dirección de un recurso en Internet.

La función de este atributo es desconocida por la mayoría de los desarrolladores web. Y algunos que sí que conocen su existencia, piensan que en el valor de este atributo se debe escribir la descripción larga, como si fuera el atributo alt.

En el artículo WYSIWYG support for @longdesc today se analiza cuál es el soporte de este atributo en los editores WYSIWYG más conocidos:
  • Adobe Dreamweaver
  • CKEditor
  • TinyMCE
  • WordPress Plugin
La conclusión del artículo es que en el pasado se hacía un uso incorrecto de este atributo, pero que en la actualidad los editores visuales ayudan a utilizar este atributo correctamente.

jueves, 5 de mayo de 2011

Cambios en el uso del atributo alt en HTML5

HTML5 continúa en fase de borrador (draft), pero según el último calendario de desarrollo, el próximo mes será la petición del último borrador (Last Call Working Draft).

En HTML5 Accessibility Chops: the alt decision podemos leer que ha habido un giro inesperado en el uso del atributo alt en las imágenes. El tema es bastante complejo y confuso, pero si se llega a aceptar, cosas como
<!DOCTYPE HTML>
<html>
<head>
 <title>photos</title>
 <meta name=generator>
</head>
<body>
<img src="dsksk231.jpg">
</body>
</html>
o
<img src="chart.gif" title="poot">

¡serán válidas!

jueves, 7 de abril de 2011

Microsoft anuncia herramientas gratuitas de accesibilidad

La noticia Microsoft Announces Free Accessibility Tools and Training for Developers nos cuenta que Microsoft ha publicado Microsoft Accessibility Tools & Training, un conjunto de herramientas, seminarios de formación y otros recursos disponibles de forma gratuita en la Web.

Lo más interesante que he encontrado en esta web hasta ahora es:

viernes, 4 de marzo de 2011

Sobre el atributo alt y title, ¿cumplen la misma función?

Me escribe una alumna de la asignatura Experiencia de usuario del Curso de especialista en diseño web:
Estoy mirando varias páginas para la actividad voluntaria de accesibilidad web, pero me están surgiendo algunas dudas con las etiquetas. Por ejemplo, después de leer los apuntes me ha quedado claro que cuando se pone una imagen, se debe incluir la etiqueta (alt=" "),  sin embargo, estoy viendo una web en la que aparece de la siguiente forma:

<div id="Clogo">
<img alt="Escudo Institucional" src="images/logo.jpg" title="Escudo Institucional" />

En este caso concreto, ¿la etiqueta (title= " ") cumple la misma función?
La alumna no me ha dicho en su mensaje dónde ha encontrado este ejemplo,  pero uno que es "perro viejo" lo ha encontrado fácilmente: se trata de la web oficial de la Junta de Extremadura.

La respuesta es NO, no cumple la misma función. Si leemos la recomendación del W3C sobre HTML podemos sacar las siguientes conclusiones:

  • El atributo alt se emplea como representación alternativa, es decir, como sustituto de la imagen. Por ejemplo, cuando se decide no cargar las imágenes de una página (por ejemplo, porque la conexión a Internet es lenta o nos cobran mucho dinero por ello, como puede ser desde un teléfono) o cuando alguien no puede ver las imágenes (por ejemplo, un ciego). Este atributo es obligatorio.
  • El atributo title se emplea para proporcionar información adicional, no para proporcionar información que sustituya al elemento al que se aplica (en este caso a una imagen). Por ejemplo, se puede emplear para indicar el autor de una fotografía, la fecha de realización de una fotografía o el origen de una imagen, pero siempre como información complementaria. Este atributo es opcional.
Por tanto, en este caso concreto, está mal utilizado el atributo title. Se emplea para proporcionar exactamente la misma información que con el atributo alt, lo cual, más que ayudar, es una barrera (a nadie le gusta leer o escuchar dos veces lo mismo). Si vemos el código de la página de la Junta de Extremadura, comprobaremos que esta forma de actuar se repite en más sitios.

Esta página es el típico caso de accesibilidad web mal entendida: el desarrollador de la página lee alguna guía, lee algún artículo, consulta algún ejemplo, pero en realidad no entiende lo que está haciendo, simplemente lo repite como un loro.

La guinda de esta página web la podemos encontrar en su pie. Por un lado, podemos encontrar el mensaje "Resolución Óptima 1024x768 px.", que ya comenté un caso parecido hace unos días en Tonterías, las justas. Por otro lado, podemos encontrar las medallas de "XHTML 1.0" válido (pero no es así, a mí me han salido 3 errores de validación) y "WAI-AA" (hay algunas cosas básicas que se deberían corregir, como esta del atributo title).


[Actualización 04/03/2011]
En realidad, en este ejemplo, la imagen en cuestión sólo realiza una función decorativa, por lo que lo mejor, lo más accesible es emplear un texto alternativo nulo (simplemente alt=""), y por supuesto, no utilizar el atributo title.