Wikipedia:Manual de estilo/Accesibilidad/Texto alternativo para imágenes

Este es un ensayo explicativo sobre las pautas de accesibilidad para imágenes del Manual de Estilo . Esta página proporciona información adicional sobre los conceptos de las páginas que complementa. Esta página no forma parte de las políticas o pautas de Wikipedia , ya que no ha sido revisada exhaustivamente por la comunidad .

Atajos WP:MOSALT MOS:ALT

Esta página en pocas palabras: El texto alternativo permite que los lectores que solo leen texto comprendan el contenido y la función de una imagen.

El texto alternativo (o alt text ) es un texto asociado a 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, tal vez porque ha desactivado las imágenes en su navegador web o está usando un lector de pantalla debido a una discapacidad visual , el texto alternativo garantiza que no se pierda ninguna 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 se proporciona normalmente mediante una combinación del título de la imagen y el texto proporcionado para el altparámetro de imagen en el marcado de MediaWiki . El siguiente ejemplo produce la imagen adyacente:

[[ Archivo : Jacques-Louis David 017.jpg | thumb | upright = 0.75 | alt = Pintura de Napoleón Bonaparte | '' [[ El emperador Napoleón en su estudio en las Tullerías ]] '' de [[ Jacques-Louis David ]]]]

El alttexto del parámetro ("Cuadro de Napoleón Bonaparte") normalmente no es visible para los lectores; sin embargo, puede ser mostrado por los navegadores web cuando las imágenes están apagadas, o leído en voz alta por lectores de pantalla para personas con discapacidad visual, y puede ser utilizado por los motores de búsqueda para determinar el contenido de la imagen. ^[3] De acuerdo con otras pautas de Internet, el término " alttexto" (en una codefuente) se utiliza aquí para referirse al texto suministrado para el altparámetro de imagen y que genera texto para el atributo alt de HTML ; el término "texto alternativo" se refiere al texto equivalente para una imagen, independientemente de dónde resida ese texto. ^[4]

En el caso de las imágenes que enlazan a su página de descripción de la imagen (que es casi la totalidad de las imágenes de Wikipedia), el alttexto no puede estar en blanco ni el altpará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 althaya texto disponible. ^[5] Esto no suele ser útil. En el ejemplo de Napoleón anterior, el lector de pantalla habría leído "enlace gráfico barra Jacques guión Louis guión bajo David guión bajo cero uno siete" si no hubiéramos proporcionado el altpará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, el pie de foto cumple plenamente los requisitos de texto alternativo. Sin embargo, la única situación en la que altse acepta un texto en blanco es cuando dichas imágenes no tienen vínculos, lo que rara vez es posible. Una solución es proporcionar algo al menos mínimamente útil, como |alt=photograph, |alt=paintingo |alt=sculpture. Otra solución, si un pie de foto no describe ni identifica la imagen, es que el alttexto lo haga lo más brevemente posible.

La audiencia del texto alternativo incluye :

• Lectores con discapacidad visual de diversos grados que navegan por Wikipedia utilizando un lector de pantalla que traduce el 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, debido a una asignación de datos limitada); ^[3]
• Bots de motores de búsqueda. ^[3]

Para utilizar Wikipedia con un lector de pantalla se necesita práctica. Un usuario experimentado de lectores de pantalla puede optar por omitir partes del texto.

El texto alternativo debe ser breve, como "Un jugador de baloncesto" o "Tony Blair le da la mano a George W. Bush". Si es necesario que sea 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. Las descripciones muy largas se pueden dejar 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 no suele ser necesario añadir "fotografía de".

El alttexto debe ser texto simple (sin HTML ni marcado wiki como wikilinks) sin saltos de línea. El texto debe cumplir con los requisitos de 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 polémico ni material que no sea obvio para ningún lector. El alttexto está pensado para que lo lean los lectores de pantalla justo antes del subtítulo, por lo que se debe evitar que ambos tengan los mismos detalles.

Comprender el contexto de una imagen es fundamental. Las Pautas de Accesibilidad al Contenido Web (WCAG) 2.0 del Consorcio World Wide Web (W3C) recomiendan que los editores consideren cuatro preguntas: ^[7]

• ¿Por qué aparece aquí este contenido no textual?
• ¿Qué información está presentando?
• ¿Qué propósito cumple?
• Si no pudiera utilizar el contenido no textual, ¿qué palabras utilizarí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 se ilustra un ejemplo de tal líder—el texto alternativo debe nombrar el tema;
• un artículo sobre Napoleón que ilustre su apariencia (el texto alternativo debe describir brevemente su apariencia si es importante para el artículo);
• un artículo sobre una pintura de él —el texto alternativo debe describir brevemente la pintura.

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 compatibilidad con Unicode tienen una compatibilidad muy variable para caracteres fuera del latín-1 .

