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 71 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">
'''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>




<ul class="mw-collapsible mw-collapsed"
    data-expandtext="Mostrar ejemplo accesible"
    data-collapsetext="Ocultar ejemplo accesible"
    style="list-style-type: none; padding-left: 0;">
<li>
<br>
[[Archivo:Videocall.png|alt=Videocall donde se aplica correctamente el atributo alt|no|miniaturadeimagen|300x300px|Videollamada donde se aplica ok el atributo alt]]
Fuente: página de inicio de la once. https://www.once.es/
</li>


</ul>
<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>


<ul class="mw-collapsible mw-collapsed"
    data-expandtext="Mostrar ejemplo accesible (2)"
    data-collapsetext="Ocultar ejemplo accesible (2)"
    style="list-style-type: none; padding-left: 0;">


<li>
<br>


[[Archivo:Images.jpg|alt=imagen de prueba|no|miniaturadeimagen|225x225px|imagen de prueba]]
Este texto podria ser para un ejemplo de prueba. Estoy testeando la primera version BETA de UX wiki!!
</li>
</ul>


<ul class="mw-collapsible mw-collapsed"
    data-expandtext="Mostrar ejemplo no accesible"
    data-collapsetext="Ocultar ejemplo no accesible"
    style="list-style-type: none; padding-left: 0;">
<br>


<li>
<br>


[[Archivo:1.1.1-A NoAcc.png|alt=Imagen donde no se aplica correctamente el atributo alt|no|miniaturadeimagen|300x300px|Imagen donde no se aplica correctamente el atributo alt]]
== EVALUACIÓN ==
'''Fuente''': Página de inicio Universitat de Lleida. <nowiki>http://www.udl.cat/ca/</nowiki>
=== HERRAMIENTAS DE APOYO ===


En esta imagen falta el atributo ALT (observar el código HTML) en la etiqueta IMG
'''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"


2. Imagen sin texto adecuado en la etiqueta ALT: '''Ejemplo imagen NO accesible'''  Fuente: Página de noticias Universitat de Lleida. <nowiki>https://www.udl.cat/ca/es/noticias/</nowiki>


En esta imagen se observa que la descripción de las imágenes no es adecuada. Deberían estar sin texto (ALT="") o bien una descripción de la imagen (como si se la explicases a alguien por teléfono).
== LISTA DE EJEMPLOS ACCESIBLES Y NO ACCESIBLES ==
</li>
Se listan diferentes ejemplos
</ul>


=== 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>


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


'''Procedimiento de comprobación:'''
=== 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
 


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.
{{sust:discutido}}


=== '''D) REFERENCIA WCAG 2.1''' ===
<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>


* G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content
{{ORDENAR:Principio 1/1.1 Texto Alternativo/1.1.1- A2}}

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»