Diferencia entre revisiones de «Principio 3/3.2 Predecible/3.2.4-A»

De WCAG Wiki
← Edición anteriorEdición siguiente →
VisualWikitexto
Sin resumen de edición
Línea 1: Línea 1:
== '''3.2.4-A. Identificación coherente''' ==
{{CriterioWCAG
<!-- 
|id_wcag_criterio=3.2.4
  Análisis interno:
|id_wcag_subcriterio=3.2.4-A
  Este criterio afecta principalmente a: Personas con discapacidad cognitiva y visual.
|wcag_titulo_criterio=3.2.4-A. Identificación coherente
  Problema moderado: Si los componentes o iconos cambian de nombre o aspecto, los usuarios no pueden identificar su función correctamente.
|wcag_nivel=AA
  Gravedad: Barrera moderada, al generar confusión y pérdida de confianza.
|wcag_version=2.0
-->
|wcag_principio=3_Comprensible
<html>
|wcag_principio_url=Principio_3
<!-- criterio 3.2.4-A -->
|wcag_pauta=3.2_Predecible
<article class="wcag-card">
|wcag_pauta_url=Principio_3/3.2_Predecible
   <section class="wcag-info">
|wcag_grupo=Consistencia
    <ul>
|wcag_subgrupo=Identificacion
      <li><span class="label">Nivel:</span><span class="value">AA</span></li>
|wcag_subcriterio_url=Principio_3/3.2_Predecible/3.2.4-A
      <li><span class="label">Versión:</span><span class="value">2.2</span></li>
 
      <li><span class="label">Principio:</span><span class="value">3. Comprensible</span></li>
|wcag_discapacidades=
      <li><span class="label">Pauta:</span><span class="value">3.2 El sistema debe ser operable y previsible en diferentes formas</span></li>
<li class="discapacidad-item">
      <li><span class="label">Categoría:</span><span class="value">Diseño estructural</span></li>
   [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]]
      <li><span class="label">Subcategoría:</span><span class="value">Identificación coherente</span></li>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> –
    </ul>
  <span class="gravedad gravedad-moderada">Barrera moderada</span>
  </section>
</li>
  <section class="wcag-users">
<li class="discapacidad-item">
    <p>Usuarios más afectados</p>
  [[Archivo:Bajavision.png|20px|class=icon-discapacidad|alt=Baja visión]]
    <ul>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad baja visión|Baja visión]]</span> –
      <li><img src="/images/4/40/Cognitiva.png" alt="Icono discapacidad cognitiva" class="icono-discapacidad" /> Personas con discapacidad cognitiva – <span class="gravedad">Barrera moderada</span></li>
  <span class="gravedad gravedad-leve">Barrera leve</span>
      <li><img src="/images/b/b7/Bajavision.png" alt="Icono baja visión" class="icono-discapacidad" /> Personas con baja visión – <span class="gravedad">Barrera leve</span></li>
</li>
    </ul>
 
  </section>
|wcag_lista_discapacidades=
</article>
[[Categoría:Discapacidad cognitiva]]
</html>
[[Categoría:Discapacidad baja visión]]
 
|wcag_texto_criterioOAW=
Los elementos con una misma funcionalidad y que se repiten a través de las páginas de un sitio web se deben identificar de forma coherente.
 
|wcag_descripcion_resumida=
Componentes que tienen la misma función deben usar nombres, iconos y etiquetas consistentes en todas las páginas del sitio web.
 
|wcag_objetivo=
Identificar de forma consistente funcionalidades que se repiten en un conjunto de páginas web, facilitando comprensión, reconocimiento y predictibilidad.
 
|wcag_importancia=
Si los elementos que realizan la misma acción se etiquetan o representan de manera diferente en distintas páginas, las personas con dificultades cognitivas, quienes usan lectores de pantalla o dependen de reconocimiento visual pueden confundirse y perder eficiencia.
 
