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

De WCAG Wiki
VisualWikitexto
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
 
(No se muestran 2 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
== '''2.5.3-A. Etiqueta en nombre''' ==
{{CriterioWCAG
<!-- 
|id_wcag_criterio=2.5.3
  Análisis interno:
|id_wcag_subcriterio=2.5.3-A
  Este criterio impacta principalmente a: Personas con discapacidad visual y cognitiva 
|wcag_titulo_criterio=2.5.3-A. Etiqueta en nombre
  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.
|wcag_nivel=A
-->
|wcag_version=2.1
<html>
|wcag_principio=2_Operable
<!-- criterio 2.5.3-A -->
|wcag_principio_url=Principio_2
<article class="wcag-card">
|wcag_pauta=2.5_Modalidades_de_los_input
   <section class="wcag-info">
|wcag_pauta_url=Principio_2/2.5_Modalidades_de_los_input
    <ul>
|wcag_grupo=Interacción
      <li><span class="label">Nivel:</span><span class="value">A</span></li>
|wcag_subgrupo=Etiquetas_y_nombre_accesible
      <li><span class="label">Versión:</span><span class="value">2.2</span></li>
|wcag_subcriterio_url=Principio_2/2.5_Modalidades_de_entrada/2.5.3-A
      <li><span class="label">Principio:</span><span class="value">2. Operable</span></li>
 
      <li><span class="label">Pauta:</span><span class="value">2.5 Modalidades de entrada</span></li>
|wcag_discapacidades=
      <li><span class="label">Categoría:</span><span class="value">Interacción</span></li>
<li class="discapacidad-item">
      <li><span class="label">Subcategoría:</span><span class="value">Etiqueta accesible</span></li>
  [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
    </ul>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> –
  </section>
   <span class="gravedad gravedad-grave">Barrera grave</span>
  <section class="wcag-users">
</li>
    <p>Usuarios más afectados</p>
<li class="discapacidad-item">
    <ul>
  [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]]
      <li><img src="/images/4/4d/Sinvision.png" alt="Icono discapacidad visual" class="icono-discapacidad" /> Personas con discapacidad visual total – <span class="gravedad">Barrera grave</span></li>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</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-moderada">Barrera moderada</span>
    </ul>
</li>
  </section>
 
</article>
|wcag_lista_discapacidades=
</html>
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad cognitiva]]
 
|wcag_texto_criterioOAW=
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=
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><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><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/general/G211 G211: Matching the accessible name to the visible label]</span></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>
 
 
|wcag_recursos=
<ul>
<li> [https://www.w3.org/WAI/tutorials/forms/labels/ labering controls (w3C)]
</li>
</ul>
 
|wcag_tipo_evaluacion=Semiautomática
 
|wcag_pasos_evaluacion=
Usa la herramienta  ''' [https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es Web Developer Toolbar].'''
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span>
Seleccionar <strong>“Forms – Display form details”</strong>.
</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>
 
 
 
|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">
El texto visible coincide con nombre accesible</strong>
<pre class="wcag-codigo-html">
<button>Buscar</button>
</pre>
</div>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<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>'''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>'''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>
 
}}

Revisión actual - 12:53 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=3748»