Diferencia entre revisiones de «Principio 3/3.2 Predecible/3.2.4-A»
De WCAG Wiki
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 | 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/ | <ul> | ||
<li><span lang="en">[https://www.w3.org/WAI/ | <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><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> | ||
</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> | <li><span class="paso-badge">Paso 1.</span> | ||
<li><span class="paso-badge">Paso 2.</span | Localizar los elementos que se repiten en una misma página o en diferentes páginas de un sitio web. | ||
</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"> | ||
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> | ||
|wcag_otras_herramientas_evaluacion= | |wcag_otras_herramientas_evaluacion= | ||
<ul> | <ul> | ||
<li>Revisión | <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> | <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> | <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> | <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
- Nivel: AA
- Versión: 2.0
- Principio: 3_Comprensible
- Pauta: 3.2_Predecible
- Grupo: Consistencia
- Subgrupo: Identificacion
Discapacidades afectadas
Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.
-
Cognitiva –
Barrera moderada
-
Baja visión –
Barrera leve
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
- Paso 1. Localizar los elementos que se repiten en una misma página o en diferentes páginas de un sitio web.
- 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 ilustrativo
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
<!DOCTYPE html>
⚠️ PROBLEMA 3.3.2-C: Este formulario NO tiene etiquetas ni instrucciones claras
Reserva de Hotel
⚠️ Problemas de este formulario:
- No hay etiquetas
<label>para ningún campo - Algunos placeholders son ambiguos ("Código" - ¿qué código?)
- No se indica qué campos son obligatorios
- No hay instrucciones sobre el formato esperado
- El select dice "Selecciona" pero ¿seleccionar qué?
- Un campo no tiene ni placeholder ni etiqueta (campo de email)
- No hay indicación de formato de fecha específico
- No se explica para qué sirve cada campo
<!DOCTYPE html>
✅ ACCESIBLE 3.3.2-C: Este formulario tiene etiquetas e instrucciones claras
Reserva de Hotel
Complete el siguiente formulario para reservar su estadía
Nota: Los campos marcados con * son obligatorios
✅ Implementación correcta:
- Cada campo tiene una etiqueta
<label>clara asociada - Los campos obligatorios están claramente marcados con *
- Hay instrucciones específicas sobre formato y contenido esperado
- Los selectores tienen opciones descriptivas, no ambiguas
- Se explica el propósito de cada campo cuando no es obvio
- Se proporcionan ejemplos en los placeholders
- Hay una nota inicial explicando la convención de campos obligatorios
- Se usan atributos ARIA apropiados (aria-required, aria-describedby)
Comentarios
A continuación se muestran comentarios sobre el criterio 3.2.4-A. Identificación coherente
Loading comments...
