Diferencia entre revisiones de «Principio 2/2.5 Modalidades de los input/2.5.3-A»

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


|wcag_texto_criterioOAW=
|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.
En los componentes del interfaz de usuario (como los campos de formulario o botones) es necesario que el texto visible que actúa como su etiqueta y que sirve para reconocerlos visualmente también forme parte de su nombre accesible.


|wcag_descripcion_resumida=
|wcag_descripcion_resumida=
Línea 43: Línea 43:
|wcag_referencias=
|wcag_referencias=
<ul>
<ul>
<li>Understanding Success Criterion 2.5.3: Label in Name (W3C)</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/general/G208 G208: Including the text of the visible label as part of the accessible name]</span></li>
<li>WCAG Quick Reference – 2.5.3</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/general/G211 G211: Matching the accessible name to the visible label]</span></li>
<li>ARIA Authoring Practices</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G162 G162: Positioning labels to maximize predictability of relationships]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/failures/F96 F96: Failure due to the accessible name not containing the visible label text]</span></li>
</ul>
</ul>


|wcag_recursos=
|wcag_recursos=
<ul>
<ul>
<li>Controles accesibles con texto visible</li>
<li> [https://www.w3.org/WAI/tutorials/forms/labels/ labering controls (w3C)]
<li>Buenas prácticas ARIA: <code>aria-labelledby</code> y <code>aria-label</code></li>
</li>
</ul>
</ul>


Línea 57: Línea 59:


|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
Usa la herramienta  ''' [https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es Web Developer Toolbar].'''
<ol class="paso-list">
<ol class="paso-list">
<li>Identificar controles con texto visible.</li>
<li><span class="paso-badge">Paso 1.</span>
<li>Inspeccionar el nombre accesible en herramientas de accesibilidad.</li>
Seleccionar <strong>“Forms – Display form details”</strong>.
<li>Confirmar que el texto visible está incluido en el nombre accesible.</li>
</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>
<li><span class="paso-badge">Paso 2.</span>
Localizar los campos de formulario que tienen un texto visible que actúa como etiqueta.
</li>
 
<li><span class="paso-badge">Paso 3.</span>
Asegurar que el nombre accesible del elemento contiene las mismas letras y en el mismo orden que la etiqueta visible.
</li>
 
<li><span class="paso-badge">Paso 4.</span>
Localizar otros elementos de interacción disponibles en la página (p. ej., botones, enlaces…) que tienen un texto visible que actúa como etiqueta.
</li>
 
<li><span class="paso-badge">Paso 5.</span>
Usando la herramienta de inspección de código del navegador, comprobar si se utilizan propiedades WAI-ARIA (como <code>aria-label</code>, <code>aria-labelledby</code> o <code>aria-describedby</code>) para generar un nombre accesible.
</li>
 
<li><span class="paso-badge">Paso 6.</span>
Asegurar que el nombre accesible del elemento contiene las mismas letras y en el mismo orden que la etiqueta visible.
</li>
</ol>
</ol>


|wcag_resultado_evaluacion=
|wcag_resultado_evaluacion=
Línea 70: Línea 93:
|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
<div class="accessibility-card">
<strong>✅ Accesible: texto visible coincide con nombre accesible</strong>
El texto visible coincide con nombre accesible</strong>
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<button>Buscar</button>
<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>
</pre>
</div>
</div>
Línea 87: Línea 101:
|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>Panel Accesibilidad en DevTools</li>
<li>'''Inspección del código''': revisar que el texto visible de la etiqueta está incluido en el nombre accesible del componente (p. ej. usando <code>&lt;label&gt;</code> asociado, o que el texto visible coincide con <code>aria-label</code>/<code>aria-labelledby</code>).</li>
<li>Pruebas con control por voz (VoiceControl, Dragon)</li>
<li>'''Prueba con lectores de pantalla''': (NVDA, JAWS, VoiceOver) situarse sobre botones, enlaces y campos y confirmar que los lectores anuncian el mismo texto que aparece visualmente.</li>
<li>NVDA / JAWS / VoiceOver</li>
<li>'''Accesibilidad del árbol''': usar DevTools (Accessibility tree) para comprobar que el nombre accesible contiene el texto visible y no lo sustituye por contenido diferente.</li>
<li>'''Prueba funcional''': comprobar que comandos de voz (Dragon, Voice Control, dictado) permiten activar el elemento usando el texto visible (ej. decir “Haz clic en Enviar” funciona si el botón dice “Enviar”).</li>
</ul>
</ul>
}}
}}

Revisión del 05:52 6 nov 2025

2.5.3-A. Etiqueta en nombre

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)

  • En los componentes del interfaz de usuario (como los campos de formulario o botones) es necesario que el texto visible que actúa como su etiqueta y que sirve para reconocerlos visualmente también forme parte de su nombre accesible.

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

Recursos de apoyo

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomática

Procedimiento de evaluación

Usa la herramienta Web Developer Toolbar.
  1. Paso 1. Seleccionar “Forms – Display form details”.
  2. Paso 2. Localizar los campos de formulario que tienen un texto visible que actúa como etiqueta.
  3. Paso 3. Asegurar que el nombre accesible del elemento contiene las mismas letras y en el mismo orden que la etiqueta visible.
  4. Paso 4. Localizar otros elementos de interacción disponibles en la página (p. ej., botones, enlaces…) que tienen un texto visible que actúa como etiqueta.
  5. Paso 5. Usando la herramienta de inspección de código del navegador, comprobar si se utilizan propiedades WAI-ARIA (como aria-label, aria-labelledby o aria-describedby) para generar un nombre accesible.
  6. Paso 6. Asegurar que el nombre accesible del elemento contiene las mismas letras y en el mismo orden que la etiqueta visible.

Resultado esperado

Los controles se pueden identificar y activar mediante el mismo texto visible que se muestra en la interfaz.

Ejemplo

El texto visible coincide con nombre accesible 

<button>Buscar</button>

Otras herramientas de evaluación

  • Inspección del código: revisar que el texto visible de la etiqueta está incluido en el nombre accesible del componente (p. ej. usando <label> asociado, o que el texto visible coincide con aria-label/aria-labelledby).
  • Prueba con lectores de pantalla: (NVDA, JAWS, VoiceOver) situarse sobre botones, enlaces y campos y confirmar que los lectores anuncian el mismo texto que aparece visualmente.
  • Accesibilidad del árbol: usar DevTools (Accessibility tree) para comprobar que el nombre accesible contiene el texto visible y no lo sustituye por contenido diferente.
  • Prueba funcional: comprobar que comandos de voz (Dragon, Voice Control, dictado) permiten activar el elemento usando el texto visible (ej. decir “Haz clic en Enviar” funciona si el botón dice “Enviar”).










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 2.5.3-A. Etiqueta en nombre

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_2/2.5_Modalidades_de_los_input/2.5.3-A&oldid=3545»