Wikipedia:Texto alternativo para las imágenes
El texto alternativo es un texto asociado con una imagen que sirve para transmitir la misma información que la imagen.[1] Este texto asegura que el lector no pierda información sea porque las imágenes no están disponibles, el lector ha desactivado las imágenes en su navegador o porqué está utilizando un lector de pantalla debido a que padece una deficiencia visual. La ausencia de este texto, o su mala escritura, puede ser una fuente de frustración para los usuarios con deficiencia visual.[2]
En Wikipedia, el texto alternativo se provee mediante una combinación de la descripción y del texto escrito en el parámetro alt
del código de incrustación del archivo. El siguiente ejemplo produce una imagen al lado:
[[Archivo:Jacques-Louis David 017.jpg |thumb|upright=0.75|alt=Pintura de Napoleón en su gabinete de trabajo|''[[Retrato de Napoleón en su gabinete de trabajo]]'' por [[Jacques-Louis David]]]]
El texto del parámetro alt
(«Pintura de Napoleón en su gabinete de trabajo») no suele ser visible para los lectores; sin embargo, puede ser mostrado por los navegadores cuando las imágenes están desactivadas, o también puede ser leído por un lector de pantalla para aquellos usuarios con deficiencia visual; además, los motores de búsqueda utilizan ese texto para determinar el contenido de una imagen.[3] De acuerdo con otras pautas de Internet, el término "alt
text" usado aquí se refiere al texto aportado por el parámetro alt
de la imagen, que genera el texto para el atributo "alt" de HTML; el término "texto alternativo" se refiere al texto equivalente a una imagen, independientemente de donde esté ubicado el texto.[4]
Una imagen que es puramente decorativa ―que no aporta información y su función es simplemente decorativa― no necesita texto alternativo. Las descripciones suelen reunir todos los requisitos para un texto alternativo. Sin embargo, la única situación en la que es aceptable que esté en blanco el texto alt
es aquella en la que las imágenes no estén enlazadas. Una solución es aportar algo mínimamente útil como |alt=fotografía
, |alt=pintura
o |alt=escultura
. Otra solución, si la descripción no describe o identifica la imagen, es elaborar un texto alt
lo más breve posible.
Público
editarEl público del texto alternativo incluye:
- Lectores con deficiencia visual de diversos grados que buscan en Wikipedia utilizando un lector de pantalla que lee el texto o lo traduce a braile, tales como JAWS, NVDA u Orca.[3]
- Lectores que utilizan navegadores que no soportan imágenes (por ej. Lynx) o que está configurado para no mostrarlas (por ej. Wikipedia Zero).[3]
- Bots de los motores de búsqueda.[3]
Utilizar Wikipedia con un lector de pantalla requiere práctica. Una alternativa es instalar el complemento Fangs para Firefox, que muestra las palabras habladas por un lector de pantalla. Un usuario experimentado de lectores de pantalla puede elegir las partes del texto que quiere saltarse.
Cómo escribir un texto alternativo
editarPrincipios básicos
editarEl texto alternativo debería ser corto, como «Un jugador de baloncesto» o «Tony Blair saludando a George W. Bush». Si necesita ser más grande, los detalles importantes deberían aparecer en las primeras palabras, lo que permite al usuario del lector de pantalla saltar al siguiente texto una vez haya entendido los puntos claves. Las descripciones muy largas pueden apartarse del cuerpo del artículo.[1] MediaWiki no soporta el atributo longdesc. Todos los lectores serán advertidos de que el elemento es una imagen, por lo que añadir «fotografía de» no suele ser necesario.
El texto alt
debería consistir en un texto plano ―sin código HTML ni lenguaje wiki― y estar en una línea. El texto debe cumplir con Punto de vista neutral, Verificabilidad, Wikipedia no es una fuente primaria y Biografías de personas vivas. Dado que no puede contener referencias no debe transmitir ningún aspecto conflictivo o material no obvio para el lector. El texto alt
justo antes de la descripción, por lo que intenta evitar los mismos detalles en ambos.
Importancia del contexto
editarEntender el contexto de una imagen es esencial. Las Web Content Accessibility Guidelines (WCAG 2.0) del World Wide Web Consortium (W3C) recomiendan a los editores considerar cuatro preguntas:[5]
- ¿Por qué está este contenido no-textual aquí?
- ¿Qué información aporta?
- ¿Qué objetivo cumple?
- Si no pudiese usar el contenido no-textual, ¿qué palabras usaría para transmitir la misma función o información?
Por ejemplo, una imagen de Napoleón Bonaparte podría ser usada en:
- Un artículo de grandes líderes militares donde ilustre un ejemplo de estos líderes ―en este caso, el texto alternativo debería mostrar el nombre del sujeto―.
- Un artículo de Napoleón en el que ilustre su apariencia ―en este caso, el texto alternativo debería describir brevemente su apariencia, si esta fuese de importancia para el artículo―.
- Un artículo sobre una obra de arte de él ―en este caso, el texto alternativo debería describir brevemente la pintura―.
Imágenes que contienen palabras
editarSi una imagen contiene palabras importantes para la comprensión del lector, el texto alternativo debería contener estas palabras.[1] Si contiene caracteres no-latinos, considera aportar una transliteración. Los lectores de pantalla sin soporte Unicode leerán los caracteres externos a Latin-1 como símbolos de interrogación, e incluso en las últimas versiones de JAWSS, el lector de pantalla más popular, leer caracteres Unicode es complicado.
Descripción y texto de alrededor
editar- Para más detalles del lenguaje wiki que produce estos elementos, véase Ayuda:Imágenes - Opciones de Presentación.
Las imágenes son normalmente miniaturas con descripciones. La descripción es visible para todos los lectores y puede contener etiquetas HTML, wikienlaces y referencias. Una ficha de información suele contener una imagen plana con la descripción como una fila separada. Una buena descripción debería identificar brevemente el sujeto de una imagen y establecer la relevancia de la imagen en el artículo, sin detallar lo obvio.
Una opción es escribir |alt=consultar la descripción
cuando la descripción es suficientemente descriptiva, o si esta aclara la función de la imagen. Cuando el texto de alrededor tiene la misma función, puede escribirse |alt=consultar texto adyacente
.[4]
Mapas y diagramas
editarCon los mapas, diagramas y cuadros, el color, la posición y el tamaño de los elementos no es importante. En lugar de eso, concéntrate en la información que aporta. Por ejemplo, un cuadro puede tener un texto alternativo que señale «Ventas en junio, julio y agosto», y una animación esquemática puede tener otro que señale «Animación del motor de un coche en funcionamiento». La Fórmula desarrollada de un compuesto químico puede describir inequívocamente usando la nomenclatura IUPAC y las fichas de medicamento y de compuesto químico.
Texto alternativo en plantillas y galerías
editar
- Plantillas
- muchas plantillas como las fichas y
{{Mapa de localización}}
tienen sus propios parámetros para especificar el textoalt
. Si una plantilla carece de este parámetro, considera la posibilidad de solicitar que se añada.
- Galerías
- las etiqueta
<gallery>
soporta el textoalt
desde MediaWiki 1.18.[6]{{Galería de imágenes}}
e{{Imagen múltiple}}
también la soportan.
- Líneas de tiempo
- la etiqueta
<timeline>
genera una imagen sinalt
.
- Fórmulas matemáticas
- la etiqueta
<math>
genera una fórmula matemática. Esta puede ser rederizada como una imagen o usar texto, dependiendo de la complejidad y de las preferencias de usuario. Para una formula sencilla, usa el parámetroalt
para traducirla. Las fórmulas más complejas son más complicadas de especificar, siendo la mejor opción el lenguaje original, que está por defecto si no se escribe el parámetroalt
.
Enlaces y atribución
editarEscribir |alt=
hará que el software MediaWiki renderice el código HTML con un atributo alt
vacío en la etiqueta img
. Cuando la imagen es un enlace, los lectores de pantalla leerán el nombre del archivo enlazado (por ej. guión verde "guión bajo" verde) si falta el atributo alt
o si está vacío. Casi todas las imágenes que hay en los artículos de Wikipedia están enlazadas a sus respectivas páginas de descripción, que contienen una versión de mayor tamaño de la imagen, al igual que la licencia y la información de atribución.[Notas 1]
Los artículos de Wikipedia contienen imágenes que no enlazan a la página de la imagen, por ejemplo el icono de información. Estas imágenes deberían estar configuradas por lo que son ignoradas por los lectores de pantalla. Esto se consigue añadiendo |link=
|alt=
en el código wiki de la imagen. Es aceptable eliminar el enlace de aquellas imágenes en dominio público o con su equivalente CC0, pero no de aquellas que necesiten algún tipo de atribución.
La mayoría de las imágenes de los artículos de Wikipedia no tienen una función activa: no son botones ni opciones de un menú. Cuando la imagen sirva para enlazar a otro artículo, nombra el artículo en el texto alternativo. Cuando el enlace ejecute una operación ―como ordenar)―, indica la operación. No escribas «clic aquí» o «enlace a», ya que el lector ya sabrá que la imagen es un enlace.[7]
Ejemplos
editarWikicódigo | Visualización normal | Lector de pantalla | Base lógica |
---|---|---|---|
[[Archivo:Dannebrog.jpg|thumb|center |upright=0.75|alt=Una bandera roja divida en cuatro por un cruz blanca ligeramente desplazada hacia la izquierda. |El diseño de [[bandera nacional]] más antiguo en uso hasta ahora es el [[Bandera de Dinamarca|''Dannebrog'']], la bandera de [[Dinamarca]] desde el siglo XVIII]] |
enlace gráfico Una bandera roja divida en cuatro por un cruz blanca ligeramente desplazada hacia la izquierda. El diseño de enlace bandera nacional más antiguo en uso hasta ahora es el de enlace Dannebrog, la bandera de enlace Dinamarca desde el siglo XVIII. | Artículo: Bandera El objetivo de la imagen es mostrar la bandera Dannebrog de Dinamarca. La fotografía puede ser reemplazada por una gráfico plano y tener la misma función, ya que el mástil de la bandera, su movimiento y el cielo no son importantes. | |
[[Archivo:Glass-half-full.jpeg|thumb|center|upright=0.75|alt=Agua clara vertida desde una jarra.|La fluoración no afecta a la apariencia, el sabor o el olor del [[agua potable]]]] |
enlace gráfico Agua clara vertida desde una jarra. La fluoración no afecta a la apariencia, el sabor o el olor del link agua potable. | Artículo: Fluoración del agua potable Esta foto ha sido elegida para decorar un audio del artículo en relación con agua de grifo. Esta imagen es un enlace por lo que necesita una breve descripción en el texto alt , ya que la descripción no identifica la imagen.
| |
[[Archivo:Blair Bush Whitehouse (2004-11-12).jpg|thumb|center|upright=0.75|alt=Tony Blair y George W. Bush estrechando la mano en una conferencia de prensa.|Blair y Bush acuerdan una estrategia para alcanzar la paz en Oriente Próximo para el 12 de noviembre de 2004]] |
enlace gráfico Tony Blair y George W. Bush estrechando la mano en una conferencia de prensa. Blair y Bush acuerdan una estrategia para alcanzar la paz en Oriente Próximo para el 12 de noviembre de 2004 | La imagen muestra el saludo realizado por ambos con un apretón de manos durante la conferencia de prensa. El texto |
Wikicódigo | Visualización normal | Lector de pantalla | Base lógica |
---|---|---|---|
[[Archivo:Commons-logo.svg|frameless |upright=0.23 |border |center |link=Commons:Special:Search |Buscar en Wikimedia Commons]] |
enlace gráfico Buscar en Wikimedia Commons | El objetivo de la imagen, un icono, es aportar un enlace al buscador de Commons. La apariencia del icono no es importante, pero su función sí. El texto alternativo escrito en el campo de "descripción" del código de la imagen funcionará tanto para el texto alt como para el título del enlace. En algunos navegadores, el título del enlace aparece como un cuadro informativo sobre el enlace.
| |
<imagemap>
Archivo:Bryan-Sewall.jpg|thumb|upright=0.75|center|alt=1896 Póster de la campaña demócrata
circle 950 850 700 [[William Jennings Bryan|William J. Bryan]]
circle 2950 850 700 [[Arthur Sewall]]
default [http://projects.vassar.edu/1896/democrats.html 1896 Sitio web de los demócratas]
</imagemap>
|
La imagen base tiene el texto alternativo «1896 Póster de la campaña demócrata». El círculo de la izquierda tiene el texto alt «William J. Bryan». El círculo a la derecha tiene el texto alt «Arthur Sewall». La (i) azul tiene el texto alt «Sobre esta imagen». Todos estos textos alternativos están repetidos como el texto del título del enlace, que en algunos navegadores proporciona un cuadro de información; a excepción de la imagen base, cuyo título del enlace es «1896 Sitio web de los demócratas».
|
La primera línea especifica el texto alt de la imagen base, que sirve para identificar la imagen. Cada línea siguiente a esta especifica el texto alt para un enlace de la zona, el cual debería ser el objetivo del enlace.[8]
| |
[[Archivo:Imbox notice.png|28x28px|alt=|link=]] No correr con tijeras. |
No correr con tijeras. | No correr con tijeras. | El icono es puramente decorativo. Si la imagen está en dominio público no hace falta ningún tipo de atribución, por lo que se puede eliminar el enlace, permitiendo especificar un texto alt en blanco haciendo que el título del archivo no sea leído por un lector de pantalla. La combinación de | y | lo oculta completamente.
|
Notas
editar- ↑ WebAIM dice «An image that is the only thing inside a link must never have a missing or null
alt
attribute. This is because the screen reader must read SOMETHING to identify the link». El lector de pantalla Fangs confirma esto.
Referencias
editar- ↑ a b c «G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content». W3C. 11 December 2008. Consultado el 4 de abril de 2010.
- ↑ Lazar J, Allen A, Kleinman J, Malarkey C (2007). «What frustrates screen reader users on the web: a study of 100 blind users» (PDF). Int J Hum Comput Interact 22 (3): 247-69. doi:10.1080/10447310709336964.
- ↑ a b c d «Appropriate use of alternative text». WebAIM. Consultado el 4 April 2010.
- ↑ a b G74: Providing a long description in text near the non-text content, with a reference to the location of the long description in the short description, WCAG 2.0 technique.
WebAim writes: "[T]he alt attribute (sometimes called the alt tag, though technically this is incorrect) is not the only mechanism for providing the content and function of the image. This information can also be provided in text adjacent to the image or within the page containing the image. ... The term alternative text, as used in this article, refers to the text equivalent for an image, regardless of where that text resides. It does not refer solely to the alt attribute of the image tag. See WebAIM. Appropriate Use of Alternative Text, accessed June 8, 2010. - ↑ «Understanding Success Criterion 1.1.1; Understanding WCAG 2.0». W3C. 11 December 2008. Consultado el 4 April 2010.
- ↑ Wikimedia bug 18682
- ↑ Petrie, Helen; Harrison, Chandra; and Dev, Sundeep. Describing images on the Web: a survey of current practice and prospects for the future, Centre for Human Computer Interaction Design, City University London. Consultado el 8 de junio de 2010.
- ↑ W3C. H24: Providing text alternatives for the area elements of image maps, WCAG 2.0 technique.
Enlaces externos
editar- Requisitos para proporcionar texto que sirva como una alternativa para las imágenes ―en la especificación HTML―.
- Altviewer. Herramienta para revisar los textos alternativos asociados a las imágenes y los vídeos de los artículos de Wikipedia.
- Fangs. emulador de lector de pantalla.