Diferencia entre revisiones de «Principio 2/2.4 Navegable/2.4.4-A»

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestran 3 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
== '''2.4.4-A. Propósito de enlaces''' ==
{{CriterioWCAG
<!-- 
|id_wcag_criterio=2.4.4
   Análisis interno:
|id_wcag_subcriterio=2.4.4-A
   Este criterio impacta principalmente a: Personas con discapacidad cognitiva y visual
|wcag_titulo_criterio=2.4.4-A. Propósito de los enlaces en contexto
   Problema grave: Si los enlaces no describen su propósito, los usuarios pueden perderse o tomar decisiones incorrectas al navegar, dificultando la comprensión y causando barreras graves.
|wcag_nivel=A
-->
|wcag_version=2.0
<html>
|wcag_principio=2_Operable
<!-- criterio 2.4.4-A -->
|wcag_principio_url=Principio_2
<article class="wcag-card">
|wcag_pauta=2.4_Navegable
   <section class="wcag-info">
|wcag_pauta_url=Principio_2/2.4_Navegable
    <ul>
|wcag_grupo=Navegación
      <li><span class="label">Nivel:</span><span class="value">A</span></li>
|wcag_subgrupo=Significado_de_enlaces
      <li><span class="label">Versión:</span><span class="value">2.2</span></li>
|wcag_subcriterio_url=Principio_2/2.4_Navegacion_clara/2.4.4-A
      <li><span class="label">Principio:</span><span class="value">2. Operable</span></li>
 
      <li><span class="label">Pauta:</span><span class="value">2.4 Proporcionar ayuda para navegar y buscar contenido</span></li>
|wcag_discapacidades=
      <li><span class="label">Categoría:</span><span class="value">Navegación</span></li>
<li class="discapacidad-item">
      <li><span class="label">Subcategoría:</span><span class="value">Propósito de enlaces en contexto</span></li>
   [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
    </ul>
   <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> –
  </section>
   <span class="gravedad gravedad-grave">Barrera grave</span>
  <section class="wcag-users">
</li>
    <p>Usuarios más afectados</p>
 
    <ul>
<li class="discapacidad-item">
      <li><img src="/images/4/40/Cognitiva.png" alt="Icono discapacidad cognitiva" class="icono-discapacidad" /> Personas con discapacidad cognitiva – <span class="gravedad">Barrera grave</span></li>
  [[Archivo:Bajavision.png|20px|class=icon-discapacidad|alt=Baja visión]]
      <li><img src="/images/4/4d/Sinvision.png" alt="Icono discapacidad visual total" class="icono-discapacidad" /> Personas con discapacidad visual total – <span class="gravedad">Barrera grave</span></li>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad baja visión|Baja visión]]</span> –
    </ul>
  <span class="gravedad gravedad-moderada">Barrera moderada</span>
  </section>
</li>
</article>
 
</html>
<li class="discapacidad-item">
  [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> –
   <span class="gravedad gravedad-grave">Barrera grave</span>
</li>
 
<li class="discapacidad-item">
  [[Archivo:Motriz.png|20px|class=icon-discapacidad|alt=Discapacidad motriz]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad motriz|Motriz]]</span> –
  <span class="gravedad gravedad-leve">Barrera leve</span>
</li>
 
|wcag_lista_discapacidades=
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad baja visión]]
[[Categoría:Discapacidad cognitiva]]
[[Categoría:Discapacidad motriz]]
 
 
|wcag_texto_criterioOAW =
Los enlaces deben identificar cuál es su función o destino en el propio texto del enlace o mediante el texto del enlace junto a su contexto más inmediato.
 
|wcag_descripcion_resumida=
Los enlaces deben indicar de forma clara su función o destino. 
El propósito puede deducirse mediante:
* El propio texto del enlace (recomendado)
* El texto cercano que complementa el enlace
* Encabezados o contexto inmediato
 
No debe depender únicamente de información visual, ni usar textos genéricos como ''haz clic aquí'', ''más información'' o ''leer más'' sin contexto claro.
 
|wcag_objetivo=
Facilitar decisiones rápidas y seguras de navegación para todas las personas, especialmente quienes usan lector de pantalla o quienes se orientan por escaneo visual rápido.
 
|wcag_importancia=
Proporcionar contexto claro en los enlaces evita confusión, reduce esfuerzo cognitivo y mejora la eficiencia en la navegación.
 
En enlaces repetidos o ambiguos, las personas usuarias pueden perderse o activar enlaces erróneos.
 
|wcag_referencias=
<ul>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G91 G91: Providing link text that describes the purpose of a link]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H30 H30: Providing link text that describes the purpose of a link for anchor elements]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G53 G53: Identifying the purpose of a link using link text combined with the text of the enclosing sentence]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H33 H33: Supplementing link text with the title attribute]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/css/C7 C7: Using CSS to hide a portion of the link text]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H77 H77: Identifying the purpose of a link using link text combined with its enclosing list item]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H78 H78: Identifying the purpose of a link using link text combined with its enclosing paragraph]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H79 H79: Identifying the purpose of a link in a data table using the link text combined with its enclosing table cell and associated table header cells]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H81 H81: Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G189 G189: Providing a control near the beginning of the Web page that changes the link text]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR30 SCR30: Using scripts to change the link text]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/failures/F63 F63: Failure due to providing link context only in content that is not related to the link]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/failures/F89 F89: Failure due to not providing an accessible name for an image which is the only content in a link]</span></li>
 
