1.3.6 Identificar el propósito

Criterio de éxito oficial

¿Qué es identificar el propósito?

Mientras que 1.3.5 se centra en los campos de formulario que recopilan datos del usuario, 1.3.6 amplía el alcance a toda la interfaz: componentes interactivos, iconos y regiones de la página deben tener un propósito determinable programáticamente. Esto permite que el software —navegadores, extensiones, tecnologías de apoyo— adapte la presentación para personas con discapacidades cognitivas o del lenguaje.

Comparativa: 1.3.1, 4.1.2 y 1.3.6

Los tres criterios trabajan en capas complementarias para hacer la interfaz completamente interpretable por software:

¿Por qué importa?

Cuando el propósito de los elementos de la interfaz puede determinarse programáticamente, el software puede personalizar la presentación para cada usuario. El flujo es:

¿Quién se ve afectado?

Cómo implementarlo

1. HTML semántico para regiones

Usa los elementos de landmark HTML5. Son la base y cubren la mayoría de los casos:

<header>
  <nav aria-label="Principal">...</nav>
</header>

<main id="main-content">
  <article>...</article>
  <aside aria-label="Artículos relacionados">...</aside>
</main>

<footer>...</footer>

<!-- Región de búsqueda -->
<search aria-label="Buscar en el sitio">
  <form role="search">...</form>
</search>

2. Iconos con nombre accesible

Los iconos informativos o interactivos deben tener nombre accesible. Los decorativos deben ocultarse:

<button>💾</button>
<button>✏️</button>

<button aria-label="Guardar">
  💾
</button>

<button>
  <span aria-hidden="true">✏️</span>
  <span class="visually-hidden">Editar</span>
</button>

3. Componentes con propósito explícito

Usa role de ARIA cuando el elemento HTML no expresa el propósito por sí solo:

<!-- Navegación de migas de pan -->
<nav aria-label="Ruta de navegación">
  <ol role="list">
    <li><a href="/es/">Inicio</a></li>
    <li><a href="/es/servicios/">Servicios</a></li>
    <li aria-current="page">Auditoría</li>
  </ol>
</nav>

<!-- Widget de valoración -->
<div role="radiogroup" aria-labelledby="rating-label">
  <span id="rating-label">Valoración</span>
  <button role="radio" aria-checked="false" aria-label="1 estrella">★</button>
  <button role="radio" aria-checked="true"  aria-label="2 estrellas">★</button>
</div>

<!-- Menú de usuario -->
<button aria-haspopup="menu" aria-expanded="false" aria-controls="user-menu">
  Mi cuenta
</button>
<ul id="user-menu" role="menu" hidden>
  <li role="menuitem"><a href="/perfil">Perfil</a></li>
  <li role="menuitem"><a href="/salir">Cerrar sesión</a></li>
</ul>

Ejemplos prácticos

<div role="toolbar" aria-label="Formato de texto">
  <button aria-label="Negrita" aria-pressed="false"><b>B</b></button>
  <button aria-label="Cursiva" aria-pressed="true"><i>I</i></button>
  <button aria-label="Insertar enlace">🔗</button>
</div>

<header>
  <nav aria-label="Principal">...</nav>
</header>
<main>
  <nav aria-label="Índice del artículo">...</nav>
  <article>...</article>
  <section aria-label="Comentarios">...</section>
</main>
<aside aria-label="Artículos relacionados">...</aside>
<footer>...</footer>

<svg role="img" aria-labelledby="chart-title chart-desc">
  <title id="chart-title">Adopción de WCAG 2.2 por sector</title>
  <desc id="chart-desc">
    Gráfico de barras: sector público 68 %, privado 42 %, educación 55 %
  </desc>
  <!-- paths del gráfico -->
</svg>

Técnicas WCAG

Errores comunes

<button><i class="icon-trash"></i></button>
<button>❌</button>

<button aria-label="Eliminar">
  <i class="icon-trash" aria-hidden="true"></i>
</button>

<nav>...menú principal...</nav>
<nav>...paginación...</nav>
<nav>...pie de página...</nav>

<nav aria-label="Principal">...</nav>
<nav aria-label="Paginación">...</nav>
<nav aria-label="Pie de página">...</nav>

<div class="header">...</div>
<div class="nav">...</div>
<div class="main">...</div>

<header>...</header>
<nav aria-label="Principal">...</nav>
<main>...</main>

Criterios relacionados