El texto alternativo es texto asociado con una imagen que tiene el mismo propósito y transmite la misma información esencial que la imagen. [1] En situaciones en las que la imagen no está disponible para el lector, quizás porque han desactivado las imágenes en su navegador web o están usando un lector de pantalla debido a una discapacidad visual , el texto alternativo asegura que no se pierda información o funcionalidad. [1] El texto alternativo ausente o inútil puede ser una fuente de frustración para los usuarios con discapacidad visual. [2]
En Wikipedia, el texto alternativo generalmente se proporciona a través de una combinación del título de la imagen y el texto proporcionado para el alt
parámetro de imagen en el marcado de MediaWiki . El siguiente ejemplo produce la imagen adyacente:
[[File:Jacques-Louis David 017.jpg |thumb |upright=0.75 |alt=Painting of Napoleon Bonaparte in His Study at the Tuileries |''[[The Emperor Napoleon in His Study at the Tuileries]]'' by [[Jacques-Louis David]]]]
El alt
texto del parámetro ("Pintura de Napoleón Bonaparte en su estudio en las Tullerías") normalmente no es visible para los lectores; sin embargo, los navegadores web pueden mostrarlo cuando las imágenes están apagadas, o los lectores de pantalla pueden leerlo en voz alta para las personas con discapacidad visual, y los motores de búsqueda pueden utilizarlo para determinar el contenido de la imagen. [3] De acuerdo con otras pautas de Internet, el término " alt
texto" (en una code
fuente) se utiliza aquí para hacer referencia al texto proporcionado para el alt
parámetro de imagen y que genera texto para el atributo alt HTML ; el término "texto alternativo" se refiere al texto equivalente de una imagen, independientemente de dónde resida ese texto. [4]
Para las imágenes que enlazan con su página de descripción de la imagen (que son casi todas las imágenes en Wikipedia), el alt
texto no puede estar en blanco ni el alt
parámetro debe estar ausente. Esto se debe a que un lector de pantalla, para describir el propósito del enlace, leerá por defecto el nombre del archivo de la imagen cuando no haya alt
texto disponible. [5] Por lo general, esto no es útil. En el ejemplo anterior de Napoleón, el lector de pantalla habría leído "enlace gráfico barra diagonal Jacques guión Louis subrayado David subrayado cero uno siete" si no hubiéramos proporcionado el alt
parámetro. [6]
Una imagen que es puramente decorativa (no proporciona información y solo tiene un propósito estético) no requiere texto alternativo. A menudo, la leyenda cumple completamente con los requisitos de texto alternativo. Sin embargo, la única situación en la que el alt
texto en blanco es aceptable es cuando estas imágenes no están vinculadas, lo que rara vez es posible. Una solución es ofrecer algo al menos mínimamente útil, como |alt=photograph
, |alt=painting
o |alt=sculpture
. Otra solución, si una leyenda no describe o identifica la imagen, es que el alt
texto lo haga lo más brevemente posible.
Audiencia
La audiencia del texto alternativo incluye :
- Lectores con discapacidad visual de diversos grados que navegan por Wikipedia utilizando un lector de pantalla que traduce texto a voz o Braille , como JAWS , NVDA u Orca [3]
- Lectores que utilizan navegadores que no admiten imágenes (por ejemplo, Lynx ) o que están configurados para no mostrarlas (por ejemplo, Wikipedia Zero ); [3]
- Bots de motores de búsqueda. [3]
Experimentar Wikipedia con un lector de pantalla requiere práctica. Un usuario de lector de pantalla experimentado puede optar por omitir partes del texto.
Cómo escribir texto alternativo
Lo esencial
El texto alternativo debe ser breve, como "Un jugador de baloncesto" o "Tony Blair le da la mano a George W. Bush". Si necesita ser más largo, los detalles importantes deben aparecer en las primeras palabras, lo que permite al usuario de un lector de pantalla avanzar una vez que se comprenden los puntos clave. Se pueden dejar descripciones muy largas para el cuerpo del artículo. [1] MediaWiki no admite el atributo longdesc de HTML . Todos los lectores sabrán que este elemento es una imagen, por lo que normalmente no es necesario añadir una "fotografía de".
El alt
texto debe ser texto sin formato (sin HTML o marcado wiki como wikilinks) sin saltos de línea. El texto debe cumplir con Punto de vista Neutral , Verificabilidad , No investigación original y Biografías de personas vivas . Dado que no puede contener citas en línea , no debe transmitir ningún punto contencioso o material que no sea obvio para ningún lector. El alt
texto está destinado a ser leído por lectores de pantalla justo antes del título, así que evita tener los mismos detalles en ambos.
Importancia del contexto
Comprender el contexto de una imagen es vital. Las Pautas de accesibilidad al contenido web (WCAG) 2.0 del World Wide Web Consortium (W3C) recomiendan que los editores consideren cuatro preguntas: [7]
- ¿Por qué está aquí este contenido que no es de texto?
- ¿Qué información presenta?
- ¿Qué propósito cumple?
- Si no pudiera usar el contenido que no es texto, ¿qué palabras usaría para transmitir la misma función o información?
Por ejemplo, una imagen de Napoleón Bonaparte podría usarse en
- un artículo sobre grandes líderes militares donde ilustra un ejemplo de tal líder; el texto alternativo debe nombrar el tema;
- un artículo sobre Napoleón que ilustra su apariencia; el texto alternativo debe describir brevemente su apariencia si es importante para el artículo;
- un artículo sobre una pintura suya ; el texto alternativo debe describir brevemente la pintura.
Imágenes que contienen palabras
Si una imagen contiene palabras importantes para la comprensión del lector, el texto alternativo debe contener esas palabras. [1] Si contiene caracteres no latinos, considere proporcionar una transliteración . Los lectores de pantalla sin soporte Unicode tienen un soporte muy variado para caracteres fuera de Latin-1 .
Subtítulos y texto cercano
- Para obtener detalles del marcado wiki que produce estos elementos, consulte Wikipedia: Sintaxis de imagen extendida # Texto alternativo y título .
Las imágenes suelen ser miniaturas con subtítulos. El título es visible para todos los lectores y puede contener marcado HTML, wikilinks y citas en línea. Un cuadro de información a menudo contiene una imagen simple con el título como una fila separada. Un buen pie de foto debe identificar sucintamente el tema de la imagen y establecer la relevancia de la imagen para el artículo, sin detallar lo obvio.
Cuando el pie de foto es suficientemente descriptivo o evocador de la imagen, o cuando deja en claro cuál es la función de la imagen, una opción es escribir |alt=refer to caption
. Donde el texto cercano en el artículo realiza la misma función, puede ser |alt=refer to adjacent text
. [4]
Mapas y diagramas
Con mapas, diagramas y gráficos, el color, la posición y el tamaño de los elementos no son importantes. En su lugar, concéntrese en la información que se presenta. Por ejemplo, un gráfico puede tener el texto alternativo "Las ventas en junio superaron a las de julio y las de agosto fueron aún mayores", y una animación esquemática puede tener el texto alternativo "Animación de un motor de automóvil en movimiento". La fórmula estructural de un compuesto químico se puede describir de forma inequívoca utilizando la nomenclatura de la IUPAC y los cuadros de información del fármaco o la química incluyen esta información.
Imágenes decorativas
Una imagen que no proporciona información esencial es una imagen puramente decorativa . Una imagen decorativa puede proporcionar una estructura visual o un toque estético, pero puede causar confusión fuera de ese contexto visual. Un atributo alt que no está en blanco en una imagen decorativa genera un desorden audible para los usuarios de lectores de pantalla y texto irrelevante insertado en los resultados del motor de búsqueda.
Existen problemas similares para una imagen que repite estrictamente la información que se encuentra en un texto cercano o en un título. El texto cercano es suficiente como texto alternativo de la imagen. Un atributo alt que no está en blanco da como resultado texto repetitivo para lectores de pantalla y motores de búsqueda.
En ambos casos, un atributo alt en blanco es ideal.
- Por dominio público, A0, o las imágenes licenciados similares, desvincular la imagen y utilizar un atributo alt en blanco:
|link=
|alt=
. La combinación de ningún vínculo y un atributo alt en blanco hace que los lectores de pantalla omitan la imagen y hace que los motores de búsqueda omitan la imagen en los fragmentos de texto de los resultados de búsqueda. - Para CC-BY-SA, GFDL o imágenes con licencia similar, no se debe usar un atributo alt en blanco . La política de Wikipedia es vincular esas imágenes para su atribución, y las imágenes vinculadas deben tener un atributo alt que no esté en blanco para evitar enlaces vacíos, que resultan en anuncios confusos en los lectores de pantalla. Cuando se desea un atributo alt en blanco, considere reemplazar las imágenes CC-BY-SA con equivalentes de dominio público. De lo contrario, utilizar un atributo breve alt (tales como
|alt=photograph
,|alt=painting
,|alt=sculpture
, o|alt=icon
) para minimizar el texto confuso.
Los iconos que transmiten información que no se encuentra en el texto deben tener atributos alt que describan su función, no su apariencia. Por ejemplo, un icono de flecha utilizado para navegar a la siguiente página debe tener un atributo alt de |alt=next page
no |alt=arrow pointing right
. Si la flecha estuviera acompañada de un enlace de texto descriptivo con la misma función, un atributo alt en blanco sería más apropiado. [3]
Texto alternativo en plantillas y galerías
- Plantillas
- Muchas plantillas como {{ Infobox }} y {{ Location map + }} tienen sus propios parámetros para especificar
alt
texto. Si una plantilla carece de dicho parámetro, considere solicitar que se agregue.
- Galerias
- La
etiqueta admitealt
texto desde MediaWiki 1.18. [8] {{ Gallery }} y {{ Multiple image }} también lo admiten. Para ver un ejemplo sobre el uso de la sintaxis de la tabla para crear una galería, consulte Galerías .
- Líneas de tiempo
- La
etiqueta genera una imagen sinalt
texto. En su lugar, cuando utilice tablas, agregue un resumen de la tabla , que los lectores de pantalla leen en voz alta para brindar una descripción general del contenido.
- Fórmulas matemáticas
- La
etiqueta se utiliza para generar fórmulas matemáticas. Estos se pueden renderizar como una imagen o usando texto, dependiendo de su complejidad y preferencias del usuario . Para fórmulas simples, use el
alt
parámetro para traducirlo al inglés. Las fórmulas más complejas son difíciles de especificar y el marcado original puede ser la mejor opción, que es el predeterminado si noalt
se proporciona ningún parámetro.
Enlaces y atribución
Escribir " |alt=
" hará que el software MediaWiki renderice HTML con un alt
atributo vacío en la img
etiqueta. Cuando la imagen es un enlace, los lectores de pantalla leerán el nombre del archivo del enlace (p. Ej., "Marca de subrayado verde con barra diagonal") si el alt
atributo HTML está vacío o falta. Casi todas las imágenes de los artículos de Wikipedia son enlaces a la página de descripción de la imagen, que contiene una versión de mayor tamaño de la imagen, así como información sobre licencias y atribuciones. [Nota 1]
Los artículos de Wikipedia a veces contienen imágenes que no enlazan con una página de imágenes, por ejemplo, un icono de información. Estas imágenes deben configurarse para que los lectores de pantalla las ignoren. Esto se logra agregando |link=
|alt=
el marcado wiki de la imagen. La eliminación del enlace es aceptable para imágenes en el dominio público o el equivalente CC0 . Los enlaces no deben suprimirse para ninguna imagen que requiera atribución.
La mayoría de las imágenes de los artículos de Wikipedia no cumplen una función activa; no son botones ni opciones de menú. Cuando la imagen sirva como enlace a otro artículo, nombre el artículo en el texto alternativo. Donde siguiendo el enlace realiza una operación (como ordenar ), indique la operación. No diga "haga clic aquí" o "enlace a", ya que el lector ya sabrá que la imagen es un enlace y es posible que no esté haciendo clic en el botón del mouse. [9]
Ejemplos de
Wikicode | Visualización normal | Lector de pantalla | Razón fundamental |
---|---|---|---|
[[Archivo: Dannebrog.jpg | thumb | center | upright = 0.75 | alt = Una bandera roja dividida en cuatro por una cruz blanca ligeramente desplazada hacia la izquierda. | El diseño más antiguo de [[bandera nacional]] que todavía se usa es el del siglo XIII de [[Dinamarca]] '' [[Bandera de Dinamarca | Dannebrog]].]] | gráfico de enlace Una bandera roja dividida en cuatro por una cruz blanca ligeramente desplazada hacia la izquierda. El más antiguo enlace de diseño de la bandera nacional todavía en uso es enlace del siglo 13 de Dinamarca enlace Dannebrog. | Artículo: Bandera El propósito de la imagen es mostrar cómo se ve la bandera de Dannebrog de Dinamarca. La fotografía podría reemplazarse por un gráfico plano y cumplir el mismo propósito. Por lo tanto, el asta de la bandera, el aleteo y el cielo no son importantes. | |
[[Archivo: Glass-half-full-full.jpeg | thumb | center | upright = 0.75 | alt = Se vierte agua clara por un pico. | La fluoración no afecta la apariencia, el sabor ni el olor del [[agua potable]].]] | link graphic El agua clara sale de un pico. La fluoración no afecta la apariencia, el sabor ni el olor del agua potable de Link . | Artículo: Fluoración del agua Esta es una fotografía de archivo elegida para decorar un fragmento de sonido del artículo sobre el agua del grifo. La imagen es un enlace, por lo que necesita alt texto. Debido a que la leyenda no identifica la imagen, es apropiada una breve descripción. | |
[[Archivo: Blair Bush Whitehouse (2004-11-12) .jpg | thumb | center | upright = 0.75 | alt = Tony Blair y George W. Bush se dan la mano en una conferencia de prensa. | Blair y Bush acuerdan una estrategia para paz en el Oriente Medio el 12 de noviembre de 2004.]] | enlace gráfico Tony Blair y George W. Bush se dan la mano en una conferencia de prensa. Blair y Bush acuerdan una estrategia para la paz en Oriente Medio el 12 de noviembre de 2004. | La imagen los muestra saludándose con un apretón de manos durante una conferencia de prensa. El |
Wikitexto | Visualización normal | Lector de pantalla | Razón fundamental |
---|---|---|---|
[[Archivo: Commons-logo.svg | frameless | upright = 0.23 | border | center | link = Commons: Special: Search | Search Wikimedia Commons]] | enlace gráfico Buscar Wikimedia Commons | El propósito de la imagen, un icono, es proporcionar un enlace a la página de búsqueda de Commons. La apariencia del icono no es importante, pero su función sí lo es. Al escribir el texto alternativo en el campo "título" del marcado de la imagen, es tanto el alt texto como el título del enlace. El título del enlace aparece como información sobre herramientas en algunos navegadores. | |
| La imagen base tiene el texto alternativo "Cartel de la campaña demócrata de 1896". El círculo de la izquierda tiene el texto alternativo "William J. Bryan". El círculo de la derecha tiene el alt texto "Arthur Sewall". El azul ( i ) tiene el alt texto "Acerca de esta imagen". Todos estos se repiten como texto del título del enlace, que proporciona una información sobre herramientas en algunos navegadores, con la excepción de la imagen base, que tiene el título del enlace "Sitio web de 1896 Demócratas". | La primera línea especifica el alt texto de la imagen base , que en este caso identifica la imagen. Cada línea subsiguiente especifica el alt texto de un enlace de región, que debería ser el propósito del enlace. [10] | |
Mercurio, Venus, Tierra, Marte. | Mercurio, Venus, Tierra, Marte. Júpiter, Saturno, Urano, Neptuno. | Mercurio, Venus, Tierra, Marte. Júpiter, Saturno, Urano, Neptuno. | La imagen proporciona estructura visual pero no información esencial. Dado que la imagen es de dominio público, no se requiere atribución y el enlace se puede eliminar, lo que nos permite especificar un alt atributo en blanco , por lo que un lector de pantalla no dice el nombre del archivo. La combinación de ningún vínculo y un alt atributo en blanco indica a los lectores de pantalla que omitan la imagen por completo. |
[[Archivo: Ambox warning pn.svg | 28x28px | alt = | link =]] Advertencia: No corras con tijeras. | Advertencia: no corras con tijeras. | Advertencia: no corras con tijeras. | La imagen repite estrictamente la información transmitida por la palabra adyacente "Advertencia". Dado que "Advertencia" es un texto alternativo suficiente, un alt atributo en blanco es apropiado. |
Notas
- ^ WebAIM dice "Una imagen que es lo único dentro de un enlace nunca debe tener un
alt
atributonulo o faltante. Esto se debe a que el lector de pantalla debe leer ALGO para identificar el enlace". [3] El emulador del lector de pantalla Fangs lo confirma.
Referencias
- ^ a b c d W3C. G94: Proporcionar una alternativa de texto corto para el contenido que no es de texto que tiene el mismo propósito y presenta la misma información que el contenido que no es de texto ; 11 de diciembre de 2008 [Consultado el 4 de abril de 2010].
- ^ Lazar J, Allen A, Kleinman J, Malarkey C. Lo que frustra a los usuarios de lectores de pantalla en la web: un estudio de 100 usuarios ciegos [PDF]. Int J Hum Comput Interact . 2007; 22 (3): 247–69. doi : 10.1080 / 10447310709336964 .
- ^ a b c d e f 2020 WebAIM . Centro para Personas con Discapacidades, Universidad del Estado de Utah . Texto alternativo [Consultado el 30 de septiembre de 2020].
- ^ a b G74: Proporcionar una descripción larga en texto cerca del contenido que no es texto, con una referencia a la ubicación de la descripción larga en la descripción corta , técnica WCAG 2.0.
WebAim escribe: "[E] l atributo alt (a veces llamado etiqueta alt, aunque técnicamente es incorrecto) no es el único mecanismo para proporcionar el contenido y la función de la imagen. Esta información también se puede proporcionar en el texto adyacente a la imagen. o dentro de la página que contiene la imagen. ... El término texto alternativo, como se usa en este artículo, se refiere al texto equivalente para una imagen, independientemente de dónde resida ese texto. No se refiere únicamente al atributo alt de la imagen tag. Consulte WebAIM. Alternative Text Basics , consultado el 30 de septiembre de 2020. - ^ W3C. F89: Fallo (...) debido al uso de alt nulo en una imagen donde la imagen es el único contenido en un enlace , Técnicas para WCAG 2.0, consultado el 5 de noviembre de 2014
- ^ WebAIM dice: "Una imagen que es lo único dentro de un enlace nunca debe tener un
alt
atributonulo o faltante. Esto se debe a que el lector de pantalla debe leer ALGO para identificar el enlace". Consulte WebAIM, Context is Everything , consultado el 30 de septiembre de 2020. - ^ W3C. Comprender el Criterio de Conformidad 1.1.1; Comprensión de WCAG 2.0 ; 11 de diciembre de 2008 [Consultado el 4 de abril de 2010].
- ^ Error de Wikimedia 18682
- ^ Petrie, Helen; Harrison, Chandra; y Dev, Sundeep. Describing images on the Web: a survey of current practice and prospect for the future , Center for Human Computer Interaction Design, City University London, consultado el 8 de junio de 2010.
- ^ W3C. H24: Proporcionar alternativas de texto para los elementos de área de mapas de imágenes , técnica WCAG 2.0.
enlaces externos
- Requisitos para proporcionar texto que actúe como alternativa a las imágenes , en la especificación HTML
- Fangs - emulador de lector de pantalla