Documentación de UXR SEO Analyzer

Introducción

Propósito del Enlace

6 min de lectura
Ver contenido

Introducción

El propósito del enlace describe hacia dónde lleva un enlace y qué sucede cuando los usuarios hacen clic en él. WCAG 2.4.4 (Propósito del Enlace - En Contexto) requiere que el propósito del enlace pueda determinarse a partir del texto del enlace mismo o del contexto circundante. Este es un requisito de Nivel A, lo que lo hace fundamental para la accesibilidad web.

Para los usuarios de lectores de pantalla que navegan por enlaces, texto vago como “haga clic aquí” o “leer más” no proporciona información útil. Cuando todos los enlaces dicen lo mismo, los usuarios no pueden distinguir entre ellos sin navegar de vuelta al contenido circundante.

¿Qué Es el Propósito del Enlace?

El Concepto Básico

El propósito del enlace significa que el destino o la acción que realiza un enlace es claro para los usuarios:

<!-- Bien: Propósito claro desde el texto del enlace -->
<a href="/precios">Ver nuestros planes de precios</a>

<!-- Mal: Propósito poco claro sin contexto -->
<a href="/precios">Haga clic aquí</a>

Cuando los enlaces son claros, los usuarios pueden:

  • Escanear rápidamente las opciones de navegación disponibles
  • Decidir si seguir un enlace
  • Navegar eficientemente usando tecnología asistiva
  • Entender enlaces fuera de contexto (en listas de enlaces)

Quién Se Beneficia

Tipo de Usuario Beneficio
Usuarios de lectores de pantalla Pueden navegar por enlaces y entender destinos
Discapacidades cognitivas Navegación más clara reduce esfuerzo mental
Usuarios de teclado Pueden tomar decisiones informadas sobre navegación
Todos los usuarios Escaneo y toma de decisiones más rápidos

Requisitos WCAG

2.4.4 Propósito del Enlace (En Contexto) - Nivel A

El propósito de cada enlace puede determinarse a partir de:

  • El texto del enlace solo, O
  • El texto del enlace junto con su contexto de enlace determinado programáticamente

El contexto programático incluye:

  • Texto en la misma oración, párrafo o elemento de lista
  • Texto en la celda o encabezado de tabla padre
  • Texto en regiones etiquetadas con ARIA
<!-- Propósito desde el texto del enlace solo -->
<a href="/informe.pdf">Descargar Informe Anual 2024 (PDF)</a>

<!-- Propósito desde el contexto -->
<p>
  Aprende más sobre nuestros servicios en la
  <a href="/servicios">página de servicios</a>.
</p>

2.4.9 Propósito del Enlace (Solo Enlace) - Nivel AAA

Para accesibilidad mejorada, el propósito del enlace debe ser claro solo desde el texto del enlace:

<!-- Nivel AAA: Enlaces autodescriptivos -->
<a href="/contacto">Contactar a nuestro equipo de ventas</a>
<a href="/docs">Ver documentación de API</a>
<a href="/blog/tips-seo">Leer: 10 Tips SEO para 2024</a>

¿Por Qué Nivel A vs AAA?

Nivel A (2.4.4) acepta enlaces contextuales porque:

  • Muchos patrones de diseño dependen del contexto (tarjetas, tablas)
  • Requisitos estrictos de solo enlace pueden ser impracticables
  • El contexto sigue siendo accesible para tecnología asistiva

Nivel AAA (2.4.9) es más estricto porque:

  • Los enlaces autodescriptivos funcionan en cualquier contexto
  • Mejor para listas de enlaces y menús de navegación
  • Experiencia de usuario óptima para todos los usuarios

Problemas Comunes de Propósito del Enlace

1. Enlaces Genéricos de “Haga Clic Aquí”

<!-- MAL: Texto genérico, sin significado -->
<p>Para descargar el informe, <a href="/informe.pdf">haga clic aquí</a>.</p>

<!-- BIEN: Texto de enlace descriptivo -->
<p><a href="/informe.pdf">Descargar el informe anual (PDF, 2MB)</a></p>

2. Enlaces Ambiguos de “Leer Más”

<!-- MAL: Múltiples enlaces idénticos -->
<article>
  <h2>Producto A</h2>
  <p>Descripción...</p>
  <a href="/productos/a">Leer más</a>
</article>
<article>
  <h2>Producto B</h2>
  <p>Descripción...</p>
  <a href="/productos/b">Leer más</a>
</article>

<!-- BIEN: Enlaces únicos y descriptivos -->
<article>
  <h2>Producto A</h2>
  <p>Descripción...</p>
  <a href="/productos/a">Más información sobre Producto A</a>
</article>

3. URLs como Texto de Enlace

<!-- MAL: URL cruda como texto de enlace -->
<a href="https://example.com/ruta/a/pagina">https://example.com/ruta/a/pagina</a>

<!-- BIEN: Texto descriptivo con URL mostrada -->
<a href="https://example.com/ruta/a/pagina">Visitar nuestra página de recursos</a>

4. Propósito del Enlace Faltante

<!-- MAL: Enlace sin texto -->
<a href="/buscar"><svg aria-hidden="true"><!-- icono --></svg></a>

<!-- BIEN: Etiqueta accesible proporcionada -->
<a href="/buscar" aria-label="Buscar">
  <svg aria-hidden="true"><!-- icono --></svg>
</a>

Cómo Escribir Buen Texto de Enlace

Mejores Prácticas

Hacer No Hacer
Describir el destino Usar “haga clic aquí” o “aquí”
Ser específico y único Usar texto idéntico para enlaces diferentes
Incluir formato de archivo si aplica Dejar a los usuarios adivinando sobre descargas
Poner palabras importantes al inicio Enterrar el significado al final
Mantener enlaces concisos pero claros Escribir párrafos enteros como enlaces

Patrones de Texto de Enlace

Enlaces de Navegación:

<nav>
  <a href="/">Inicio</a>
  <a href="/nosotros">Sobre Nosotros</a>
  <a href="/servicios">Nuestros Servicios</a>
  <a href="/contacto">Contacto</a>
</nav>

Enlaces de Acción:

<a href="/suscribir">Suscribirse al boletín</a>
<a href="/demo">Solicitar una demostración</a>
<a href="/descargar">Descargar prueba gratuita</a>

Enlaces a Documentos:

<a href="/informe-anual-2024.pdf">
  Informe Anual 2024 (PDF, 2.5MB)
</a>

Enlaces Externos:

<a href="https://example.org" rel="external">
  Visitar Example Organization (abre sitio externo)
</a>

Usando aria-label para Contexto

Cuando el diseño visual requiere texto corto de enlace, usa aria-label para lectores de pantalla:

<!-- Diseño de tarjeta con "Leer más" visible -->
<article>
  <h3>Entendiendo la Accesibilidad</h3>
  <p>La accesibilidad asegura que todos puedan usar tu sitio web...</p>
  <a href="/blog/accesibilidad" aria-label="Leer más sobre Entendiendo la Accesibilidad">
    Leer más
  </a>
</article>

Importante: aria-label reemplaza completamente el texto visible del enlace para lectores de pantalla, por lo que debe ser completo y descriptivo.

Probando Propósito del Enlace

Prueba Manual Rápida

  1. Listar todos los enlaces en la página
  2. Leer cada texto de enlace de forma aislada
  3. ¿Puedes determinar a dónde lleva cada enlace?
  4. ¿Hay enlaces ambiguos o idénticos?

Qué Verificar

  • [ ] Cada enlace tiene texto descriptivo o nombre accesible
  • [ ] No hay enlaces de “haga clic aquí” o “aquí”
  • [ ] Los enlaces de “Leer más” tienen etiquetas accesibles únicas
  • [ ] Los enlaces solo con icono tienen aria-label o texto oculto visualmente
  • [ ] El propósito del enlace es claro desde el texto o contexto inmediato

Herramientas para Pruebas

  • Lector de pantalla - Navegar solo por enlaces
  • axe DevTools - Detecta enlaces vacíos o genéricos
  • WAVE - Resalta problemas de texto de enlace
  • Teclado - Navegar con Tab por enlaces y verificar propósito

Implementación