Para conocer 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 subtítulo es visible para todos los lectores y puede contener marcado HTML, enlaces wiki y citas en línea. Un cuadro de información suele contener una imagen simple con el subtítulo en una fila separada. Un buen subtítulo debe identificar de forma sucinta el tema de la imagen y establecer la relevancia de la imagen para el artículo, sin detallar lo obvio.

Cuando el título es suficientemente descriptivo o evocativo 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. Cuando el texto cercano en el artículo cumple la misma función, puede ser |alt=refer to adjacent text. ^[4]

Cuando el tipo de imagen se especifica de tal manera que no es visible un título sin pasar el cursor sobre la imagen, lo que ocurre en lugares como la Página principal, el texto del título se usa automáticamente como texto alternativo, lo que casi siempre es suficiente (consulte el enlace de sintaxis de imagen extendida más arriba).

En los mapas, diagramas y gráficos, el color, la posición y el tamaño de los elementos no son importantes. En cambio, 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 diagramá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 sobre fármacos o química incluyen esta información.

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 en el caso de una imagen que repite estrictamente la información que se encuentra en el 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 los lectores de pantalla y los motores de búsqueda.

En ambos casos, un atributo alt en blanco es ideal.

• En el caso de imágenes de dominio público, CC0 o con licencias similares, desvincule la imagen y utilice un atributo alt en blanco: |link=|alt=. La combinación de ausencia de vínculo y un atributo alt en blanco hace que los lectores de pantalla omitan la imagen y que los motores de búsqueda omitan la imagen en los fragmentos de texto de los resultados de búsqueda.
• En el caso de imágenes con licencia CC BY-SA, GFDL o similares, no se deben utilizar los atributos |alt=y en blanco . Wikipedia aplica la política de 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 dan lugar a anuncios confusos en los lectores de pantalla. Cuando se desee un atributo alt en blanco, considere reemplazar las imágenes CC BY-SA con equivalentes de dominio público. De lo contrario, utilice un atributo alt breve (como , , o ) para minimizar el texto confuso.|link=|alt=photograph|alt=painting|alt=sculpture|alt=icon

Los íconos 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 ícono de flecha que se usa para navegar a la página siguiente debe tener un atributo alt de |alt=next pagenot |alt=arrow pointing right. Si la flecha estuviera acompañada por un enlace de texto descriptivo con la misma función, sería más apropiado dejar el atributo alt en blanco. ^[3]

Plantillas

Muchas plantillas, como {{ Infobox }} y {{ Location map+ }}, tienen sus propios parámetros para especificar alttexto. Si una plantilla no tiene ese parámetro, considere solicitar que se agregue.

Galerías

La <gallery>etiqueta admite alttexto desde MediaWiki 1.18. ^[8] {{ Gallery }} y {{ Multiple image }} también lo admiten. Para ver un ejemplo de cómo usar la sintaxis de tabla para crear una galería, consulte Galerías .

Líneas de tiempo

La etiqueta <timeline> genera una imagen sin alttexto. Si utiliza tablas, agregue un resumen de tabla , que los lectores de pantalla leen para ofrecer una descripción general del contenido.

Fórmulas matemáticas

La <math>etiqueta se utiliza para generar fórmulas matemáticas. Estas pueden representarse como una imagen o mediante texto, según su complejidad y las preferencias del usuario. Para fórmulas simples, utilice el altparámetro para traducirlas 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 valor predeterminado si no altse proporciona ningún parámetro.

Si se escribe " |alt=", el software MediaWiki mostrará el código HTML con un altatributo vacío en la imgetiqueta. Cuando la imagen es un enlace, los lectores de pantalla leerán el nombre del archivo del enlace (por ejemplo, "barra oblicua con guión bajo verde") si el altatributo 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 tienen un enlace a una página de imágenes, por ejemplo, un icono de información. Estas imágenes deben configurarse de modo que los lectores de pantalla las ignoren. Esto se logra agregando |link=|alt=un marcado wiki a la imagen. La eliminación del enlace solo es aceptable para imágenes de dominio público o CC0 equivalente . No se deben suprimir los enlaces de 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. Cuando seguir el enlace realice una operación (como ordenar ), indique la operación. No diga "haga clic aquí" o "vincular a", ya que el lector ya sabrá que la imagen es un enlace y es posible que no haga clic en ella con el ratón. ^[9]

Ejemplos de texto alternativo

