Diferencia entre revisiones de «Principio 2/2.5 Modalidades de los input/2.5.3-A»
De WCAG Wiki
Página creada con «== '''2.5.3-A. Etiqueta en nombre''' == <!-- Análisis interno: Este criterio impacta principalmente a: Personas con discapacidad visual y cognitiva Problema grave: Sin texto accesible coincidente con la etiqueta visual, los usuarios que usan lectores de pantalla no pueden identificar componentes, generando barreras graves de comprensión y uso. --> <html> <!-- criterio 2.5.3-A --> <article class="wcag-card"> <section class="wcag-info"> <ul> <l…» |
Sin resumen de edición |
||
| Línea 1: | Línea 1: | ||
== | {{CriterioWCAG | ||
|id_wcag_criterio=2.5.3 | |||
|id_wcag_subcriterio=2.5.3-A | |||
|wcag_titulo_criterio=2.5.3-A. Etiqueta en nombre | |||
|wcag_nivel=A | |||
|wcag_version=2.1 | |||
|wcag_principio=2_Operable | |||
|wcag_principio_url=Principio_2 | |||
< | |wcag_pauta=2.5_Modalidades_de_entrada | ||
|wcag_pauta_url=Principio_2/2.5_Modalidades_de_entrada | |||
|wcag_grupo=Interacción | |||
|wcag_subgrupo=Etiquetas_y_nombre_accesible | |||
|wcag_subcriterio_url=Principio_2/2.5_Modalidades_de_entrada/2.5.3-A | |||
|wcag_discapacidades= | |||
<li class="discapacidad-item"> | |||
[[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]] | |||
<span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> – | |||
<span class="gravedad gravedad-grave">Barrera grave</span> | |||
</li> | |||
<li class="discapacidad-item"> | |||
[[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]] | |||
<span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> – | |||
<span class="gravedad gravedad-moderada">Barrera moderada</span> | |||
</li> | |||
</ | |wcag_lista_discapacidades= | ||
</ | [[Categoría:Discapacidad visual total]] | ||
[[Categoría:Discapacidad cognitiva]] | |||
|wcag_texto_criterioOAW= | |||
Para los componentes de interfaz de usuario, el texto visible que actúa como etiqueta debe coincidir con el nombre accesible o estar incluido dentro de él. | |||
|wcag_descripcion_resumida= | |||
El texto visible en botones, enlaces, campos o iconos debe también aparecer en su nombre accesible, de manera que lectores de pantalla, asistentes de voz y otras ayudas técnicas reconozcan el mismo texto. | |||
|wcag_objetivo= | |||
Garantizar que el texto que ven los usuarios y el texto que leen o usan las tecnologías de apoyo coincidan para permitir un reconocimiento claro y una activación fiable mediante voz y lectores de pantalla. | |||
|wcag_importancia= | |||
Si el nombre accesible y el texto visible son diferentes, las personas que utilizan control por voz, lectores de pantalla o que dependen de pistas textuales pueden no localizar o activar correctamente la función. | |||
|wcag_referencias= | |||
<ul> | |||
<li>Understanding Success Criterion 2.5.3: Label in Name (W3C)</li> | |||
<li>WCAG Quick Reference – 2.5.3</li> | |||
<li>ARIA Authoring Practices</li> | |||
</ul> | |||
|wcag_recursos= | |||
<ul> | |||
<li>Controles accesibles con texto visible</li> | |||
<li>Buenas prácticas ARIA: <code>aria-labelledby</code> y <code>aria-label</code></li> | |||
</ul> | |||
|wcag_tipo_evaluacion=Semiautomática | |||
|wcag_pasos_evaluacion= | |||
<ol class="paso-list"> | |||
<li>Identificar controles con texto visible.</li> | |||
<li>Inspeccionar el nombre accesible en herramientas de accesibilidad.</li> | |||
<li>Confirmar que el texto visible está incluido en el nombre accesible.</li> | |||
<li>Verificar etiquetas asociadas con <code>label</code>, <code>aria-labelledby</code> o <code>aria-label</code>.</li> | |||
<li>Probar activación con control por voz y lector de pantalla.</li> | |||
</ol> | |||
|wcag_resultado_evaluacion= | |||
Los controles se pueden identificar y activar mediante el mismo texto visible que se muestra en la interfaz. | |||
|wcag_ejemplo_evaluacion= | |||
<div class="accessibility-card"> | |||
<strong>✅ Accesible: texto visible coincide con nombre accesible</strong> | |||
<pre class="wcag-codigo-html"> | |||
<button>Buscar</button> | |||
</pre> | |||
</div> | |||
<div class="accessibility-card"> | |||
<strong>✅ Accesible: icono con nombre accesible equivalente al texto esperado</strong> | |||
<pre class="wcag-codigo-html"> | |||
<button aria-label="Buscar"> | |||
<svg aria-hidden="true"></svg> | |||
</button> | |||
</pre> | |||
</div> | |||
|wcag_otras_herramientas_evaluacion= | |||
<ul> | |||
<li>Panel Accesibilidad en DevTools</li> | |||
<li>Pruebas con control por voz (VoiceControl, Dragon)</li> | |||
<li>NVDA / JAWS / VoiceOver</li> | |||
</ul> | |||
}} | |||
Revisión del 12:06 5 nov 2025
2.5.3-A. Etiqueta en nombre
- Nivel: A
- Versión: 2.1
- Principio: 2_Operable
- Pauta: 2.5_Modalidades_de_entrada
- Grupo: Interacción
- Subgrupo: Etiquetas_y_nombre_accesible
Discapacidades afectadas
Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.
-
Visual total –
Barrera grave
-
Cognitiva –
Barrera moderada
Enunciado del criterio (Observatorio de Accesibilidad Web)
- Para los componentes de interfaz de usuario, el texto visible que actúa como etiqueta debe coincidir con el nombre accesible o estar incluido dentro de él.
Comprensión del criterio
Descripción resumida
El texto visible en botones, enlaces, campos o iconos debe también aparecer en su nombre accesible, de manera que lectores de pantalla, asistentes de voz y otras ayudas técnicas reconozcan el mismo texto.
Objetivo
Garantizar que el texto que ven los usuarios y el texto que leen o usan las tecnologías de apoyo coincidan para permitir un reconocimiento claro y una activación fiable mediante voz y lectores de pantalla.
Importancia de cumplir el criterio
Si el nombre accesible y el texto visible son diferentes, las personas que utilizan control por voz, lectores de pantalla o que dependen de pistas textuales pueden no localizar o activar correctamente la función.
Referencias WCAG
- Understanding Success Criterion 2.5.3: Label in Name (W3C)
- WCAG Quick Reference – 2.5.3
- ARIA Authoring Practices
Recursos de apoyo
- Controles accesibles con texto visible
- Buenas prácticas ARIA:
aria-labelledbyyaria-label
Evaluación del criterio
Tipo de evaluación
Evaluación Semiautomática
Procedimiento de evaluación
- Identificar controles con texto visible.
- Inspeccionar el nombre accesible en herramientas de accesibilidad.
- Confirmar que el texto visible está incluido en el nombre accesible.
- Verificar etiquetas asociadas con
label,aria-labelledbyoaria-label. - Probar activación con control por voz y lector de pantalla.
Resultado esperado
Los controles se pueden identificar y activar mediante el mismo texto visible que se muestra en la interfaz.
Ejemplo ilustrativo
✅ Accesible: texto visible coincide con nombre accesible
<button>Buscar</button>
✅ Accesible: icono con nombre accesible equivalente al texto esperado
<button aria-label="Buscar"> <svg aria-hidden="true"></svg> </button>
Otras herramientas de evaluación
- Panel Accesibilidad en DevTools
- Pruebas con control por voz (VoiceControl, Dragon)
- NVDA / JAWS / VoiceOver
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 2.5.3-A. Etiqueta en nombre
Loading comments...