Cálculo del Nombre Accesible para Enlaces

Cómo los Enlaces Obtienen Sus Nombres

El nombre accesible para un enlace se calcula en este orden de prioridad:

  1. aria-labelledby - Referencia otros elementos
  2. aria-label - Etiqueta de cadena directa
  3. Contenido de texto del enlace - Texto visible y alt de imágenes
  4. Atributo title - Último recurso (no recomendado)
<!-- Prioridad 1: aria-labelledby -->
<span id="product-name">Producto A</span>
<a href="/productos/a" aria-labelledby="product-name learn-more-1">
  <span id="learn-more-1">Más información</span>
</a>
<!-- Nombre accesible: "Producto A Más información" -->

<!-- Prioridad 2: aria-label -->
<a href="/productos/a" aria-label="Más información sobre Producto A">
  Más información
</a>
<!-- Nombre accesible: "Más información sobre Producto A" -->

<!-- Prioridad 3: Contenido de texto del enlace -->
<a href="/productos/a">Ver detalles del Producto A</a>
<!-- Nombre accesible: "Ver detalles del Producto A" -->

Mejor Práctica: Usar Texto Visible Cuando Sea Posible

<!-- MEJOR: El texto visible es descriptivo -->
<a href="/precios">Ver nuestros planes de precios</a>

<!-- ACEPTABLE: aria-label complementa texto visible corto -->
<a href="/precios" aria-label="Ver planes de precios">
  Precios
</a>

<!-- EVITAR: atributo title para nombre accesible -->
<a href="/precios" title="Ver planes de precios">
  Precios
</a>

Patrones de Enlaces de Texto

Enlaces Autodescriptivos (Nivel AAA)

<!-- Enlaces de navegación -->
<nav aria-label="Navegación principal">
  <a href="/">Inicio</a>
  <a href="/nosotros">Sobre nuestra empresa</a>
  <a href="/servicios">Nuestros servicios</a>
  <a href="/portafolio">Ver nuestro portafolio</a>
  <a href="/contacto">Contáctanos</a>
</nav>

<!-- Enlaces de acción -->
<a href="/registro">Crear tu cuenta gratuita</a>
<a href="/demo">Solicitar una demostración del producto</a>
<a href="/suscribir">Suscribirse a nuestro boletín</a>

<!-- Enlaces de contenido -->
<a href="/blog/guia-accesibilidad">
  Leer: La Guía Completa de Accesibilidad Web
</a>

Enlaces Contextuales (Nivel A)

Cuando el contexto aclara el propósito, texto de enlace más simple es aceptable:

<!-- Contexto de párrafo -->
<p>
  Ofrecemos tres niveles de servicio para satisfacer tus necesidades. Visita nuestra
  <a href="/precios">página de precios</a>
  para comparar opciones.
</p>

<!-- Contexto de lista -->
<ul>
  <li>
    <strong>Auditoría de Accesibilidad</strong> - Revisión completa de tu sitio.
    <a href="/servicios/auditoria">Más información</a>
  </li>
  <li>
    <strong>Investigación UX</strong> - Pruebas de usuario y análisis.
    <a href="/servicios/investigacion">Más información</a>
  </li>
</ul>

Nota: Aunque los enlaces contextuales pasan Nivel A, hacer todos los enlaces autodescriptivos (Nivel AAA) proporciona una mejor experiencia de usuario.

Patrones de Enlaces Solo con Icono

Enlace de Icono Básico

<!-- Usando aria-label -->
<a href="/buscar" class="icon-link" aria-label="Buscar">
  <svg aria-hidden="true" viewBox="0 0 24 24">
    <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5z"/>
  </svg>
</a>

<!-- Usando texto oculto visualmente -->
<a href="/buscar" class="icon-link">
  <span class="visually-hidden">Buscar</span>
  <svg aria-hidden="true" viewBox="0 0 24 24">
    <path d="..."/>
  </svg>
</a>

<style>
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
</style>

Enlaces de Redes Sociales

