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

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
Línea 30: Línea 30:


|wcag_texto_criterioOAW=
|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.
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 consistente.


|wcag_descripcion_resumida=
|wcag_descripcion_resumida=
Línea 43: Línea 43:
|wcag_referencias=
|wcag_referencias=
<ul>
<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>
<ul>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/quickref/#consistent-identification WCAG Quick Reference – 3.2.4]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G197 G197: Using labels, names, and text alternatives consistently for content that has the same functionality]</span></li>
<li>[https://webaim.org/articles/contrast/#consistency WebAIM — Consistency and usability]</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/failures/F31 F31: Failure due to using two different labels for the same function on different Web pages within a set of Web pages]</span></li>
</ul>
</ul>


|wcag_recursos=
|wcag_recursos=
<ul>
<ul>
<li>Design systems accesibles (nomenclatura, iconografía y patrones)</li>
<li>Design systems accesibles (nomenclatura, iconografía y patrones)</li>
<li>Patrones semánticos y ARIA coherentes en formularios y navegación</li>
</ul>
</ul>


Línea 58: Línea 58:
|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
<ol class="paso-list">
<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 1.</span>
<li><span class="paso-badge">Paso 2.</span> Comparar nombres visibles, iconos y etiquetas entre páginas con la misma funcionalidad.</li>
Localizar los elementos que se repiten en una misma página o en diferentes páginas de un sitio web.
<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>
<li><span class="paso-badge">Paso 4.</span> Confirmar coherencia en navegación por teclado y con lectores de pantalla.</li>
 
<li><span class="paso-badge">Paso 2.</span>
Verificar que siempre se identifican de manera consistente.
</li>
</ol>
</ol>


|wcag_resultado_evaluacion=
|wcag_resultado_evaluacion=
Línea 69: Línea 73:
|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
<div class="accessibility-card">
<strong>✅ Accesible: misma etiqueta y función en todo el sitio</strong>
Se presenta la misma etiqueta y función en todo el sitio
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<!-- Todas las páginas -->
<!-- Todas las páginas -->
Línea 76: Línea 80:
</div>
</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=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>Revisión integral entre páginas</li>
<li>'''Revisión visual''': comprobar que los elementos que realizan la misma función (botones, enlaces, iconos, controles) usan nombres, textos, estilos e iconografía consistentes en todo el sitio.</li>
<li>DevTools → panel de accesibilidad (nombre computado)</li>
<li>'''Inspección del texto y ARIA''': verificar que el texto visible y las etiquetas accesibles (<code>aria-label</code>, <code>aria-labelledby</code>) son coherentes para elementos con la misma función.</li>
<li>NVDA, JAWS, VoiceOver</li>
<li>'''Comparación entre páginas''': navegar por diferentes secciones del sitio y confirmar que los componentes equivalentes mantienen su nombre y presentación (p. ej., “Buscar”, siempre “Buscar”; no “Buscar”/“Explorar”/“Encontrar”).</li>
<li>Guía de estilo / design system del proyecto</li>
<li>'''Prueba con lectores de pantalla''': (NVDA, JAWS, VoiceOver) comprobar que los controles equivalentes se anuncian de forma consistente en todas las páginas.</li>
</ul>
</ul>
}}
}}

Revisión actual - 06:25 6 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 consistente.

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)

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Paso 1. Localizar los elementos que se repiten en una misma página o en diferentes páginas de un sitio web.
  2. Paso 2. Verificar que siempre se identifican de manera consistente.

Resultado esperado

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

Ejemplo

Se presenta la misma etiqueta y función en todo el sitio 

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

Otras herramientas de evaluación

  • Revisión visual: comprobar que los elementos que realizan la misma función (botones, enlaces, iconos, controles) usan nombres, textos, estilos e iconografía consistentes en todo el sitio.
  • Inspección del texto y ARIA: verificar que el texto visible y las etiquetas accesibles (aria-label, aria-labelledby) son coherentes para elementos con la misma función.
  • Comparación entre páginas: navegar por diferentes secciones del sitio y confirmar que los componentes equivalentes mantienen su nombre y presentación (p. ej., “Buscar”, siempre “Buscar”; no “Buscar”/“Explorar”/“Encontrar”).
  • Prueba con lectores de pantalla: (NVDA, JAWS, VoiceOver) comprobar que los controles equivalentes se anuncian de forma consistente en todas las páginas.










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=3555»