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

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestran 4 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
== '''1.4.1- B. 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''' ==
{{CriterioWCAG
'''A) EJEMPLO ACCESIBLE:'''
|id_wcag_criterio=1.4.1
|id_wcag_subcriterio=1.4.1-B
|wcag_titulo_criterio=1.4.1-B. Diferenciar los enlaces del texto circundante
|wcag_nivel=A
|wcag_version=2.0
|wcag_principio=1_Perceptible
|wcag_principio_url=Principio_1
|wcag_pauta=1.4_Distinguible
|wcag_pauta_url=Principio_1/1.4_Distinguible
|wcag_grupo=Presentación
|wcag_subgrupo=Uso_del_color


'''B) EJEMPLO NO ACCESIBLE:'''
|wcag_discapacidades=
<li class="discapacidad-item">
  [[Archivo:Bajavision.png|20px|class=icon-discapacidad|alt=Baja visión]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad baja visión|Baja visión]]</span> –
  <span class="gravedad gravedad-grave">Barrera grave</span>
</li>
 
|wcag_lista_discapacidades=
[[Categoría:Discapacidad baja visión]]
 
|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><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G183 G183: Using a contrast ratio of 3:1 and providing additional visual cues for focus]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/failures/F73 F73: Failure to provide sufficient information to identify links when color is removed]</span></li>
</ul>
 
|wcag_recursos=
<strong> Consejos </strong>
<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
 
|wcag_pasos_evaluacion=
Usa la herramienta  ‘’’[https://www.tpgi.com/color-contrast-checker/ Colour Contrast Analyser]’’’
 
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span>
Localizar todos los enlaces que están rodeados de texto.
</li>
 
<li><span class="paso-badge">Paso 2.</span>
Comprobar que presentan un contraste de al menos 3:1 con el texto que lo rodea.
<ul>
<li>a. Pulsar en el icono en la sección <strong>“Foreground colour”</strong> y seleccionar el color del enlace en la página.</li>
<li>b. Pulsar en el icono en la sección <strong>“Background colour”</strong> y seleccionar el color del texto adyacente en la página.</li>
<li>c. Comprobar que el <strong>“Contrast ratio”</strong> que aparece junto a <strong>“WCAG 2.1 results”</strong> es superior a <strong>3:1</strong>.</li>
</ul>
</li>
 
<li><span class="paso-badge">Paso 3.</span>
Verificar que se muestran otras pistas visuales (subrayado, negrita…) cuando el enlace obtiene el foco con el ratón.
</li>
 
<li><span class="paso-badge">Paso 4.</span>
Verificar que se muestran otras pistas visuales (subrayado, negrita…) cuando el enlace obtiene el foco a través del teclado.
</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=
 
<div class="accessibility-card">
En el código CSS se indica que el enlace esté subrallado.
<br/>
HTML:
<pre class="wcag-codigo-html">
<p>Visita nuestra <a href="#">página de ayuda</a> para más información.</p>
</pre>
 
CSS:
<pre class="wcag-codigo-html">
a {
  text-decoration: underline;
}
</pre>
 
</div>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<li>'''Inspección del navegador''': comprobar que los enlaces se distinguen del texto circundante no solo por el color (p. ej., subrayado, estilo de texto, ícono) y que conservan un indicador visible al pasar el foco.</li>
<li>'''Navegación por teclado''': recorrer la página con <kbd>Tab</kbd> para verificar que los enlaces muestran una pista visual clara de foco.</li>
<li>'''Filtros de visión / sin estilos''': activar simuladores de daltonismo o desactivar CSS para confirmar que los enlaces siguen siendo identificables por más de un atributo visual.</li>
</ul>
 
}}

Revisión actual - 12:36 6 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

Recursos de apoyo

Consejos
  • 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

Procedimiento de evaluación

Usa la herramienta ‘’’Colour Contrast Analyser’’’
  1. Paso 1. Localizar todos los enlaces que están rodeados de texto.
  2. Paso 2. Comprobar que presentan un contraste de al menos 3:1 con el texto que lo rodea.
    • a. Pulsar en el icono en la sección “Foreground colour” y seleccionar el color del enlace en la página.
    • b. Pulsar en el icono en la sección “Background colour” y seleccionar el color del texto adyacente en la página.
    • c. Comprobar que el “Contrast ratio” que aparece junto a “WCAG 2.1 results” es superior a 3:1.
  3. Paso 3. Verificar que se muestran otras pistas visuales (subrayado, negrita…) cuando el enlace obtiene el foco con el ratón.
  4. Paso 4. Verificar que se muestran otras pistas visuales (subrayado, negrita…) cuando el enlace obtiene el foco a través del teclado.

Resultado esperado

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

Ejemplo

En el código CSS se indica que el enlace esté subrallado.
HTML: 

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

CSS: 

a {
  text-decoration: underline;
}

Otras herramientas de evaluación

  • Inspección del navegador: comprobar que los enlaces se distinguen del texto circundante no solo por el color (p. ej., subrayado, estilo de texto, ícono) y que conservan un indicador visible al pasar el foco.
  • Navegación por teclado: recorrer la página con Tab para verificar que los enlaces muestran una pista visual clara de foco.
  • Filtros de visión / sin estilos: activar simuladores de daltonismo o desactivar CSS para confirmar que los enlaces siguen siendo identificables por más de un atributo 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=3704»