<nav aria-label="Redes sociales">
  <a href="https://twitter.com/empresa" aria-label="Síguenos en Twitter">
    <svg aria-hidden="true"><!-- icono de Twitter --></svg>
  </a>
  <a href="https://linkedin.com/company/nombre" aria-label="Conecta en LinkedIn">
    <svg aria-hidden="true"><!-- icono de LinkedIn --></svg>
  </a>
  <a href="https://github.com/empresa" aria-label="Ver nuestro GitHub">
    <svg aria-hidden="true"><!-- icono de GitHub --></svg>
  </a>
</nav>

Enlaces de Icono de Acción

<div class="actions">
  <a href="/editar/123" aria-label="Editar documento">
    <svg aria-hidden="true"><!-- icono de editar --></svg>
  </a>
  <a href="/eliminar/123" aria-label="Eliminar documento">
    <svg aria-hidden="true"><!-- icono de eliminar --></svg>
  </a>
  <a href="/descargar/123" aria-label="Descargar documento">
    <svg aria-hidden="true"><!-- icono de descargar --></svg>
  </a>
</div>

Patrones de Enlaces en Tarjetas

Tarjeta Completa como Enlace

<!-- Enlace de tarjeta simple -->
<a href="/blog/slug-articulo" class="card-link">
  <article class="card">
    <img src="/images/articulo.jpg" alt="">
    <h3>Entendiendo la Accesibilidad Web</h3>
    <p>Aprende los fundamentos de crear sitios web accesibles...</p>
  </article>
</a>

<style>
.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.card-link:hover .card {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.card-link:focus-visible {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}
</style>

Tarjeta con Múltiples Enlaces

<article class="card">
  <img src="/images/articulo.jpg" alt="">
  <h3>
    <a href="/blog/accesibilidad" class="card-title-link">
      Entendiendo la Accesibilidad Web
    </a>
  </h3>
  <p>Aprende los fundamentos de crear sitios web accesibles...</p>
  <div class="card-meta">
    <a href="/categoria/accesibilidad" class="category-link">
      Accesibilidad
    </a>
    <a href="/autor/maria-garcia" class="author-link">
      Por María García
    </a>
  </div>
</article>

<style>
/* Hacer que el enlace del título cubra toda la tarjeta para facilitar el clic */
.card {
  position: relative;
}

.card-title-link::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Elevar otros enlaces por encima de la superposición */
.category-link,
.author-link {
  position: relative;
  z-index: 1;
}
</style>

Patrón de “Leer Más” con Contexto

<!-- Usando aria-labelledby para contexto -->
<article class="card">
  <h3 id="article-1-title">10 Tips para Mejor Diseño UX</h3>
  <p>Mejora tus diseños con estos consejos prácticos...</p>
  <a href="/blog/tips-ux" aria-labelledby="article-1-title article-1-action">
    <span id="article-1-action">Leer artículo completo</span>
  </a>
</article>
<!-- Nombre accesible: "10 Tips para Mejor Diseño UX Leer artículo completo" -->

<!-- Usando aria-label para contexto -->
<article class="card">
  <h3>10 Tips para Mejor Diseño UX</h3>
  <p>Mejora tus diseños con estos consejos prácticos...</p>
  <a href="/blog/tips-ux" aria-label="Leer artículo completo: 10 Tips para Mejor Diseño UX">
    Leer más
  </a>
</article>

Patrones de Enlaces en Tablas

Enlaces en Celdas de Tabla

<table>
  <caption>Comparación de productos</caption>
  <thead>
    <tr>
      <th scope="col">Producto</th>
      <th scope="col">Precio</th>
      <th scope="col">Acciones</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" id="product-a">Widget Pro</th>
      <td>$99</td>
      <td>
        <a href="/productos/widget-pro" aria-labelledby="product-a view-1">
          <span id="view-1">Ver detalles</span>
        </a>
      </td>
    </tr>
    <tr>
      <th scope="row" id="product-b">Widget Basic</th>
      <td>$49</td>
      <td>
        <a href="/productos/widget-basic" aria-labelledby="product-b view-2">
          <span id="view-2">Ver detalles</span>
        </a>
      </td>
    </tr>
  </tbody>
</table>

Enlaces de Acción en Tablas

<td class="actions-cell">
  <a href="/editar/123" aria-label="Editar Widget Pro">Editar</a>
  <a href="/eliminar/123" aria-label="Eliminar Widget Pro">Eliminar</a>
</td>

Implementaciones en Frameworks

Componente React

// AccessibleLink.tsx
import React from 'react';

interface AccessibleLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
  href: string;
  /** Si es true, abre en nueva pestaña con seguridad adecuada */
  external?: boolean;
  /** Texto oculto visualmente para agregar para lectores de pantalla */
  srAppend?: string;
  children: React.ReactNode;
}

