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

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestran 14 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
== '''1.1.1-H. Combinación de enlaces e imágenes''' ==
{{CriterioWCAG
<html>
|id_wcag_criterio=1.1.1
<!-- criterio 1.1.1-H -->
|id_wcag_subcriterio=1.1.1-H
<article class="wcag-card">
|wcag_titulo_criterio=1.1.1-H. Combinación de enlaces e imágenes
  <section class="wcag-info">
|wcag_nivel=A
    <ul>
|wcag_version=2.0
      <li><span class="label">Nivel:</span><span class="value">A</span></li>
|wcag_principio=1_Perceptible
      <li><span class="label">Versión:</span><span class="value">2.2</span></li>
|wcag_principio_url=Principio_1
      <li><span class="label">Principio:</span><span class="value">1. Perceptible</span></li>
|wcag_pauta=1.1_Textos_alternativos
      <li><span class="label">Pauta:</span><span class="value">1.1 Textos alternativos</span></li>
|wcag_pauta_url=Principio_1/1.1_Texto_Alternativo
      <li><span class="label">Categoría:</span><span class="value">Contenido</span></li>
|wcag_grupo=Contenido
      <li><span class="label">Subcategoría:</span><span class="value">No-texto</span></li>
|wcag_subgrupo=No-texto
    </ul>
  </section>
  <section class="wcag-users">
    <p>Usuarios más afectados</p>
    <ul>
      <li><img src="/images/4/4d/Sinvision.png" alt="Icono de una persona con discapacidad visual" />
      <span>Personas con discapacidad visual total - <span class="gravedad">Barrera grave</span></span></li>
    </ul>
  </section>
</article>


</html>
|wcag_discapacidades=
[[Categoría: Visual total]]
<li class="discapacidad-item">
  [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span>
  –
  <span class="gravedad gravedad-grave">Barrera grave</span>
</li>


[[Categoría: Contenido]]
|wcag_lista_discapacidades=
[[Categoría: Nivel-A]]
[[Categoría:Discapacidad visual total]]


<html>
<!--
Análisis: 1.1.1-H
- Discapacidad: Personas con discapacidad visual total
- Problema: Enlaces duplicados por imágenes sin texto alternativo generan confusión y dificultades de navegación.
- Gravedad: Grave
-->
</html>


 
|wcag_texto_criterioOAW=
=== Descripción y comprensión del criterio ===
Cuando un enlace y una imagen actúan como enlace al mismo recurso, deben combinarse en un solo enlace para simplificar la navegación.
Cuando un enlace y una imagen actúan como enlace al mismo recurso, deben combinarse en un solo enlace para simplificar la navegación.
==== Descripción resumida ====
<div class="wcag-info-criterio">
Si una imagen y un texto enlazan al mismo destino, deben unirse en un solo enlace.
Así se evita duplicar información para usuarios de teclado o lector de pantalla.
</div>
==== Objetivo ====
<div class="wcag-info-criterio"> Mejorar la eficiencia y claridad de la navegación. </div>


==== Importancia de cumplir el criterio ====
|wcag_descripcion_resumida=
Si una imagen y un texto apuntan al mismo recurso, ambos deben estar dentro del mismo enlace. 


<div class="wcag-info-criterio"> Evita que una persona encuentre dos enlaces iguales seguidos, lo que causa confusión. </div>


==== Referencias WCAG ====
Esto evita que las tecnologías de apoyo anuncien dos enlaces iguales consecutivos, lo cual genera confusión y navegación ineficiente.


<div class="wcag-info-criterio">
|wcag_objetivo=
* <span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html| Comprender el criterio 1.1.1 (en inglés)]</span>
Optimizar la claridad y la eficiencia de la navegación para usuarios de lectores de pantalla o teclado, evitando redundancias innecesarias.
* <span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/html/H2 Técnica H2 – Combinar enlaces adyacentes de imagen y texto]</span>
</div>


=== Evaluación del criterio ===
|wcag_importancia=
==== Tipo de comprobación ====
Cuando los enlaces están duplicados, un usuario con discapacidad visual puede escuchar dos veces el mismo destino. 
Esto dificulta la comprensión y ralentiza la navegación. 
Unirlos en un solo enlace evita confusiones.


<div class="wcag-info-criterio">  
|wcag_referencias=
Comprobación <strong>Manual</strong>  
<ul>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html Understanding Success Criterion 1.1.1]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/html/H2 Technique H2 – Combining adjacent image and text links]</span></li>
</ul>


Es necesario revisar visualmente las imágenes y leer las descripciones para comprobar que la información esté completa.
|wcag_recursos=
</div>
No hay


==== Procedimiento de evaluación ====
|wcag_tipo_evaluacion=Semiautomática


