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 2 ediciones intermedias del mismo usuario)
Línea 7: Línea 7:
|wcag_principio=2_Operable
|wcag_principio=2_Operable
|wcag_principio_url=Principio_2
|wcag_principio_url=Principio_2
|wcag_pauta=2.4_Navegacion_clara
|wcag_pauta=2.4_Navegable
|wcag_pauta_url=Principio_2/2.4_Navegacion_clara
|wcag_pauta_url=Principio_2/2.4_Navegable
|wcag_grupo=Navegación
|wcag_grupo=Navegación
|wcag_subgrupo=Significado_de_enlaces
|wcag_subgrupo=Significado_de_enlaces
Línea 46: Línea 46:


|wcag_texto_criterioOAW =
|wcag_texto_criterioOAW =
El propósito de cada enlace debe poder determinarse a partir del propio texto del enlace o del texto del enlace junto con su contexto inmediato.
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=
|wcag_descripcion_resumida=
Línea 55: Línea 55:
* Encabezados o contexto inmediato
* 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.
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=
|wcag_objetivo=
Línea 61: Línea 61:


|wcag_importancia=
|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.
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=
|wcag_referencias=
<ul>
<ul>
<li><span lang="en">https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context.html</span></li>
<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>
</ul>


|wcag_recursos=
|wcag_recursos=
<ul>
<ul>
<li>https://webaim.org/techniques/hypertext/</li>
<li> [https://www.w3.org/WAI/tips/writing/#make-link-text-meaningful Make link text meaningful (W3C)] </li>
<li>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a</li>
<li>
[https://webaim.org/techniques/hypertext/ Links and Hypertext (WebAIM)]
</li>
</ul>
</ul>


|wcag_tipo_evaluacion=Semiautomática
|wcag_tipo_evaluacion=Semiautomática
Línea 78: Línea 97:
|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
<ol class="paso-list">
<ol class="paso-list">
<li>Identificar todos los enlaces de la página.</li>
<li><span class="paso-badge">Paso 1.</span>
<li>Analizar si el texto del enlace indica su propósito claramente.</li>
Localizar todos los elementos que sean enlaces.
<li>Si no es claro por sí solo, revisar contexto inmediato (párrafo, encabezado, texto adyacente).</li>
</li>
<li>Confirmar que no se usan enlaces ambiguos como “clic aquí”, “más” o “leer más” sin contexto.</li>
 
<li>Probar experiencia con lector de pantalla verificando lista de 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>
</ol>


|wcag_resultado_evaluacion=
|wcag_resultado_evaluacion=
Todos los enlaces permiten comprender su propósito sin necesidad de seguir el enlace.
Todos los enlaces permiten comprender su propósito sin necesidad de acceder al enlace.


|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
<div class="accessibility-card">
<strong>✅ Correcto</strong>
El enlace ya presenta la información de donde enlaza y qué ocurre al seleccionarlo.
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<a href="/programa">Programa del curso</a>
<a href="/programa">Accede al programa del curso</a>
</pre>
</pre
</div>
 
<div class="accessibility-card">
<strong>✅ Correcto con contexto inmediato</strong>
<pre class="wcag-codigo-html">
Descargar el temario del curso:
<a href="/temario.pdf">Temario (PDF)</a>
</pre>
</div>
 
<div class="accessibility-card-error">
<strong>❌ Incorrecto</strong>
<pre class="wcag-codigo-html">
Para más información, <a href="/info">haz clic aquí</a>.
</pre>
</div>
</div>


|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>Listas de enlaces en lectores de pantalla (NVDA: Insert+F7)</li>
<li> '''Bookmarklet ''':
<li>AXE DevTools</li>
[https://a11y-tools.com/bookmarklets/#listlinks List links]
<li>Accessibility Insights</li>
</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>
</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»