export function AccessibleLink({
  href,
  external = false,
  srAppend,
  children,
  ...props
}: AccessibleLinkProps) {
  const externalProps = external ? {
    target: '_blank',
    rel: 'noopener noreferrer',
  } : {};

  return (
    <a href={href} {...externalProps} {...props}>
      {children}
      {srAppend && (
        <span className="visually-hidden">{srAppend}</span>
      )}
      {external && (
        <span className="visually-hidden">(abre en nueva pestaña)</span>
      )}
    </a>
  );
}

// Uso
<AccessibleLink href="/precios">
  Ver precios
</AccessibleLink>

<AccessibleLink
  href="/blog/articulo"
  srAppend="sobre Accesibilidad Web"
>
  Leer más
</AccessibleLink>

<AccessibleLink href="https://example.org" external>
  Visitar Example.org
</AccessibleLink>

Componente Vue 3

<!-- AccessibleLink.vue -->
<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  href: string
  external?: boolean
  srAppend?: string
}

const props = withDefaults(defineProps<Props>(), {
  external: false
})

const linkProps = computed(() => {
  if (props.external) {
    return {
      target: '_blank',
      rel: 'noopener noreferrer'
    }
  }
  return {}
})
</script>

<template>
  <a :href="href" v-bind="linkProps">
    <slot />
    <span v-if="srAppend" class="visually-hidden">{{ srAppend }}</span>
    <span v-if="external" class="visually-hidden">(abre en nueva pestaña)</span>
  </a>
</template>

<style scoped>
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
</style>

Enlaces de Descarga y Documentos

Descargas de Archivos

<!-- Incluir tipo de archivo y tamaño -->
<a href="/archivos/informe-anual-2024.pdf">
  Descargar Informe Anual 2024 (PDF, 2.5MB)
</a>

<a href="/archivos/exportar-datos.xlsx">
  Descargar exportación de datos (Excel, 156KB)
</a>

<a href="/archivos/presentacion.pptx">
  Descargar diapositivas de presentación (PowerPoint, 5.2MB)
</a>

Enlaces Externos

<!-- Indicar destino externo -->
<a href="https://www.w3.org/WAI/" rel="external">
  W3C Web Accessibility Initiative
  <span class="visually-hidden">(enlace externo)</span>
</a>

<!-- O incluir en texto visible -->
<a href="https://www.w3.org/WAI/" rel="external">
  Visitar W3C Web Accessibility Initiative (sitio externo)
</a>

Enlaces de Nueva Pestaña

<!-- Siempre indicar comportamiento de nueva pestaña -->
<a href="/terminos" target="_blank" rel="noopener">
  Términos de Servicio
  <span class="visually-hidden">(abre en nueva pestaña)</span>
</a>

<!-- Indicación con icono con texto accesible -->
<a href="/privacidad" target="_blank" rel="noopener">
  Política de Privacidad
  <svg aria-hidden="true" class="external-icon"><!-- icono --></svg>
  <span class="visually-hidden">(abre en nueva pestaña)</span>
</a>

Probando Propósito del Enlace

Pruebas Automatizadas

// Test de Playwright para propósito del enlace
import { test, expect } from '@playwright/test';