Código Wiki	Visualización normal	Lector de pantalla	Razón fundamental
[[ Archivo : Dannebrog.jpg | pulgar | centro | vertical = 0,75 | alt = Una bandera roja dividida en cuatro por una cruz blanca ligeramente desplazada hacia la izquierda. | El diseño de [[ bandera nacional ]] más antiguo todavía en uso es la '' [[ Bandera de Dinamarca | Dannebrog ]] '' del siglo XIII de [[ Dinamarca ]] . ]]		Enlace gráfico Una bandera roja dividida en cuatro por una cruz blanca ligeramente desplazada hacia la izquierda. El diseño de bandera nacional más antiguo que todavía se usa es el de Dannebrog , del siglo XIII, en Dinamarca .	Artículo: Bandera El objetivo de la imagen es mostrar cómo es la bandera danesa de Dannebrog. La fotografía podría sustituirse por un gráfico plano y cumplir el mismo propósito. Por lo tanto, el mástil, el ondear y el cielo no son importantes.
[[ Archivo : Glass-half-full.jpeg | pulgar | centro | vertical = 0,75 | alt = El agua clara se vierte desde un pico. | La fluoración no afecta la apariencia, el sabor ni el olor del [[ agua potable ]] . ]]		Enlace gráfico El agua clara sale a borbotones. La fluoración no afecta la apariencia, el sabor ni el olor del agua potable .	Artículo: Fluoración del agua Esta es una fotografía de archivo elegida para decorar un fragmento de audio del artículo sobre el agua del grifo. La imagen es un enlace, por lo que necesita alttexto. Debido a que el pie de foto no identifica la imagen, es adecuado incluir una breve descripción.
[[ Archivo : Blair Bush Whitehouse (2004-11-12).jpg | pulgar | centro | vertical = 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 la paz en 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 alttexto no debería decir "Dos hombres dándose la mano", porque no es por eso que se eligió la imagen; es necesario identificar a los hombres. El alttexto no debería decir que estaban en la Sala Este de la Casa Blanca, porque eso no queda claro en la fotografía. La fotografía transmite que los hombres están vestidos de manera idéntica , pero eso no es relevante para el artículo.

Ejemplos inusuales de texto alternativo

Wikitext	Visualización normal	Lector de pantalla	Razón fundamental
[[ Archivo : Commons-logo.svg | sin marco | vertical = 0.23 | borde | centro | enlace = Commons:Special:Search | Buscar en 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 sí su función. Al escribir el texto alternativo en el campo "título" del marcado de la imagen, se convierte en alttexto y título del enlace. El título del enlace aparece como información sobre herramientas en algunos navegadores.
<mapa de imagen>Archivo:Bryan-Sewall.jpg|thumb|upright=0.75|center|alt=1896 Afiche de campaña demócratacírculo 950 850 700 [[ William Jennings Bryan | William J. Bryan ]]círculo 2950 850 700 [[ Arthur Sewall ]]predeterminado [ http://projects.vassar.edu/1896/democrats.html Sitio web de los demócratas de 1896] </imagemap>		La imagen base tiene el texto alternativo "1896 Democratic campaign poster". El círculo izquierdo tiene el texto alternativo "William J. Bryan". El círculo derecho tiene elalt texto "Arthur Sewall". La i azul tiene el texto alt"Acerca de esta imagen". Todos estos se repiten como texto de título de enlace, que proporciona una información sobre herramientas en algunos navegadores, con la excepción de la imagen base, que tiene el título de enlace "1896 Democrats Website".	La primera línea especifica el alttexto de la imagen base, que en este caso identifica la imagen. Cada línea subsiguiente especifica el alttexto para un enlace de región, que debería ser el propósito del enlace. [10]
Mercurio, Venus, Tierra, Marte. < br />[[ Archivo : Grey line.png | alt = | link = ]]< br /> Júpiter, Saturno, Urano, Neptuno.	Mercurio, Venus, Tierra, Marte. Júpiter, Saturno, Urano, Neptuno.	Mercurio, Venus, Tierra, Marte. Júpiter, Saturno, Urano, Neptuno.	La imagen proporciona una estructura visual, pero no información esencial. Dado que la imagen es de dominio público, no se requiere atribución y se puede eliminar el enlace, lo que nos permite especificar un altatributo en blanco para que el lector de pantalla no diga el nombre del archivo. La combinación de ausencia de enlace y un altatributo en blanco indica a los lectores de pantalla que deben omitir la imagen por completo.
[[ Archivo : Ambox advertencia pn.svg | 28x28px | alt = | link = ]] < strong > Advertencia: </ strong > 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, altes adecuado dejar un atributo en blanco.

• Requisitos para proporcionar texto que actúe como alternativa a las imágenes: en la especificación HTML 5
• Texto alternativo, subtítulos y títulos de imágenes, del Manual de estilo del gobierno australiano
• Cómo escribir descripciones de texto (texto alternativo) en artículos de BBC News
• Herramienta Altviewer ^{[ enlace inactivo ]} para comprobar el texto alternativo de un artículo