Diferencia entre revisiones de «Principio 1/1.4 Distinguible/1.4.1-B»

De WCAG Wiki
← Edición anteriorEdición siguiente →
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
Línea 1: Línea 1:
== '''1.4.1-B. Diferenciar los enlaces del texto circundante''' ==
{{CriterioWCAG
<!-- 
|id_wcag_criterio=1.4.1
  Análisis interno:
|id_wcag_subcriterio=1.4.1-B
  Este criterio impacta principalmente a: Personas con discapacidad visual total y baja visión 
|wcag_titulo_criterio=1.4.1-B. Diferenciar los enlaces del texto circundante
  Problema grave: Si los enlaces no se diferencian del texto circundante mediante contraste y pistas visuales adicionales, los usuarios con baja visión o daltonismo pueden no reconocerlos como enlaces, afectando navegación y comprensión. 
|wcag_nivel=A
-->
|wcag_version=2.2
<html>
|wcag_principio=1_Perceptible
<!-- criterio 1.4.1-B -->
|wcag_principio_url=Principio_1
<article class="wcag-card">
|wcag_pauta=1.4_Facilitar_ver_y_escuchar_contenido
  <section class="wcag-info">
|wcag_pauta_url=Principio_1/1.4_Facilitar_ver_y_escuchar_contenido
    <ul>
|wcag_grupo=Presentación
      <li><span class="label">Nivel:</span><span class="value">A</span></li>
|wcag_subgrupo=Uso_del_color
      <li><span class="label">Versión:</span><span class="value">2.2</span></li>
      <li><span class="label">Principio:</span><span class="value">1. Perceptible</span></li>
      <li><span class="label">Pauta:</span><span class="value">1.4 Facilitar ver y escuchar contenido</span></li>
      <li><span class="label">Categoría:</span><span class="value">Presentación</span></li>
      <li><span class="label">Subcategoría:</span><span class="value">Uso del color</span></li>
    </ul>
  </section>


  <section class="wcag-users">
|wcag_discapacidades=
    <p>Usuarios más afectados</p>
<li class="discapacidad-item">
    <ul>
  [[Archivo:Bajavision.png|20px|class=icon-discapacidad|alt=Baja visión]]
      <li><img src="/images/b/b7/Bajavision.png" alt="Icono baja visión" class="icono-discapacidad" /> Personas con baja visión – <span class="gravedad">Barrera grave</span></li>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad baja visión|Baja visión]]</span> –
      <li><img src="/images/4/4d/Sinvision.png" alt="Icono de una persona con discapacidad visual" /> Personas con discapacidad visual total - <span class="gravedad">Barrera grave</span></li>
  <span class="gravedad gravedad-grave">Barrera grave</span>
    </ul>
</li>
  </section>
<li class="discapacidad-item">
</article>
  [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
</html>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> –
  <span class="gravedad gravedad-grave">Barrera grave</span>
</li>
 
|wcag_lista_discapacidades=
[[Categoría:Discapacidad baja visión]]
[[Categoría:Discapacidad visual total]]
 
|wcag_texto_criterioOAW=
Los enlaces no se deben diferenciar del texto que los rodea únicamente mediante el color o al menos tienen un contraste de 3:1 con el texto que los rodea y se deben emplear pistas visuales adicionales cuando reciben el foco.
 
|wcag_descripcion_resumida=
Los enlaces dentro de un párrafo no pueden distinguirse únicamente por el color. 
Si solo se usa color, deben cumplirse dos requisitos: 
* Contraste mínimo 3:1 entre el enlace y el texto adyacente. 
* Se deben añadir pistas visuales adicionales (subrayado, negrita u otra señal) cuando el enlace recibe foco o interacción.
 
|wcag_objetivo=
Garantizar que los usuarios con baja visión o daltonismo distingan claramente los enlaces del resto del texto, especialmente en contenido en línea.
 
|wcag_importancia=
Si la diferenciación depende solo del color, los usuarios con baja visión o déficit de color pueden no identificar enlaces, afectando navegación y comprensión. 
Las pistas visuales complementarias evitan la ambigüedad y mejoran la usabilidad.
 
|wcag_referencias=
<ul>
<li>G183: Contraste 3:1 y pistas visuales al recibir foco</li>
<li>F73: Fallo al crear enlaces no evidentes sin visión del color</li>
</ul>
 
|wcag_recursos=
<ul>
<li>Comprobar contraste mínimo 3:1 con el texto cercano.</li>
<li>Aplicar subrayado, negrita u otras señales visuales al enfocar/enlazar.</li>
<li>Evitar enlaces indistinguibles del texto, incluso si la persona no percibe color.</li>
<li>Usar cambios visuales consistentes en hover y focus.</li>
</ul>
 
|wcag_tipo_evaluacion=Semiautomática / Comprobación manual
 
|wcag_pasos_evaluacion=
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Identificar enlaces en línea.</li>
<li><span class="paso-badge">Paso 2.</span> Verificar contraste 3:1 con el texto adyacente.</li>
<li><span class="paso-badge">Paso 3.</span> Confirmar pistas visuales adicionales en foco o interacción (subrayado, negrita, etc.).</li>
</ol>
 
|wcag_resultado_evaluacion=
Los enlaces son distinguibles del texto adyacente mediante color con contraste adecuado y señales adicionales al recibir foco.
 
|wcag_ejemplo_evaluacion=
Ejemplo accesible:
<div class="accessibility-card">
<pre class="wcag-codigo-html">
<p>Visita nuestra <a href="#" style="text-decoration:underline;">página de ayuda</a> para más información.</p>
</pre>
</div>
 
Ejemplo no accesible:
<div class="accessibility-card-error">
<pre class="wcag-codigo-html">
<p>Visita nuestra <a href="#" style="color:blue;">página de ayuda</a> para más información.</p>
</pre>
</div>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<li>Colour Contrast Analyser</li>
<li>Zoom del navegador</li>
<li>Herramientas de inspección visual</li>
</ul>
}}

Revisión del 18:55 4 nov 2025

1.4.1-B. Diferenciar los enlaces del texto circundante

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)

  • Los enlaces no se deben diferenciar del texto que los rodea únicamente mediante el color o al menos tienen un contraste de 3:1 con el texto que los rodea y se deben emplear pistas visuales adicionales cuando reciben el foco.

Comprensión del criterio

Descripción resumida

Los enlaces dentro de un párrafo no pueden distinguirse únicamente por el color.

Si solo se usa color, deben cumplirse dos requisitos:

  • Contraste mínimo 3:1 entre el enlace y el texto adyacente.
  • Se deben añadir pistas visuales adicionales (subrayado, negrita u otra señal) cuando el enlace recibe foco o interacción.

Objetivo

Garantizar que los usuarios con baja visión o daltonismo distingan claramente los enlaces del resto del texto, especialmente en contenido en línea.

Importancia de cumplir el criterio

Si la diferenciación depende solo del color, los usuarios con baja visión o déficit de color pueden no identificar enlaces, afectando navegación y comprensión. Las pistas visuales complementarias evitan la ambigüedad y mejoran la usabilidad.

Referencias WCAG

  • G183: Contraste 3:1 y pistas visuales al recibir foco
  • F73: Fallo al crear enlaces no evidentes sin visión del color

Recursos de apoyo

  • Comprobar contraste mínimo 3:1 con el texto cercano.
  • Aplicar subrayado, negrita u otras señales visuales al enfocar/enlazar.
  • Evitar enlaces indistinguibles del texto, incluso si la persona no percibe color.
  • Usar cambios visuales consistentes en hover y focus.

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomática / Comprobación manual

Procedimiento de evaluación

  1. Paso 1. Identificar enlaces en línea.
  2. Paso 2. Verificar contraste 3:1 con el texto adyacente.
  3. Paso 3. Confirmar pistas visuales adicionales en foco o interacción (subrayado, negrita, etc.).

Resultado esperado

Los enlaces son distinguibles del texto adyacente mediante color con contraste adecuado y señales adicionales al recibir foco.

Ejemplo

Ejemplo accesible: 
<p>Visita nuestra <a href="#" style="text-decoration:underline;">página de ayuda</a> para más información.</p>

Ejemplo no accesible: 

<p>Visita nuestra <a href="#" style="color:blue;">página de ayuda</a> para más información.</p>

Otras herramientas de evaluación

  • Colour Contrast Analyser
  • Zoom del navegador
  • Herramientas de inspección visual










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 1.4.1-B. Diferenciar los enlaces del texto circundante

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_1/1.4_Distinguible/1.4.1-B&oldid=3337»