html5 svg accessibility mathml alt-attribute

html5 - Accesibilidad: convención de texto alternativo recomendada para SVG y MathML?



accessibility alt-attribute (5)

Con respecto a SVG, similar pero no idéntica a las sugerencias anteriores, parece que el mejor enfoque actual puede ser utilizar el etiquetado aria al referirse a la identificación del elemento que contiene el ''texto alternativo'' (no el texto alternativo en sí).

<svg aria-labelledby="svg1title"> <title id="svg1title">A wide rectangle</title> <rect width="70" height="10" fill="black" /> </svg>

También puede usar los elementos de título y desc configurando aria-labelledby = "svg1title svg1desc".

Fuente: http://www.sitepoint.com/tips-accessible-svg/

De forma molesta, si haces esto necesitarás (de alguna manera) asegurarte de que los ID sean únicos dentro de toda la página (en otras palabras, si usas muchos SVG, todos deben tener ID diferentes para el título). Esto también se aplica a otros ID dentro del SVG y es una molestia general grave con SVG en línea.

(Si esto es muy problemático, es posible que desee considerar la incorporación de SVG utilizando la etiqueta img; aún puede hacer esto ''en línea'' sin un archivo externo si utiliza una URL de datos y codifica en base64 el SVG).

Visión de conjunto

HTML5 ahora permite el marcado <svg> y <math> con un documento HTML sin depender de espacios de nombres externos (descripción decente here ). Ambos tienen sus propios análogos de atributos alt (consulte a continuación) que el software actual de lectores de pantalla ignora. Por lo tanto, estos elementos son inaccesibles para los usuarios ciegos.

¿Hay planes para implementar una convención estándar de texto alternativo para estos nuevos elementos? ¡Revisé los documentos y salí seco!

Detalles adicionales

En cuanto a SVG: un texto alternativo de SVG podría considerarse el contenido del title raíz o etiqueta desc .

<svg> <title>An image title</title> <desc>This is the longer image description</desc> ... </svg>

He encontrado one lector de pantalla que lo lee como tal, pero ¿es este el estándar? Los métodos anteriores para insertar SVG también tenían problemas de accesibilidad, ya <object> etiquetas <object> son tratadas de forma incompatible por los lectores de pantalla.

Con respecto a MathML: el texto alternativo de MathML debe almacenarse en el atributo alttext .

<math alttext="A squared plus B squared equals C squared"> ... </math>

Dado que los lectores de pantalla no parecen reconocer esto, la biblioteca de representación matemática MathJax inserta texto en un atributo aria-label en tiempo de ejecución.

<span aria-label="[alttext contents]">...</span>

Desafortunadamente, NVDA, JAWS y otros aún no leen estas etiquetas de manera confiable. (Más sobre WAI-ARIA )

En cuanto a ambos: sin éxito con los atributos ARIA, en su mayoría no compatibles, intenté usar los atributos del title . Estos también parecen ser ignorados en estos elementos HTML "extranjeros".

Envolver

Más que un truco rápido, estoy buscando la forma recomendada de colocar texto alternativo en estos nuevos elementos HTML. Tal vez hay una especificación W3C que estoy pasando por alto? ¿O todavía es demasiado temprano en el juego?

Después de algunas excavaciones, encontré algunas recomendaciones algo oficiales. Desafortunadamente, la mayoría no son funcionales en este momento. Tanto los navegadores como los lectores de pantalla tienen mucho que implementar antes de que las Matemáticas y SVG se puedan considerar accesibles, pero las cosas comienzan a mejorar.

Descargo de responsabilidad: las recomendaciones a continuación son las que obtuve en los últimos meses de codificación. Si algo está mal, por favor avíseme. Trataré de mantener esto actualizado a medida que progresen los navegadores y el software AT.

MathML

Recomendación

