domingo, 6 de mayo de 2012

Falsos positivos de validadores automáticos de accesibilidad basados en las WCAG 2.0

En este artículo recopilo falsos errores que reportan los validadores automáticos de accesibilidad.

Falso Error 1: campo de texto sin LABEL asociado... pero que tiene un TITLE adecuado

Los criterios de conformidad 1.1.1, 1.3.1, 3.3.2 y 4.1.2 hacen referencia a que un campo de formulario debe estar correctamente identificado, lo que en las WCAG 1.0 era el punto de verificación 12.4 Asocie explícitamente las etiquetas con sus controles. [Prioridad 2]

En estos cuatro criterios de conformidad de las WCAG 2.0 se admite una de estas dos técnicas suficientes para cumplirlos:

  • H44: Using label elements to associate text labels with form controls
  • H65: Using the title attribute to identify form controls when the label element cannot be used

Aunque lo más recomendable siempre es utilizar la técnica H44 y asociar cada campo de formulario (salvo los de tipo button o los input de tipo image, submit, reset y hidden) con su correspondiente label, hay casos en los que no podemos usar label o este podría resultar confuso. En esos casos podemos usar la técnica H65, es decir, no etiquetar el campo con label sino usar el atributo title para etiquetar el campo e identificar su propósito.

Ejemplos en los que podríamos usar el atributo title de un campo de formulario para etiquetarlo en vez de etiquetarlo con label:

  • Cuando para introducir una fecha o un código de cuenta en un formulario tenemos varios campos (por ejemplo campos diferentes para día, mes, año). En estos casos podemos identificar cada uno de esos campos con el atributo title (sin necesidad de que cada uno tenga un label)
  • Cuando tenemos un campo de búsqueda y un botón Buscar sin una etiqueta previa "Buscar" o "Buscador". Si debemos respetar el diseño podemos etiquetar el campo de búsqueda mediante su atributo title. En este caso además contamos con la técnica suficiente G167 Using an adjacent button to label the purpose of a field, en la que se indica concretamente que un botón "Buscar" justo a continuación de un campo de búsqueda es suficiente para cumplir con el criterio de conformidad 3.3.2
  • Una tabla en la que el contenido de alguna de sus celdas sea un campo de formulario. Por ejemplo la tabla resumen de tu pedido en un ecommerce, en la que el contenido de una de sus columnas sea un campo editable con el número de unidades de cada producto.

Sin embargo, hay validadores automáticos de accesibilidad basados en las WCAG 2.0 que anuncian un error cuando encuentran un campo sin un label asociado, aunque este tenga un atributo title adecuado.

Validadores que SÍ dan este falso error: Examinator, tenon.io

Validadores que NO dan este falso error: TAW, AChecker, Deque Worldspace Free Analysis, AccessMonitor

Falso Error 2: imagen que es un enlace y tiene ALT vacío... pero que va acompañada por un texto dentro del enlace

Es el siguiente caso, correcto como se puede consultar por ejemplo en la técnica H2, y que por tanto no está incumpliendo el criterio de conformidad 1.1.1:

<a href="ayuda.html"><img src="image/ayuda.gif" alt="" /> Ayuda</a>

Sin embargo hay validadores automáticos de accesibilidad basados en las WCAG 2.0 que anuncian un error cuando encuentran una imagen dentro de un enlace si dicha imagen tiene ALT vacío, sin tener en cuenta que puede ser un caso como el descrito.

Validadores que SÍ dan este falso error: AChecker

Validadores que NO dan este falso error (o solo advierten que las imágenes decorativas es mejor incluirlas en las CSS): TAW, Examinator , Deque Worldspace Free Analysis, AccessMonitor

Falso Error 3: H2 presente en el código antes que un H1... sin tener en cuenta que estén bien marcados

La técnica H42 Using h1-h6 to identify headings, incluye un ejemplo en el cual el título del contenido principal coincide con el título de la página y está marcado como "H1" aunque no es el primero que aparece en la página. El contenido de la primera y tercera columna es menos importante y está marcado con "H2".

No es necesario que H1 aparezca antes que H2, lo importante es que realmente el título marcado como H1 sea de primer nivel y los marcados como H2 de segundo nivel.

Sin embargo hay validadores automáticos de accesibilidad basados en las WCAG 2.0 que anuncian un error cuando encuentran un encabezado superior colocado en el código después de uno inferior, cuando solo deberían reportar una advertencia para que se revise que están bien marcados.

Validadores que SÍ dan este falso error: Deque Worldspace Free Analysis

Validadores que NO dan este falso error: TAW (en una versión anterior sí daba error pero ya está corregido), Examinator, AChecker, AccessMonitor

Falso Error 4: indicar en cualquier caso que es obligatorio incluir enlaces para saltar bloques de contenido y un primer enlace en la página que lleve al contenido principal de la misma

El criterio de conformidad 2.4.1 Evitar bloques: Existe un mecanismo para evitar los bloques de contenido que se repiten en múltiples páginas web (Nivel A), se puede cumplir de dos formas diferentes (tal y como se puede consultar en Understanding SC 2.4.1):

  • Agrupando los bloques de contenido de manera que los productos de apoyo puedan reconocerlos y saltarlos: estructurar las páginas con encabezados, agrupando los enlaces en listas, etc.
  • Proporcionando enlaces para saltar los bloques de contenido, en cuyo caso se ofrece un listado de técnicas de las que es necesario elegir al menos una, entre ellas las dos que comento.

Por tanto, no se puede reportar siempre y en todos los casos como error que no haya un enlace al comienzo de la página para ir al contenido principal. Puede que la página esté bien estructurada y por tanto se esté cumpliendo con el criterio de conformidad 2.4.1. Puede además que no haya claramente un área de contenido principal y por tanto este enlace no resulte útil.

De la misma manera, no se puede reportar siempre y en todos lo casos que no haya enlaces para saltar bloques de contenido.

Y en cualquier caso, no se debería incluir como error ambas, sino indicar que al menos es necesario una de ellas.

Validadores que SÍ dan este falso error: Examinator, AccessMonitor

Validadores que NO dan este falso error: TAW, Deque Worldspace Free Analysis, AChecker

Falso Error 5: longitud de la descripción del ALT demasiado larga ... pero tiene menos de 150 caracteres

Las WCAG 2.0 no especifican la longitud máxima del atributo ALT. El documento Techniques For Accessibility Evaluation And Repair Tools del W3C indica que la longitud máxima del atributo ALT será de 150 caracteres, aunque otros recursos indican no sobrepasar los 100 caracteres.

Lo apropiado entonces sería que ante un texto alternativo entre 100-150 caracteres el validador ofreciera en todo caso una advertencia, pero no un error.

Validadores que reportan un error:

  • Examinator califica como "Muy mal" un texto alternativo entre 100-150 caracteres.

    Error de eXaminator que indica que el atributo ALT es demasiado largo porque sobrepasa los 100 caracteres

  • tenon.io

Validadores que lo reportan como una alerta

Otros validadores solo te dan una alerta si es mayor de 100 caracteres para que revises la longitud.

  • AChecker, da como "error probable" un ALT mayor de 100 caracteres.
  • Wave, da una alerta si el ALT es mayor de 100 caracteres.

Validadores que no dan error cuando el texto alternativo tiene una longitud entre 100-150 caracteres:

Falso Error 6: reportan como error el uso de accesskey

Las WCAG 2.0 no prohiben el uso de teclas de acceso rápido. Lo que sí debe hacerse es usarlas bien, por ejemplo no asignar una misma tecla a dos enlaces diferentes, o no usar teclas que colisionen con los atajos de menú de los navegadores, como expliqué en Qué teclas de acceso rápido (accesskey) utilizar.

Estés o no a favor de las accesskey, una validador que evalúa de acuerdo a las WCAG 2.0 no puede reportar como error su uso.

Validadores que lo reportan como un error: tenon.io

Hasta aquí los que he detectado por ahora. ¿Conocéis más falsos errores? Es importante documentarlos, porque es difícil convencer a un cliente de que el validador se equivoca, por mucho que lo argumentes.

Artículos relacionados:

1 comentarios :
Carlos Benavidez dijo...

Olga, son muy interesantes tus artículos. Quiero agradecerte porque el falso error 4 me permitirá corregir un error de concepto tanto en Examinator como en AccessMonitor ya que ambas comparten el mismo motor de revisión.
Siempre me pareció excesiva la obligación de incluir los saltos al contenido pero en el texto del criterio 2.4.1 no encontraba ninguna justificación para considerar a esa técnica como opcional.
Recién ahora advierto que la respuesta está en el modo en que se organizan las técnicas suficientes y que el criterio se puede cumplir de dos formas, una de las cuales no incluye los saltos de sección.
Gracias.

Publicar un comentario en la entrada