¿Cómo establecer un texto alternativo para el área en HTML5?

En este artículo, aprenderemos cómo especificar un texto alternativo para un área en HTML5. Este texto alternativo se muestra debido a varios motivos, como el uso de un lector de pantalla, una ruta de imagen incorrecta o inexistente en el atributo src o una conexión a Internet lenta.

Enfoque: Usaremos el atributo alt del elemento area. Proporciona información alternativa sobre un elemento como una imagen o un enlace, cuando el elemento en sí no se puede mostrar. Puede haber varias razones para no poder ver el elemento, como que se haya cambiado la ruta del recurso, que el recurso no esté disponible o que la conexión a Internet sea lenta.

Sintaxis:

<area alt="alternate text">

El siguiente ejemplo demuestra el enfoque anterior.

Ejemplo: En este ejemplo, se proporcionan rutas correctas e incorrectas a las imágenes, de modo que el texto alternativo del área sea visible cuando se especifique la ruta incorrecta.

HTML

<!DOCTYPE html>
<html>
  
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
  
    <h3>
        How to specify an alternate
        text for the area in HTML5?
    </h3>
  
    <h2>Valid paths to the images</h2>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210409233625/square.png"
        width="100" height="100"
        alt="square" usemap="#square">
  
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210409233624/circle.png" 
        width="100" height="100"
        alt="circle" usemap="#circle">
  
    <h2>Invalid paths to the images</h2>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/invalid/square1.png" 
        width="100" height="100"
        alt="square" usemap="#square2">
  
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/invalid/circle1.png"
        width="100" height="100"
        alt="circle" usemap="#circle2">
  
    <map name="square">
        <area shape="square" 
            coords="0,0,90,130" alt="square">
    </map>
  
    <map name="circle">
        <area shape="circle" 
            coords="100,60,5" alt="circle">
    </map>
  
    <map name="square2">
        <area shape="square" 
            coords="0,0,90,130" alt="square2">
    </map>
  
    <map name="circle2">
        <area shape="circle" 
            coords="100,60,5" alt="circle2">
    </map>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por arpitadeb595 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta