Diferencia entre revisiones de «Principio 1/1.1 Texto Alternativo/1.1.1- A»
De UX Wiki
Sin resumen de edición |
Sin resumen de edición |
||
| Línea 1: | Línea 1: | ||
<h2 id="introduccion" 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="introduccion" 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> | |||
== EVALUACIÓN == | == EVALUACIÓN == | ||
| Línea 33: | Línea 40: | ||
<html> | <html> | ||
<div class="accessibility-card"> | <div class="accessibility-card"> | ||
<h3>Ejemplo accesible</h3> | <h3>Ejemplo accesible 1</h3> | ||
<p>Esta imagen es accesible porque | <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://www.wikiwcag.udl.cat/images/thumb/c/cf/Atributo-alt.png/450px-Atributo-alt.png" alt="image123"> | <img src="https://www.wikiwcag.udl.cat/images/thumb/c/cf/Atributo-alt.png/450px-Atributo-alt.png" alt="image123"> | ||
<pre>alt="Atributo alt con un texto descriptivo y adecuado a la imagen"</pre> | <pre>alt="Atributo alt con un texto descriptivo y adecuado a la imagen"</pre> | ||
</div> | </div> | ||
</html> | </html> | ||
=== EJEMPLO NO ACCESIBLE === | === EJEMPLO NO ACCESIBLE === | ||
<HTML> | |||
<div class="accessibility-card-error"> | |||
<h3>Exemple NO accesible 1</h3> | |||
<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> | |||
</html> | |||
<HTML> | |||
<div class="accessibility-card-error"> | <div class="accessibility-card-error"> | ||
<h3>Exemple NO accesible</h3> | <h3>Exemple NO accesible 2</h3> | ||
<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 /> | ||
Revisión del 07:29 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 ==
== 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
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
alt=""
Exemple NO accesible 2
El texto del atributo alt que describe la imagen no corresponde a la información visual de la imagen
alt=""
En esta imagen se puede observar como correctamente hay un atributo alt
{{sust:discutido}}
<ref>Plantilla:Cita web</ref>