test.describe('Cumplimiento de Propósito del Enlace', () => {
  test('sin texto de enlace genérico', async ({ page }) => {
    await page.goto('/');

    const genericPhrases = [
      'haga clic aquí',
      'aquí',
      'más',
      'leer más',
      'más información',
      'enlace',
      'esta página',
    ];

    const links = await page.locator('a').all();

    for (const link of links) {
      const text = await link.textContent();
      const ariaLabel = await link.getAttribute('aria-label');
      const accessibleName = ariaLabel || text?.trim().toLowerCase();

      // Verificar que el nombre accesible no es genérico
      for (const phrase of genericPhrases) {
        if (accessibleName === phrase) {
          const href = await link.getAttribute('href');
          throw new Error(
            `Texto de enlace genérico "${accessibleName}" encontrado para enlace a ${href}`
          );
        }
      }
    }
  });

  test('todos los enlaces tienen nombres accesibles', async ({ page }) => {
    await page.goto('/');

    const links = await page.locator('a').all();

    for (const link of links) {
      const text = await link.textContent();
      const ariaLabel = await link.getAttribute('aria-label');
      const ariaLabelledBy = await link.getAttribute('aria-labelledby');
      const title = await link.getAttribute('title');

      const hasAccessibleName =
        text?.trim() ||
        ariaLabel ||
        ariaLabelledBy ||
        title;

      if (!hasAccessibleName) {
        const href = await link.getAttribute('href');
        throw new Error(`Enlace a ${href} no tiene nombre accesible`);
      }
    }
  });
});

Checklist de Pruebas Manuales

  1. Navegación por Lista de Enlaces:

    • Usar lector de pantalla para listar todos los enlaces
    • Cada enlace debe tener sentido de forma aislada
    • Sin texto genérico duplicado

  2. Verificación de Contexto:

    • Para enlaces contextuales, verificar que el contexto está asociado programáticamente
    • Párrafo padre, elemento de lista o celda de tabla

  3. Verificación de Enlaces de Icono:

    • Navegar con Tab a cada enlace de icono
    • Verificar que el lector de pantalla anuncia el propósito
    • Indicador de foco visual presente

Errores Comunes y Soluciones

Error 1: Usar “Aquí” como Enlace

<!-- INCORRECTO -->
<p>Haga clic <a href="/registro">aquí</a> para registrarse.</p>

<!-- CORRECTO -->
<p><a href="/registro">Registrarse para una cuenta gratuita</a></p>

Error 2: “Leer Más” Duplicado

<!-- INCORRECTO -->
<a href="/articulo-1">Leer más</a>
<a href="/articulo-2">Leer más</a>

<!-- CORRECTO -->
<a href="/articulo-1" aria-label="Leer más sobre Título del Artículo 1">Leer más</a>
<a href="/articulo-2" aria-label="Leer más sobre Título del Artículo 2">Leer más</a>

Error 3: Enlace de Imagen Sin Alt

<!-- INCORRECTO -->
<a href="/inicio"><img src="logo.png"></a>

<!-- CORRECTO -->
<a href="/inicio"><img src="logo.png" alt="Nombre de Empresa - Ir a inicio"></a>

Checklist de Resumen

  • [ ] Todos los enlaces tienen nombres accesibles descriptivos
  • [ ] No hay “haga clic aquí,” “aquí,” o “leer más” sin contexto
  • [ ] Los enlaces solo con icono tienen aria-label o texto oculto visualmente
  • [ ] Los enlaces externos indican que abren en nuevo contexto
  • [ ] Las descargas de archivos incluyen formato y tamaño
  • [ ] Los patrones de tarjetas tienen estructura de enlaces accesible
  • [ ] Los enlaces de acción en tablas incluyen contexto de fila
  • [ ] Los textos de enlace duplicados tienen nombres accesibles únicos
  • [ ] Enlaces probados con navegación por lista de enlaces en lector de pantalla

Artículos Relacionados

Referencias

  1. W3C - WCAG 2.2 SC 2.4.4 Link Purpose (In Context)
  2. W3C - WCAG 2.2 SC 2.4.9 Link Purpose (Link Only)
  3. WebAIM - Links and Hypertext
  4. Deque University - Link Name Guidelines
  5. W3C - Technique H30: Providing link text
  6. W3C - Technique ARIA8: Using aria-label

Artículos relacionados

Hub de categoría

Hub

Hub de Cumplimiento WCAG 2.2

La accesibilidad web asegura que los sitios web y aplicaciones puedan ser utilizados por todos, incluyendo personas con discapacidades

Última actualización: