Cómo agregar texto alternativo a las imágenes automáticamente con AI

El primer principio de accesibilidad web es proporcionar texto alternativo para imágenes, pero también es uno de los más difíciles de poner en práctica correctamente. Y por esta razón, hay muchas imágenes en Internet que no tienen texto alternativo, una alternativa mal escrita o un texto simplemente incorrecto. El contexto es todo cuando se trata de determinar un texto alternativo adecuado para imágenes. Es por eso que es importante comprender y aprender cómo agregar texto alternativo a las imágenes para beneficiar a su sitio. Se dice que una imagen vale más que mil palabras. Las imágenes en las páginas de su sitio lo ayudan a aclarar su contenido y hacerlo más atractivo porque son estéticamente atractivas. Es difícil mantenerse motivado cuando miras grandes bloques de texto. La mayoría de las personas se sentirán menos abrumadas si separa esos bloques de texto con imágenes.
Considere aterrizar en una página del sitio web que le indique cómo cambiar el aceite del vehículo. La introducción en la página del sitio es larga, y cada párrafo siguiente es tan larga. No puede soportar quedarse y superar toda la información, tanto como desee cambiar su aceite para ahorrar dinero. Este artículo cubrirá lo que es otro texto y por qué es importante, cómo escribir un buen texto alternativo y cómo agregar texto alternativo a las imágenes. ¿Qué es otro texto? El texto alternativo, también conocido como atributo ALT, otra descripción de la etiqueta alt o Alt, es un fragmento de información detallada que describe lo que muestra una imagen. Otro texto es la copia escrita que aparece en lugar de una imagen en una página web si la imagen no se carga en la pantalla de un usuario. Este texto ayuda al software de lectura de pantalla a describir imágenes para los espectadores con impedimentos visuales, así como permitir que los motores de búsqueda accedan a rastreadores y clasifiquen su sitio de manera más eficiente.
El principio fundamental es que las computadoras y lectores de pantalla no pueden analizar una imagen y no pueden determinar qué contiene. Como desarrolladores web, es una necesidad darle al usuario el texto que describe el contexto y la función de las imágenes de contenido. El texto alternativo se refiere al texto equivalente de una imagen, independientemente de dónde esté ese texto. No se refiere solo al otro atributo de la etiqueta de imagen. Al referirse al atributo en sí, el atributo se referirá al atributo en sí, que a menudo contendrá, pero no siempre, el texto alternativo. Si usa una imagen como botón de compra para el producto X, el texto alternativo debe decir el “botón de compra para el producto X”. Los lectores de pantalla, que son navegadores utilizados por las ciegas y con discapacidad visual, usan la etiqueta ALT. Al leer la etiqueta Alt, estos lectores de pantalla pueden determinar qué hay en la imagen. Cuando pasa con el mouse sobre un elemento, el atributo del título aparece como un consejo explicativo. Por ejemplo, en el caso de un botón de imagen, el título de la imagen podría incluir un impulso adicional. Esto, sin embargo, no es un método recomendado. No se requiere un atributo de título. Además, la mayoría de las veces, no es necesario incluirlo. Solo están disponibles para los usuarios que usan un mouse (u otros dispositivos de indicación), y el atributo de título solo es necesario para la accesibilidad en las etiquetas iframe> y el marco>.
¿Qué sucede si una imagen no sirve? Encuentre mal si tiene imágenes de diseño que son exclusivamente para fines estéticos. Esas imágenes deben almacenarse en CSS en lugar de HTML. Si no puede cambiar las imágenes, coloque un atributo otro objetivo en ellas, de la siguiente manera: el artículo continúa a continuación
Img src = “image.png” alt = “”> img src = “image.png” alt = “”> Los lectores de la pantalla omitirán la imagen si el atributo queda en blanco. Puede dejar el campo para obtener “texto alternativo” desde la configuración de la imagen en WordPress en blanco. ¿Por qué es otro texto importante? El texto alternativo tiene tres usos principales, cada uno de ellos con una amplia gama de utilidad, por lo que su importancia no puede ser exagerada:

Reemplazo de contenido: si un archivo de imagen no cobra, se mostrará texto alternativo, que describe la imagen para el usuario.
Optimización para motores de búsqueda (SEO): las etiquetas ALT se utilizan en motores de búsqueda exitosos para proporcionar una mejor definición y una explicación de imagen contextual, lo que resulta en mejores resultados para el motor de búsqueda. En el marketing en Internet, el SEO es un componente crítico para obtener resultados sólidos.
Accesibilidad a Internet: si alguna vez ha realizado una búsqueda de imágenes en Google, probablemente haya superado muchas imágenes sobre un tema en particular. El otro texto atribuido a estas imágenes en el sitio web en las que se encuentran se utiliza para clasificarlas. Al hacer clic en una imagen, verá dónde se ha publicado y puede acceder al sitio allí. Es más probable que las personas hagan clic en las primeras imágenes en los resultados de buscar imágenes, como en las búsquedas habituales, lo que significa que obtienen más exposición. Esta es una característica crítica de Internet de hoy. Estos pasos no solo lo ayudan a asegurarse de que sus clientes o clientes se sientan apreciados y respetados, sino que también lo ayudan a que su servicio web cumpla con sus requisitos y estándares. Aunque debe alentar a sus suscriptores a registrar sus correos electrónicos en la lista blanca, aún debe dar contexto para las imágenes, porque todos los clientes de correo electrónico, webmail y escritorio, pueden desactivar o activar las imágenes de forma predeterminada. El texto alternativo correctamente descriptivo agregado a las fotos, por ejemplo, es una herramienta útil para aquellos basados ​​en los lectores de pantalla para comprender el contexto de la imagen en su página web. La admisión de una descripción de la imagen es casi siempre útil, pero la descripción no siempre es de buena calidad. Aunque es técnica y funcionalmente correcto para lograr su propósito, carece de calidad y contexto. Este tipo de descripción básica siempre seguirá siendo el pago con el lector, el cliente y el consumidor. En el contexto del texto alternativo, la solución es simple: explique la imagen lo más breve y descriptiva posible.
La respuesta a algunas preguntas descriptivas simples sobre la imagen le dará el contexto rico que necesita para describirlo correctamente. También debe aprovechar esta oportunidad para apuntar a sus palabras clave, vincular la imagen con el contenido de la página y hacerlo más relevante para la consulta de búsqueda. Sin embargo, una palabra de precaución: llenar las palabras clave es obvio y muchos motores de búsqueda lo penalizarán si lo hace. Mantenga sus descripciones relevantes para la imagen, se imagine imaginativamente. Cómo agregar automáticamente texto alternativo a las imágenes El propósito de optimizar los motores de búsqueda no es solo encontrar las mejores palabras clave. Asegurar que sus medios tengan etiquetas apropiadas también es parte del proceso. Sin embargo, agregar títulos de medios y etiquetas alternativas a WordPress puede llevar mucho tiempo. ¿Qué sucede si había una manera de incluir automáticamente estos elementos sin pasar mucho tiempo para ajustar las cosas? Este tutorial le muestra cómo agregar automáticamente los medios y etiquetas al ALT a WordPress al cargar imágenes. Ahorre tiempo y asegúrese de que los robots de motores de búsqueda accedan correctamente a sus imágenes. Agregar texto alternativo con SIRV
Un campo especial de MetaDescription está disponible para todas las imágenes alojadas en SIRV. Se puede utilizar como fuente de texto alternativa en una variedad de componentes SIRV. Usaremos Azure Computer Vision, una herramienta de reconocimiento de imágenes AI para agregar automáticamente otras imágenes. Los datos devueltos por Azure Computer Vision se utilizarán para completar las descripciones de las imágenes SIRV. Debido a que se pueden buscar descripciones de imágenes, esto tiene la ventaja adicional de mejorar los resultados de búsqueda en la aplicación SIRV. El artículo continúa a continuación
Necesitaremos las claves API de Azure y Sirv para comenzar. Debe tener una cuenta SIRV, una cuenta de Microsoft Azure y una visión por computadora SDK Azure. 1. Regístrese en Azure Computer Vision
Obtenga una cuenta de Azure gratis
Agregar visión por computadora

Crear una instancia de computadora de visión:

Guarde la clave API y la dirección del punto final después de que se complete la implementación: visión por computadora en las claves de Azure para la dirección API

Configure el Azure Computer Vision SDK en su idioma favorito.
2. Gorges API para SIRV
Vaya a su cuenta SIRV

Crea un nuevo descanso para el cliente de API

Guardar las claves del cliente y las claves secretas del cliente

La adición automática de otra etiqueta a una imagen es el momento de ir a trabajar ahora que ha instalado la visión de la computadora de Azure y ha guardado todas las credenciales. Para este ejemplo, usaremos Python.
Incluya todas las bibliotecas necesarias. Cree un nuevo archivo de Python como Autoal.py. Luego, en su editor favorito, agregue las siguientes bibliotecas:
desde azure.cognitiveservices.Vision.CuperVision import ComputerSisionClient de azure.cognitiveservices.Vision.computervision.models Import OperationStatuscodes de Azure.CognitiveServices.Vision.Cupision.Models Import de VisualFeaturetyPetypes de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación msresticatications De importar importación de tiempo de importación de sys de urllib. Asigne las siguientes variables a la visión de la computadora API y las claves SIRV:
# Su clave de suscripción y Endpoint suscription_key = “Su clave de suscripción de Azure” Endpoint = “Su URL de punto final de Azure, ejemplo – https://we.cognitivservices.azure.com/” #SIRV credenciales sirv_id = “Usted ID de cliente aquí” sirv_secret = “Su secreto de cliente Sirv aquí” #La imagen vamos a obtener una descripción para remota_image_url = “https://demo.sirv.com/leopard.jpg”
En la variable de URL de la imagen remota, también incluimos una URL de imagen.
Revise su identidad. Obtenga el símbolo de autenticación SIRV creando un cliente de visión por computadora:
#Create Azure Customer Computerervision_client = ComputerervisionClient (Endpoint, CognitiveServicesCredentials (suscripciones_key)) # Obtener token automático SIRV. API reference-https: //apidocs.sirv.com/#connect-sirv-api payload = {‘clientID’: sirv_id, ‘clientsecret’: sirv_secret} encabezados = {‘content-type’: ‘application/json’} = requests.request (‘post’, ‘https://pi.sirv.com/v2/token’, dat = json.dumps (carga útil), encabezados = encabezados) token = respuesta.json (‘) [token’ ‘ ] Finalmente, podemos interactuar con ambas API, lo cual es fantástico.
En SIRV, obtienes la descripción de la imagen y la actualiza. Así es como podemos hacer una descripción para una imagen:
# Crear una visión por computadora Customer Descripción_results = Computerervision_client.describe_image (remoto_image_url) # Obtenga las capas (descripts) de la respuesta, con un nivel de confianza impreso (“Descripción de la imagen remota:”) if (len (descripción: imprime (“sin descripción detectada: detectado . “) else: para la leyenda en description_results.captations: print (” {} ‘con confianza {: .2f}%”. format (subtittion.text.confidence * 100)) Descripción =’ {” Descripción “:” + + subtitt.Text + ‘”}’ ” Actualice la descripción de la imagen en la fila. API reference-https: //apidocs.sirv.com/#set-meta-decription ” # agarra la ruta de la imagen como nombre de archivo. Params = {“nombre de archivo”: urlPars (remoto_image_url) .path} encabezados = {‘content-type’: “aplicación/json”, ‘autorización’: ‘portador % s’ % token} respuesta = requests.request (post ‘,, ‘https://pi.sirv.com/v2/files/meta/decripction’, data = description.encode (‘utf-8’), encabezados = encabezados, params = params) print (respuesta)
Opcionalmente, puede incluir una verificación de confianza, que actualizará la descripción de la imagen solo si el nivel de confianza es lo suficientemente alto. Aparecerá de la siguiente manera:

# Crear una visión por computadora Customer Descripción_results = Computerervision_client.describe_image (remoto_image_url) # Obtenga las capas (descripts) de la respuesta, con un nivel de confianza impreso (“Descripción de la imagen remota:”) if (len (descripción: imprime (“sin descripción detectada: detectado . “) else: para la leyenda en description_results.captations: print (” {} ‘con confianza {: .2f}%”. format (subtittion.text.confidence * 100)) Descripción =’ {” Descripción “:” + + subtitt.text + ‘”}’ # Cambie el número 60 aquí un nivel de porcentaje de confianza deseado. If (subtittion.confidence * 100> 60): ” Actualice la descripción de la imagen en la fila. API reference-https: //apidocs.sirv.com/#set-meta-decription ” # agarra la ruta de la imagen como nombre de archivo. Params = {“nombre de archivo”: urlPars (remoto_image_url) .path} encabezados = {‘content-type’: “aplicación/json”, ‘autorización’: ‘portador % s’ % token} respuesta = requests.request (post ‘,, ‘https://pi.sirv.com/v2/files/meta/decripction’, data = descripción No hay Capiones con un nivel de confianza lo suficientemente alto detectado “) armar todo
desde azure.cognitiveservices.Vision.CuperVision import ComputerSisionClient de azure.cognitiveservices.Vision.computervision.models Import OperationStatuscodes de Azure.CognitiveServices.Vision.Cupision.Models Import de VisualFeaturetyPetypes de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación msresticatications Desde importar importar sys sys import tiempo de urllib. ID de cliente “Sirv_secret =” Su cliente secreto “#the Image Vamos a obtener una descripción para Remote_Image_Url =” https://demo.sirv.com/leopard.jpg “# Crear Azure Computerervision_client = ComputerervisionClient (EndPoint, CognitiveScredenti. (Subscription_Key)) # Get SIRV Auth Token. API reference-https: //apidocs.sirv.com/#connect-sirv-api payload = {‘clientID’: sirv_id, ‘clientsecret’: sirv_secret} encabezados = {‘content-type’: ‘application/json’} = requests.request (‘post’, ‘https://pi.sirv.com/v2/token’, dat = json.dumps (carga útil), encabezados = encabezados) token = respuesta.json (‘) [token’] # Crear una visión por computadora Customer Descripción_results = Computerervision_client.describe_image (remoto_image_url) # Obtenga las capas (descripts) de la respuesta, con un nivel de confianza impreso (“Descripción de la imagen remota:”) if (len (descripción 0): imprime (“no Descripción detectada. “) Else: para la leyenda en Descripción_Results.Captations: print (” {} ‘
con confianza {: .2f}%”. format (subtittion.text, subtitt.confidence * 100)) descripción = ‘{” descripción “:”‘ + subtitt.text + ‘”}’ ” actualizar la descripción de la imagen en Sirv. API Referencia-https: //apidocs.sirv.com/#set-meta-description ” params = {“nombre de archivo”: urlPars (remotos_image_url) .path} encabezados = {‘content-type’: “aplicación/json “, ‘Autorización’: ‘Bearer % S’ % Token} Respuesta = requests.request (‘post’, ‘https://pi.sirv.com/v2/files/meta/decripction’, data = Descripción.Encode ( ‘UTF-8’), encabezados = encabezados, params = params) impresión (respuesta) Agregar etiquetas de imagen alternativas en el mundo real, desea agregar etiquetas a otras imágenes en el bloque. Necesitará direcciones de URL de imagen de su SIRV cuenta para tener éxito. Hay varias formas de hacer esto.
Exportar imágenes como un archivo CSV
Usemos la aplicación web para exportar sus imágenes en aras de la simplicidad.
Guarde la URL de la imagen en un archivo de texto separado (llámelo imágenes.txt) y colóquela en la misma carpeta que el script. Luego podemos usar un bucle para describir cada imagen y completar el campo Descripción.
El artículo continúa a continuación
Aquí está el código completo:
desde azure.cognitiveservices.Vision.CuperVision import ComputerSisionClient de azure.cognitiveservices.Vision.computervision.models Import OperationStatuscodes de Azure.CognitiveServices.Vision.Cupision.Models Import de VisualFeaturetyPetypes de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación de la importación msresticatications De importar importar importación Sys Importar tiempo de urllib.Parse Importar UrlParse # Su clave de suscripción y Endpoint suscription_key = “clave de visión por computadora” Endpoint = “https://we.cognitivservices.azure.com/” #SIRV Credentials Sirv_id = “Su sirv. ID del cliente “Sirv_Secret =” Su Sirv Secret Customer “#Create Azure Computerervision_client = CompuTervisionClient (Endpoint, Cognitive ServicesCredentials (Subscription_KY)) # Get SIRV Auto Token. API reference-https: //apidocs.sirv.com/#connect-to-sirv-api payload = {‘clientID’: sirv_id, ‘clientsecret’: sirv_secret} #estamos optando por el archivo CSV y recorriendo el archivo con Open (‘Images.txt’) como f: para imagen en f: encabezados = {‘content-type’: ‘application/json’} respuesta = requests.request (‘post’, ‘https: // api .sirv. com/v2/token ‘, dat = json.dumps (carga útil), encabezados = encabezados) token = respuesta.json (‘ token ‘] # creó un cliente de visión por computadora descripción_results = computervision_client.describe_image (imagen) # Obtenga las descripciones (descripciones (descripciones (descripciones (descripciones (descripciones obtenga las descripciones (descripciones (descripciones obtenga las descripciones (descripciones (descripciones obtenga las descripciones (descripciones (descripciones obtenga las descripciones (descripciones obtenga ) De la respuesta, con la impresión de nivel de confianza (“Descripción de la imagen remota:”) if (len (description_results) == 0): imprime (“sin descripción detectada”) else: para la leyenda en description_results.captations: imprime (” ‘{}’
con confianza {: .2f}%”. format (subtittion.text, subtitt.confidence * 100)) descripción = ‘{” descripción “:”‘ + subtitt.text + ‘”}’ ” actualizar la descripción de la imagen en Sirv. API reference-https: //apidocs.sirv.com/#set-meta-decripts ” ‘params = {“nombre de archivo”: urlpars (imagen) .patch.replace (‘ n ”)} encabezados = {‘ Content-type ‘: “Application/JSON”,’ Autorización ‘:’ Bearer % S ‘ % Token} Respuesta = requests.Request (‘ Post ‘,’ https://pi.sirv.com/v2/files/ meta/ Descripción ‘, data = Descripción.Encode (‘ UTF-8 ‘), Headers = Headers, Params = Params) Print (Respuesta) Impresión (‘ 4 Segunda pausa ‘) TIME.SLEEP (4) Los pensamientos finales se acostumbran a agregar un ALT un ALT Etiqueta en cada imagen que cargue. Es esencial incluir texto alternativo en imágenes si desea que su sitio sea amigable con los motores de búsqueda. Si sabe texto descriptivo a todo el sitio web. Me lo agradecerá ¡Tarde! 🙂 Espero que esto elimine cualquier dilema que tengas. ¡Envíanos una fila o dos!