Use role="math" junto con una aria-label en una etiqueta div circundante (ver docs ). La adición de tabindex="0" permite a los lectores de pantalla enfocarse específicamente en este elemento; la aria-label este elemento se puede pronunciar usando un atajo de tecla especial (como NVDA+Tab ).

<div role="math" tabindex="0" aria-label="[spoken equivalent]"> <math xmlns="http://www.w3.org/1998/Math/MathML"> ... </math> </div>

Limitaciones / Consideraciones

  • Soporte de lector de pantalla incompleto en aria-label (y menos importante role="math" ).
    Actualización: entradas relevantes de NVDA con respecto aria-label here y here .
  • Envolver etiquetas div o span parece innecesario ya que las math son un elemento de primera clase en HTML5.
  • Encontré muy poca referencia a la etiqueta MathML alttext .
    Actualización: parece ser una adición específica de DAISY , que se describe here .

Referencias

SVG

Recomendación

Use las etiquetas de <title> y <desc> nivel superior junto con role="img" y aria-label en la etiqueta SVG raíz.

<svg role="img" aria-label="[title + description]"> <title>[title]</title> <desc>[long description]</desc> ... </svg>

Limitaciones / Consideraciones

  • A partir de febrero de 2011, IE 9 beta lee todas las etiquetas <title> y <desc> , lo que probablemente sea indeseable. Sin embargo, NVDA, JAWS y WindowEyes leerán la aria-label cuando el elemento también contenga role="img" .
  • Si carga un archivo SVG (es decir, no en línea en HTML), la etiqueta <title> nivel raíz se convertirá en el título de la página del navegador, que será leído por el lector de pantalla.

Referencias

En general, HTML5 intenta desalentar a los autores para que proporcionen contenido que está oculto a los usuarios, porque (a) a menudo contiene información nueva que sería útil para los usuarios videntes, (b) a menudo está mal escrito porque hay pocos comentarios (normalmente ) autor con vista, y (c) no se mantiene con tanto cuidado y, por lo tanto, puede quedar obsoleto rápidamente.

Entonces, en lugar de ocultar la información en un atributo, considere colocarlo normalmente en la página como un título en una etiqueta <p> adyacente a la sección svg o matemática, o coloque el texto en una etiqueta <figcaption> y ponga eso y la sección svg / math en un elemento <figure> .

Si realmente no desea que los usuarios de la vista vean la información, creo que la técnica estándar es posicionar la leyenda con un gran valor "izquierdo" negativo, al menos hasta que los lectores de la pantalla se pongan al día con HTML5.

En teoría, una imagen svg debería ser más accesible que una imagen raster con una etiqueta alt. Por un lado, el texto puede mantenerse como texto en un svg, fragmentos enteros de texto, no solo una frase corta. Es triste si los lectores de pantalla ignoran esa información adicional. Sin embargo, no todo el contenido de texto puede estar visible en un momento dado, lo mismo que para html. Muchas imágenes svg son imágenes estáticas, pero una tendencia creciente (basada en el uso real en la web abierta) parece ser el uso de svgs más dinámicos, por ejemplo, para mostrar gráficos o diagramas que se pueden editar o plegar.

Otra cosa a tener en cuenta es que los elementos <title> se mostrarán como información sobre herramientas (para usuarios videntes) en todos los navegadores compatibles con svg AFAIK (al menos en la última generación), y que también se pueden poner dentro de otros elementos svg (el el título se aplica al elemento al que es hijo directo).

No lo he probado, pero podría intentar agregar alt = "whatever" a un contenedor DIV. Sí, no es un atributo válido para DIV, pero puedo ver a los lectores de pantalla antiguos sin importar dónde aparece alt.

Por ejemplo:

<div aria-label="Whatever" alt="Whatever" role="math"> <math>...</math> </div>

Obviamente, esto es bajo la suposición de que los lectores de pantalla leerán atributos alt (incorrectamente) en elementos que no sean IMG. No lo he probado, pero es mejor que esperar a que los lectores de pantalla lo pongan al día si funciona.