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

De WCAG Wiki
← Edición anteriorEdición siguiente →
VisualWikitexto
Sin resumen de edición
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.0</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:Visual total]]
[[Categoría: Versión-2.0]]


|wcag_texto_criterioOAW=
Cuando una imagen y un texto enlazan al mismo destino, deben combinarse en un solo enlace para evitar duplicar información para los usuarios de lector de pantalla o navegación por teclado.


<html>
|wcag_descripcion_resumida=
<!--
Si una imagen y un texto apuntan al mismo recurso, ambos deben estar dentro del mismo enlace.
Análisis: 1.1.1-H
Esto evita que las tecnologías de apoyo anuncien dos enlaces iguales consecutivos, lo cual genera confusión y navegación ineficiente.
- 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_objetivo=
Optimizar la claridad y la eficiencia de la navegación para usuarios de lectores de pantalla o teclado, evitando redundancias innecesarias.


=== Descripción y comprensión del criterio ===
|wcag_importancia=
<div class="wcag-info-criterio">
Cuando los enlaces están duplicados, un usuario con discapacidad visual puede escuchar dos veces el mismo destino. 
Cuando un enlace y una imagen actúan como enlace al mismo recurso, deben combinarse en un solo enlace para simplificar la navegación.
Esto dificulta la comprensión y ralentiza la navegación. 
</div>
Unirlos en un solo enlace evita confusiones.
==== Descripción resumida ====


<div class="wcag-info-criterio">  
|wcag_referencias=
Si una imagen y un texto enlazan al mismo destino, deben unirse en un solo enlace.  
<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>


Así se evita duplicar información para usuarios de teclado o lector de pantalla.
|wcag_recursos=
</div>
No hay


==== Objetivo ====
|wcag_tipo_evaluacion=Manual


<div class="wcag-info-criterio"> Mejorar la eficiencia y claridad de la navegación. </div>
|wcag_pasos_evaluacion=
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Identificar imágenes que actúan como enlaces junto a texto enlazado al mismo destino.</li>
<li><span class="paso-badge">Paso 2.</span> Usar Web Developer Toolbar para mostrar atributos ALT.</li>
<li><span class="paso-badge">Paso 3.</span> Confirmar que imagen y texto se encuentran dentro del mismo enlace.</li>
</ol>


==== Importancia de cumplir el criterio ====
|wcag_resultado_evaluacion=
Imagen y texto enlazados al mismo destino están unidos en un solo enlace accesible, evitando duplicación de enlaces.


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


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


<div class="wcag-info-criterio">
|wcag_otras_herramientas_evaluacion=
* <span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html Comprender el criterio 1.1.1 (en inglés)]</span>
<strong>Lector de pantalla:</strong> JAWS, NVDA, VoiceOver 
* <span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/html/H2 Técnica H2 – Combinar enlaces adyacentes de imagen y texto (en inglés)]</span>
Verificar que solo se anuncia un enlace.
</div>


=== Evaluación del criterio ===
<strong>Inspector del navegador:</strong> 
==== Tipo de comprobación ====
Confirmar que imagen y texto están dentro del mismo <code>&lt;a&gt;</code>.


<div class="wcag-info-criterio">
}}
Comprobación <strong>Manual</strong>
 
Es necesario revisar visualmente las imágenes y leer las descripciones para comprobar que la información esté completa.
</div>
 
==== Procedimiento de evaluación ====
 
<div class="wcag-info-criterio">
<span class="paso-badge>Paso 1.</span>
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.
 
<span class="paso-badge>Paso 3.</span> Asegurarse de que estén combinados en un solo <code>&lt;a&gt;</code>.
 
</div>
 
==== Ejemplo ====
 
<div class="wcag-info-criterio">
Se muestra la información del tipo de formato del fichero en el texto alternativo.
<div class="accessibility-card">
 
<pre class="wcag-codigo-html">
<a href="informe.pdf">  <img src="pdf.gif" alt="en formato PDF"> Informe anual </a>
</pre>
</div>
</div>
 
==== 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 del 11:11 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 una imagen y un texto enlazan al mismo destino, deben combinarse en un solo enlace para evitar duplicar información para los usuarios de lector de pantalla o navegación por teclado.

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 Manual

Procedimiento de evaluación

  1. Paso 1. Identificar imágenes que actúan como enlaces junto a texto enlazado al mismo destino.
  2. Paso 2. Usar Web Developer Toolbar para mostrar atributos ALT.
  3. Paso 3. Confirmar que imagen y texto se encuentran dentro del mismo enlace.

Resultado esperado

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

Ejemplo ilustrativo

Ejemplo correcto: 
<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=3068»