Diferencia entre revisiones de «Principio 1/1.1 Texto Alternativo/1.1.1- A»

De UX Wiki
← Edición anterior
VisualWikitexto
Afra (discusión | contribs.)
profesores
120 ediciones
Sin resumen de edición
Sin resumen de edición
 
(No se muestran 8 ediciones intermedias de 2 usuarios)
Línea 1: Línea 1:
<h2 id="titulo" role="heading" aria-level="2" aria-label="Criterio">
'''1.1.1- A. Todo contenido no textual debe disponer de una alternativa textual breve que, siempre que sea posible, proporciona la misma información o cumple el mismo propósito que el contenido no textual'''
</h2>
<h2 id="titulo" role="heading" aria-level="2"> 
Criterio
1.1.1- A. Todo contenido no textual debe disponer de una alternativa textual breve que, siempre que sea posible, proporciona la misma información o cumple el mismo propósito que el contenido no textual
</h2>




== '''1.1.1- A. Todo contenido no textual debe disponer de una alternativa textual breve que, siempre que sea posible, proporciona la misma información o cumple el mismo propósito que el contenido no textual'''


<html>
  <div class="accessibility-card">
    <h3>Exemple accessible</h3>
    <p>Aquest exemple es acccesible, el parametre alt de l'etiqueta img esta complert</p>
    <img src="https://www.wikiwcag.udl.cat/images/thumb/c/cf/Atributo-alt.png/450px-Atributo-alt.png" alt="image123">
    <pre>alt="Etiqueta alt en img"</pre>
  </div>
</html>






== EVALUACIÓN ==
=== HERRAMIENTAS DE APOYO ===


'''Nombre de la herramienta''': Web Developer Toolbar


_________________
=== PROCEDIMIENTO DE COMPROBACIÓN ===


1. Seleccionar “Images – Outline images without alt attributes” y comprobar la página. Si hay alguna imagen resaltada, es un error y debe proporcionársele un atributo “alt”.


_________
2. Seleccionar “Images – Display alt attributes”. Comprobar la página valorando si el texto de dicho atributo describe el cometido de la imagen.




== REFERENCIA WCAG 2.1 ==


* G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content
* H35: Providing text alternatives on applet elements
* H37: Using alt attributes on img elements
* H53: Using the body of the object element
* F13: Failure of Success Criterion 1.1.1 and 1.4.1 due to having a text alternative that does not include information that is conveyed by color differences in the image
* F30: Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not alternatives (e.g., filenames or placeholder text)
* F65: Failure of Success Criterion 1.1.1 due to omitting the alt attribute or text alternative on img elements, area elements, and input elements of type "image"




== LISTA DE EJEMPLOS ACCESIBLES Y NO ACCESIBLES ==
Se listan diferentes ejemplos


=== EJEMPLO ACCESIBLE ===


<html>
<html>
   <div class="accessibility-card">
   <div class="accessibility-card">
     <h3>Exemple accessible</h3>
     <h3>Ejemplo accesible 1</h3>
     <p>Aquest exemple es acccesible, el parametre alt de l'etiqueta img esta complert</p>
     <p>Esta imagen es accesible porque tiene un atributo "alt" y se muestra un texto alternativo que describe la imagen de forma correcta. Es una imagen que complementa la información textual y por ello necesita una descripción para comunicar en texto su contenido</p>
     <img src="https://juanramonescritor.es/wiki/images/thumb/0/07/Alex_%281%29.jpg/600px-Alex_%281%29.jpg" alt="image123">
     <img src="https://www.wikiwcag.udl.cat/images/thumb/c/cf/Atributo-alt.png/450px-Atributo-alt.png" alt="image123">
     <pre>alt="imatge d'exemple accesible"</pre>
     <pre>alt="Atributo alt con un texto descriptivo y adecuado a la imagen"</pre>
   </div>
   </div>
</html>
</html>


<html>
 
   <div class="accessibility-card">
=== EJEMPLO NO ACCESIBLE ===
     <h3>Exemple accessible</h3>
<HTML>
     <p>Aquest exemple es acccesible, el parametre alt de l'etiqueta img esta complert</p>
   <div class="accessibility-card-error">
     <img src="https://juanramonescritor.es/wiki/images/0/04/Videocall.png?20250222162919" alt="image123">
     <h3>Exemple NO accesible 1</h3>
     <pre>alt="imatge d'exemple accesible"</pre>
     <p>Falta etiqueta alt en la imagen</p>
     <img src="https://lh5.googleusercontent.com/proxy/8-AB-4UXoIzHeQoPkomtNag9DdpaD7YELws70s0zUKMFPsOZev_UrCppjwF8leWBd2ZSFuJYVm4tQ_DSq3t0Xzece5t1k8C1mZ2uSBLRhcE7tz7mE3tDnB83_AiR-6njAbfIE2uBfReSMqWxzes9ZZwl" alt="image123">
     <pre>alt=""</pre>
   </div>
   </div>
   
</html>
 
  <HTML>
   <div class="accessibility-card-error">
   <div class="accessibility-card-error">
     <h3>Exemple NO accesible</h3>
     <h3>Exemple NO accesible 2</h3>
     <p>Falta etiqueta alt en la imatge</p>
     <p>El texto del atributo alt que describe la imagen no corresponde a la información visual de la imagen</p>
     <img src="https://lh5.googleusercontent.com/proxy/8-AB-4UXoIzHeQoPkomtNag9DdpaD7YELws70s0zUKMFPsOZev_UrCppjwF8leWBd2ZSFuJYVm4tQ_DSq3t0Xzece5t1k8C1mZ2uSBLRhcE7tz7mE3tDnB83_AiR-6njAbfIE2uBfReSMqWxzes9ZZwl" alt="image123">
     <img src="https://lh5.googleusercontent.com/proxy/8-AB-4UXoIzHeQoPkomtNag9DdpaD7YELws70s0zUKMFPsOZev_UrCppjwF8leWBd2ZSFuJYVm4tQ_DSq3t0Xzece5t1k8C1mZ2uSBLRhcE7tz7mE3tDnB83_AiR-6njAbfIE2uBfReSMqWxzes9ZZwl" alt="image123">
     <pre>alt=""</pre>
     <pre>alt=""</pre>
   </div>
   </div>
</html>
</html>
[[Archivo:Videocall.png|alt=imagen accesible|borde|sinmarco]]<br />
[[Archivo:Videocall.png|alt=imagen accesible|borde|sinmarco]]<br />
En esta imagen se puede observar como correctamente hay un atributo alt
En esta imagen se puede observar como correctamente hay un atributo alt




=== '''C) HERRAMIENTAS DE APOYO''' ===
'''Nombre de la herramienta''': Web Developer Toolbar
'''Procedimiento de comprobación:'''
1. Seleccionar “Images – Outline images without alt attributes” y comprobar la página. Si hay alguna imagen resaltada, es un error y debe proporcionársele un atributo “alt”.
2. Seleccionar “Images – Display alt attributes”. Comprobar la página valorando si el texto de dicho atributo describe el cometido de la imagen.
=== '''D) REFERENCIA WCAG 2.1''' ===
* G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content


{{sust:discutido}}
{{sust:discutido}}

Revisión actual - 07:44 8 oct 2025

1.1.1- A. Todo contenido no textual debe disponer de una alternativa textual breve que, siempre que sea posible, proporciona la misma información o cumple el mismo propósito que el contenido no textual


Criterio 1.1.1- A. Todo contenido no textual debe disponer de una alternativa textual breve que, siempre que sea posible, proporciona la misma información o cumple el mismo propósito que el contenido no textual




EVALUACIÓN

HERRAMIENTAS DE APOYO

Nombre de la herramienta: Web Developer Toolbar

PROCEDIMIENTO DE COMPROBACIÓN

1. Seleccionar “Images – Outline images without alt attributes” y comprobar la página. Si hay alguna imagen resaltada, es un error y debe proporcionársele un atributo “alt”.

2. Seleccionar “Images – Display alt attributes”. Comprobar la página valorando si el texto de dicho atributo describe el cometido de la imagen.


REFERENCIA WCAG 2.1

  • G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content
  • H35: Providing text alternatives on applet elements
  • H37: Using alt attributes on img elements
  • H53: Using the body of the object element
  • F13: Failure of Success Criterion 1.1.1 and 1.4.1 due to having a text alternative that does not include information that is conveyed by color differences in the image
  • F30: Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not alternatives (e.g., filenames or placeholder text)
  • F65: Failure of Success Criterion 1.1.1 due to omitting the alt attribute or text alternative on img elements, area elements, and input elements of type "image"


LISTA DE EJEMPLOS ACCESIBLES Y NO ACCESIBLES

Se listan diferentes ejemplos

EJEMPLO ACCESIBLE

Ejemplo accesible 1

Esta imagen es accesible porque tiene un atributo "alt" y se muestra un texto alternativo que describe la imagen de forma correcta. Es una imagen que complementa la información textual y por ello necesita una descripción para comunicar en texto su contenido

image123 
alt="Atributo alt con un texto descriptivo y adecuado a la imagen"


EJEMPLO NO ACCESIBLE

  

    
Exemple NO accesible 1

    
Falta etiqueta alt en la imagen

    image123
    
alt=""

  



  

    
Exemple NO accesible 2

    
El texto del atributo alt que describe la imagen no corresponde a la información visual de la imagen

    image123
    
alt=""


imagen accesible
En esta imagen se puede observar como correctamente hay un atributo alt


{{sust:discutido}}

<ref>Plantilla:Cita web</ref>


Obtenido de «https://www.wikiwcag.udl.cat/index.php?title=Principio_1/1.1_Texto_Alternativo/1.1.1-_A&oldid=800»