</ul>
 
 
|wcag_recursos=
<ul>
<li> [https://www.w3.org/WAI/tips/writing/#make-link-text-meaningful Make link text meaningful (W3C)] </li>
<li>
[https://webaim.org/techniques/hypertext/ Links and Hypertext (WebAIM)]
</li>
</ul>
 
 
|wcag_tipo_evaluacion=Semiautomática
 
|wcag_pasos_evaluacion=
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span>
Localizar todos los elementos que sean enlaces.
</li>
 
<li><span class="paso-badge">Paso 2.</span>
Verificar que se cumple alguna de las siguientes condiciones:
<ul>
<li>a. El propio texto del enlace o su contexto más cercano sirve para identificar la función o el destino del enlace.</li>
<li>b. Se complementa el texto del enlace con una descripción adicional de alguna de las siguientes formas:
<ul>
<li>i. Complementando el texto del enlace con el atributo <code>title</code>. 
Para comprobarlo, en <strong>Web Developer Toolbar</strong> seleccionar <strong>Information → Display Title attributes</strong>.</li>
<li>ii. Usando CSS para ocultar parte del texto del enlace. 
Este caso se comprueba utilizando la herramienta de inspección de código del navegador.</li>
</ul>
</li>
</ul>
</li>
</ol>
 
 
|wcag_resultado_evaluacion=
Todos los enlaces permiten comprender su propósito sin necesidad de acceder al enlace.
 
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
El enlace ya presenta la información de donde enlaza y qué ocurre al seleccionarlo.
<pre class="wcag-codigo-html">
<a href="/programa">Accede al programa del curso</a>
</pre
</div>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<li> '''Bookmarklet ''':
[https://a11y-tools.com/bookmarklets/#listlinks List links]
</li>
<li>'''Inspección del contenido''': comprobar que el texto del enlace describe claramente su propósito o destino sin depender únicamente del contexto visual lejano (evitar textos como “haz clic aquí” o “más información” sin contexto).</li>
<li>'''Revisión contextual inmediata''': verificar que, si el enlace usa un texto genérico, el propósito puede deducirse claramente por el contexto cercano (p. ej., justo antes o después del enlace).</li>
<li>'''Lectores de pantalla''': (NVDA, JAWS, VoiceOver) usar la función de “lista de enlaces” para asegurarse de que cada enlace comunica su propósito sin necesidad de leer todo el contenido circundante.</li>
<li>'''Inspección del código''': revisar atributos adicionales como <code>aria-label</code> o <code>title</code> que pueden complementar el propósito, asegurando que no se dependa únicamente de ellos.</li>
</ul>
 
}}

Revisión actual - 12:44 6 nov 2025

2.4.4-A. Propósito de los enlaces en contexto

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 deben identificar cuál es su función o destino en el propio texto del enlace o mediante el texto del enlace junto a su contexto más inmediato.

Comprensión del criterio

Descripción resumida

Los enlaces deben indicar de forma clara su función o destino.

El propósito puede deducirse mediante:

  • El propio texto del enlace (recomendado)
  • El texto cercano que complementa el enlace
  • Encabezados o contexto inmediato
No debe depender únicamente de información visual, ni usar textos genéricos como haz clic aquí, más información o leer más sin contexto claro.

Objetivo

Facilitar decisiones rápidas y seguras de navegación para todas las personas, especialmente quienes usan lector de pantalla o quienes se orientan por escaneo visual rápido.

Importancia de cumplir el criterio

Proporcionar contexto claro en los enlaces evita confusión, reduce esfuerzo cognitivo y mejora la eficiencia en la navegación. En enlaces repetidos o ambiguos, las personas usuarias pueden perderse o activar enlaces erróneos.

Referencias WCAG

Recursos de apoyo

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomática

Procedimiento de evaluación

  1. Paso 1. Localizar todos los elementos que sean enlaces.
  2. Paso 2. Verificar que se cumple alguna de las siguientes condiciones:
    • a. El propio texto del enlace o su contexto más cercano sirve para identificar la función o el destino del enlace.
    • b. Se complementa el texto del enlace con una descripción adicional de alguna de las siguientes formas:
      • i. Complementando el texto del enlace con el atributo title. Para comprobarlo, en Web Developer Toolbar seleccionar Information → Display Title attributes.
      • ii. Usando CSS para ocultar parte del texto del enlace. Este caso se comprueba utilizando la herramienta de inspección de código del navegador.

Resultado esperado

Todos los enlaces permiten comprender su propósito sin necesidad de acceder al enlace.

Ejemplo

El enlace ya presenta la información de donde enlaza y qué ocurre al seleccionarlo. 

<a href="/programa">Accede al programa del curso</a>
</pre

Otras herramientas de evaluación

  • Bookmarklet : List links
  • Inspección del contenido: comprobar que el texto del enlace describe claramente su propósito o destino sin depender únicamente del contexto visual lejano (evitar textos como “haz clic aquí” o “más información” sin contexto).
  • Revisión contextual inmediata: verificar que, si el enlace usa un texto genérico, el propósito puede deducirse claramente por el contexto cercano (p. ej., justo antes o después del enlace).
  • Lectores de pantalla: (NVDA, JAWS, VoiceOver) usar la función de “lista de enlaces” para asegurarse de que cada enlace comunica su propósito sin necesidad de leer todo el contenido circundante.
  • Inspección del código: revisar atributos adicionales como aria-label o title que pueden complementar el propósito, asegurando que no se dependa únicamente de ellos.

Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 2.4.4-A. Propósito de los enlaces en contexto

Loading comments...
Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_2/2.4_Navegable/2.4.4-A&oldid=3728»