<div class="wcag-info-criterio">
|wcag_pasos_evaluacion=
<span class="paso-badge>Paso 1.</span>
Usa la herramienta de ''' [https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es Web Developer Toolbar].'''
Usa la herramienta de ''' [https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es Web Developer Toolbar].'''


<span class="paso-badge>Paso 2.</span> Verificar enlaces consecutivos que llevan al mismo recurso.  
<ol class="paso-list">
 
<li><span class="paso-badge">Paso 1.</span> Seleccionar '''Images – Display alt attributes'''.</li>
<span class="paso-badge>Paso 3.</span> Asegurarse de que estén combinados en un solo <code>&lt;a&gt;</code>.
<li><span class="paso-badge">Paso 2.</span> Localizar las imágenes que actúan como enlaces.</li>
<li><span class="paso-badge">Paso 3.</span> Usando la herramienta de inspección de código del navegador, verificar que no existan enlaces consecutivos al mismo recurso.</li>
</ol>


</div>
|wcag_resultado_evaluacion=
Imagen y texto enlazados al mismo destino están unidos en un solo enlace accesible, evitando duplicación de enlaces.


==== Ejemplo ====
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
Se indica en el texto alternativo el tipo de documento que se descargará el informe anual.


<div class="wcag-info-criterio">
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">  
<a href="informe.pdf"><img src="pdf.gif" alt="en formato PDF"> Informe anual</a>
<a href="informe.pdf"> <img src="pdf.gif" alt="en formato PDF"> Informe anual </a>  
</pre>
</pre>  
</div>
</div>


|wcag_otras_herramientas_evaluacion=
<ul>
<li>
<strong>Lector de pantalla:</strong> JAWS, NVDA, VoiceOver 
Verificar que solo se anuncia un enlace.
</li>
<li>
<strong>Inspector del navegador:</strong> 
Confirmar que imagen y texto están dentro del mismo <code>&lt;a&gt;</code>.
</li>


==== Otras herramientas de evaluación ====
}}
 
<div class="wcag-info-criterio">
'''Lector de pantalla'''
 
Uso de lectores de pantalla como JAWS, NVDA o VoiceOver, para comprobar que la información que se escucha al acceder a un enlace no se duplica.
 
'''Inspector del navegador'''
 
Puedes usar la herramienta de inspección del navegador para comprobar como se ha incluido la información de las imágenes y enlaces que forman parte del mismo próposito.
 
</div>

Revisión actual - 17:54 4 nov 2025

1.1.1-H. Combinación de enlaces e imágenes

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

Enunciado del criterio (Observatorio de Accesibilidad Web)

  • Cuando un enlace y una imagen actúan como enlace al mismo recurso, deben combinarse en un solo enlace para simplificar la navegación.

Comprensión del criterio

Descripción resumida

Si una imagen y un texto apuntan al mismo recurso, ambos deben estar dentro del mismo enlace.


Esto evita que las tecnologías de apoyo anuncien dos enlaces iguales consecutivos, lo cual genera confusión y navegación ineficiente.

Objetivo

Optimizar la claridad y la eficiencia de la navegación para usuarios de lectores de pantalla o teclado, evitando redundancias innecesarias.

Importancia de cumplir el criterio

Cuando los enlaces están duplicados, un usuario con discapacidad visual puede escuchar dos veces el mismo destino.

Esto dificulta la comprensión y ralentiza la navegación.

Unirlos en un solo enlace evita confusiones.

Referencias WCAG

Recursos de apoyo

No hay

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomática

Procedimiento de evaluación

Usa la herramienta de Web Developer Toolbar.
  1. Paso 1. Seleccionar Images – Display alt attributes.
  2. Paso 2. Localizar las imágenes que actúan como enlaces.
  3. Paso 3. Usando la herramienta de inspección de código del navegador, verificar que no existan enlaces consecutivos al mismo recurso.

Resultado esperado

Imagen y texto enlazados al mismo destino están unidos en un solo enlace accesible, evitando duplicación de enlaces.

Ejemplo ilustrativo

Se indica en el texto alternativo el tipo de documento que se descargará el informe anual. 

<a href="informe.pdf"><img src="pdf.gif" alt="en formato PDF"> Informe anual</a>


Otras herramientas de evaluación

  • Lector de pantalla: JAWS, NVDA, VoiceOver Verificar que solo se anuncia un enlace.
  • Inspector del navegador: Confirmar que imagen y texto están dentro del mismo <a>.










Ejemplos accesibles y no accesibles creados por alumnos

 Última modificación
2526UFV1.1.1-H-00211 enero 2026 15:50:00
2525UPSA1.1.1-H-00118 diciembre 2025 15:53:59
2526UPSA1.1.1-H-00018 diciembre 2025 10:43:19


Comentarios

A continuación se muestran comentarios sobre el criterio 1.1.1-H. Combinación de enlaces e imágenes

Loading comments...




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