|wcag_referencias=
<ul>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/consistent-identification.html Understanding Success Criterion 3.2.4: Consistent Identification]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/quickref/#consistent-identification WCAG Quick Reference – 3.2.4]</span></li>
<li>[https://webaim.org/articles/contrast/#consistency WebAIM — Consistency and usability]</li>
</ul>
 
|wcag_recursos=
<ul>
<li>Design systems accesibles (nomenclatura, iconografía y patrones)</li>
<li>Patrones semánticos y ARIA coherentes en formularios y navegación</li>
</ul>
 
|wcag_tipo_evaluacion=Manual
 
|wcag_pasos_evaluacion=
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Identificar elementos repetidos (botones, iconos, enlaces, menús, formularios) a lo largo del sitio.</li>
<li><span class="paso-badge">Paso 2.</span> Comparar nombres visibles, iconos y etiquetas entre páginas con la misma funcionalidad.</li>
<li><span class="paso-badge">Paso 3.</span> Verificar consistencia del nombre accesible (p. ej., <code>aria-label</code>, <code>aria-labelledby</code>) y del rol.</li>
<li><span class="paso-badge">Paso 4.</span> Confirmar coherencia en navegación por teclado y con lectores de pantalla.</li>
</ol>
 
|wcag_resultado_evaluacion=
Los elementos que cumplen la misma función mantienen identificación coherente (texto, icono y nombre accesible) en todo el sitio.
 
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
<strong>✅ Accesible: misma etiqueta y función en todo el sitio</strong>
<pre class="wcag-codigo-html">
<!-- Todas las páginas -->
<button aria-label="Buscar">Buscar</button>
</pre>
</div>
 
<div class="accessibility-card">
<strong>✅ Alternativa accesible: icono con nombre accesible coherente</strong>
<pre class="wcag-codigo-html">
<!-- Icono de lupa; el nombre accesible mantiene la identificación -->
<button aria-label="Buscar">
  <svg aria-hidden="true" focusable="false">…</svg>
</button>
</pre>
</div>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<li>Revisión integral entre páginas</li>
<li>DevTools → panel de accesibilidad (nombre computado)</li>
<li>NVDA, JAWS, VoiceOver</li>
<li>Guía de estilo / design system del proyecto</li>
</ul>
}}

Revisión del 12:50 5 nov 2025

3.2.4-A. Identificación coherente

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 elementos con una misma funcionalidad y que se repiten a través de las páginas de un sitio web se deben identificar de forma coherente.

Comprensión del criterio

Descripción resumida

Componentes que tienen la misma función deben usar nombres, iconos y etiquetas consistentes en todas las páginas del sitio web.

Objetivo

Identificar de forma consistente funcionalidades que se repiten en un conjunto de páginas web, facilitando comprensión, reconocimiento y predictibilidad.

Importancia de cumplir el criterio

Si los elementos que realizan la misma acción se etiquetan o representan de manera diferente en distintas páginas, las personas con dificultades cognitivas, quienes usan lectores de pantalla o dependen de reconocimiento visual pueden confundirse y perder eficiencia.

Referencias WCAG

Recursos de apoyo

  • Design systems accesibles (nomenclatura, iconografía y patrones)
  • Patrones semánticos y ARIA coherentes en formularios y navegación

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Paso 1. Identificar elementos repetidos (botones, iconos, enlaces, menús, formularios) a lo largo del sitio.
  2. Paso 2. Comparar nombres visibles, iconos y etiquetas entre páginas con la misma funcionalidad.
  3. Paso 3. Verificar consistencia del nombre accesible (p. ej., aria-label, aria-labelledby) y del rol.
  4. Paso 4. Confirmar coherencia en navegación por teclado y con lectores de pantalla.

Resultado esperado

Los elementos que cumplen la misma función mantienen identificación coherente (texto, icono y nombre accesible) en todo el sitio.

Ejemplo

✅ Accesible: misma etiqueta y función en todo el sitio 

<!-- Todas las páginas -->
<button aria-label="Buscar">Buscar</button>

✅ Alternativa accesible: icono con nombre accesible coherente 

<!-- Icono de lupa; el nombre accesible mantiene la identificación -->
<button aria-label="Buscar">
  <svg aria-hidden="true" focusable="false">…</svg>
</button>

Otras herramientas de evaluación

  • Revisión integral entre páginas
  • DevTools → panel de accesibilidad (nombre computado)
  • NVDA, JAWS, VoiceOver
  • Guía de estilo / design system del proyecto










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 3.2.4-A. Identificación coherente

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_3/3.2_Predecible/3.2.4-A&oldid=3487»