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

De UX Wiki
← Edición anteriorEdición siguiente →
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
Línea 5: Línea 5:
     data-expandtext="Mostrar ejemplo accesible"  
     data-expandtext="Mostrar ejemplo accesible"  
     data-collapsetext="Ocultar ejemplo accesible">
     data-collapsetext="Ocultar ejemplo accesible">
<li>Lorem</li>
<li>
<li>Ipsum</li>
<br>
<li>Dolor</li>
</ul>
 
 
'''A) EJEMPLO ACCESIBLE:'''
[[Archivo:Videocall.png|alt=Videocall donde se aplica correctamente el atributo alt|no|miniaturadeimagen|300x300px|Videollamada donde se aplica ok el atributo alt]]
[[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/
Fuente: página de inicio de la once. https://www.once.es/
</li>


</ul>


'''A) EJEMPLO ACCESIBLE (2):'''
<ul class="mw-collapsible mw-collapsed"
    data-expandtext="Mostrar ejemplo accesible (2)"
    data-collapsetext="Ocultar ejemplo accesible (2)">
<li>
[[Archivo:Images.jpg|alt=imagen de prueba|no|miniaturadeimagen|225x225px|imagen de prueba]]
[[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!!
Este texto podria ser para un ejemplo de prueba. Estoy testeando la primera version BETA de UX wiki!!
</li>
</ul>


'''A) EJEMPLO NO ACCESIBLE:'''
<ul class="mw-collapsible mw-collapsed"
    data-expandtext="Mostrar ejemplo no accesible"
    data-collapsetext="Ocultar ejemplo no accesible">
<li>
[[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]]
[[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]]
'''Fuente''': Página de inicio Universitat de Lleida. <nowiki>http://www.udl.cat/ca/</nowiki>
'''Fuente''': Página de inicio Universitat de Lleida. <nowiki>http://www.udl.cat/ca/</nowiki>
Línea 29: Línea 34:


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).
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).
</li>
</ul>


=== '''C) HERRAMIENTAS DE APOYO''' ===
=== '''C) HERRAMIENTAS DE APOYO''' ===

Revisión del 17:57 24 feb 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


  • Videocall donde se aplica correctamente el atributo alt
    Videollamada donde se aplica ok el atributo alt

    Fuente: página de inicio de la once. https://www.once.es/

  • imagen de prueba
    imagen de prueba

    Este texto podria ser para un ejemplo de prueba. Estoy testeando la primera version BETA de UX wiki!!

  • Imagen donde no se aplica correctamente el atributo alt
    Imagen donde no se aplica correctamente el atributo alt

    Fuente: Página de inicio Universitat de Lleida. http://www.udl.cat/ca/

    En esta imagen falta el atributo ALT (observar el código HTML) en la etiqueta IMG

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

    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).


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
Obtenido de «https://www.wikiwcag.udl.cat/index.php?title=Principio_1/1.1_Texto_Alternativo/1.1.1-_A&oldid=436»