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

De UX Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestran 46 ediciones intermedias de 4 usuarios)
Línea 1: Línea 1:
== '''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 id="titulo" role="heading" aria-level="2" aria-label="Criterio">
[[Archivo:Videocall.png|alt=imagen accesible|borde|sinmarco]]<br />
'''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'''
En esta imagen se puede observar como correctamente hay un atributo alt
</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>
 
 
 
 
 


{{EvaluacionEjemplo|id=1}}
== EVALUACIÓN ==
=== HERRAMIENTAS DE APOYO ===


=== '''C) HERRAMIENTAS DE APOYO''' ===
'''Nombre de la herramienta''': Web Developer Toolbar
'''Nombre de la herramienta''': Web Developer Toolbar


'''Procedimiento de comprobación:'''
=== 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”.
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”.
Línea 14: Línea 26:
2. Seleccionar “Images – Display alt attributes”. Comprobar la página valorando si el texto de dicho atributo describe el cometido de la imagen.
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''' ===
 
== 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
* 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>
  <div class="accessibility-card">
    <h3>Ejemplo accesible 1</h3>
    <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">
    <pre>alt="Atributo alt con un texto descriptivo y adecuado a la imagen"</pre>
  </div>
</html>
=== 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">
    <h3>Exemple NO accesible 2</h3>
    <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">
    <pre>alt=""</pre>
  </div>
</html>
[[Archivo:Videocall.png|alt=imagen accesible|borde|sinmarco]]<br />
En esta imagen se puede observar como correctamente hay un atributo alt


{{sust:discutido}}
{{sust:discutido}}
Línea 22: Línea 82:
<ref>{{Cita web |url=http://www.ejemplo.com |título=Ejemplo de título |autor=Nombre del autor |fecha=Fecha de publicación |editor=Nombre del editor }}</ref>
<ref>{{Cita web |url=http://www.ejemplo.com |título=Ejemplo de título |autor=Nombre del autor |fecha=Fecha de publicación |editor=Nombre del editor }}</ref>


{{EvaluacionEjemplo|id=1}}
{{ORDENAR:Principio 1/1.1 Texto Alternativo/1.1.1- A2}}
{{EvaluacionEjemplo|id=2}}EJEMPLO:
[[Archivo:Alex.jpg|borde|izquierda|miniaturadeimagen]]
<br>
{{EvaluacionEjemplo|id=3}}

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»