Diferencia entre revisiones de «Principio 4/4.1 Compatible/4.1.2-A»

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
Línea 4: Línea 4:
|wcag_titulo_criterio=4.1.2-A. Nombre, función y valor
|wcag_titulo_criterio=4.1.2-A. Nombre, función y valor
|wcag_nivel=A
|wcag_nivel=A
|wcag_version=2.2
|wcag_version=2.0
|wcag_principio=4_Robusto
|wcag_principio=4_Robusto
|wcag_principio_url=Principio_4
|wcag_principio_url=Principio_4
Línea 23: Línea 23:


|wcag_texto_criterioOAW=
|wcag_texto_criterioOAW=
Para todos los componentes de la interfaz de usuario (como elementos de formulario, enlaces o componentes generados por scripts), el nombre y la función pueden ser determinados por software; los estados, propiedades y valores ajustables por el usuario pueden ser establecidos por software usando métodos compatibles con los agentes de usuario, incluidos productos de apoyo; y los cambios están disponibles para los agentes de usuario, incluyendo productos de apoyo.
Los elementos de la interfaz de usuario (formularios, enlaces, componentes personalizados con scripts, etc.) deben ser accesibles. Es decir, los productos de apoyo deben poder reconocer cuál es su nombre, su función y su valor o estado y pueden interactuar con ellos.


|wcag_descripcion_resumida=
|wcag_descripcion_resumida=
Todos los controles deben exponer nombre, rol y estado de forma programática.   
Todos los controles deben exponer nombre, rol y estado de forma programática.   
Los elementos nativos de HTML cumplen esto automáticamente.   
Los elementos nativos de HTML cumplen esto automáticamente.   
Para componentes personalizados (widgets, botones creados con <code>&lt;div&gt;</code>, etc.), se debe usar WAI-ARIA correctamente para ofrecer esta información.
Para componentes personalizados (widgets, botones creados con <code>&lt;div&gt;</code>, etc.), se debe usar WAI-ARIA correctamente para ofrecer esta información.
Línea 35: Línea 36:
|wcag_importancia=
|wcag_importancia=
Si un control no expone su nombre, función o estado, las tecnologías de apoyo no pueden usarlo.   
Si un control no expone su nombre, función o estado, las tecnologías de apoyo no pueden usarlo.   
Este criterio es esencial para páginas modernas con componentes interactivos creados con JavaScript y frameworks (Vue, React, etc.).
Este criterio es esencial para páginas modernas con componentes interactivos creados con JavaScript y frameworks (Vue, React, etc.).


|wcag_referencias=
|wcag_referencias=
<ul>
<ul>
<li>G108: Exponer nombre, función y propiedades</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G108 G108: Using markup features to expose the name and role, allow user-settable properties to be directly set, and provide notification of changes]</span></li>
<li>H91: Usar controles estándar HTML</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H91 H91: Using HTML form controls and links]</span></li>
<li>F15: Fallo por controles personalizados sin API accesible</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H44 H44: Using label elements to associate text labels with form controls]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H64 H64: Using the title attribute of the frame and iframe elements]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H65 H65: Using the title attribute to identify form controls when the label element cannot be used]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H88 H88: Using HTML according to spec]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G135 G135: Using the accessibility API features of a technology to expose names and notification of changes]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G10 G10: Creating components using a technology that supports the accessibility notification of changes]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/failures/F59 F59: Failure due to using script to make div or span a user interface control in HTML without providing a role for the control]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/failures/F15 F15: Failure due to implementing custom controls that do not use an accessibility API for the technology, or do so incompletely]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/failures/F79 F79: Failure due to the focus state of a user interface component not being programmatically determinable or no notification of change of focus state available]</span></li>
</ul>
</ul>


|wcag_recursos=
|wcag_recursos=
<strong> Consejos </strong>
<ul>
<ul>
<li>Usar controles nativos de HTML siempre que sea posible</li>
<li>Usar controles nativos de HTML siempre que sea posible</li>
Línea 52: Línea 64:
</ul>
</ul>


|wcag_tipo_evaluacion=Comprobación manual
|wcag_tipo_evaluacion=Manual


|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
<ol class="paso-list">
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Identificar todos los elementos interactivos.</li>
<li><span class="paso-badge">Paso 1.</span>
<li><span class="paso-badge">Paso 2.</span> Confirmar que los elementos nativos HTML se usan correctamente.</li>
Localizar los componentes de interacción.
<li><span class="paso-badge">Paso 3.</span> Para controles personalizados, comprobar atributos ARIA apropiados.</li>
</li>
<li><span class="paso-badge">Paso 4.</span> Verificar que cambios de estado (p.ej., expandido, seleccionado) se comunican al lector de pantalla.</li>
 
<li><span class="paso-badge">Paso 2.</span>
Comprobar que se han creado teniendo en cuenta la accesibilidad. Por ejemplo, que se utilizan enlaces y controles de formulario en HTML siguiendo los requisitos de accesibilidad aplicables (texto significativo, etiquetas descriptivas, etc.).
</li>
 
<li><span class="paso-badge">Paso 3.</span>
Localizar los marcos o marcos en línea existentes.
</li>
 
<li><span class="paso-badge">Paso 4.</span>
Verificar que se proporciona un título en el atributo <code>title</code> que describa de forma breve la finalidad o contenido de cada marco.
Para ello, con la herramienta <strong>Web Developer Toolbar</strong> seleccionar:
<ul>
<li>a. <strong>Information → Display title attributes</strong></li>
<li>b. <strong>Outline → Outline Frames</strong></li>
</ul>
</li>
</ol>
</ol>


Línea 67: Línea 95:
|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
<div class="accessibility-card">
El lector de pantalla reconoce "Botón — Menú — Colapsado".
<strong>Correcto:</strong>
<strong>Correcto:</strong>
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
Línea 73: Línea 102:
</button>
</button>
</pre>
</pre>
El lector de pantalla reconoce "Botón — Menú — Colapsado".
</div>
<div class="accessibility-card-error">
<strong>Incorrecto:</strong>
<pre class="wcag-codigo-html">
<div onclick="toggleMenu()">
  Menú
</div>
</pre>
El lector de pantalla no sabe que es un botón ni su estado.
</div>
</div>


|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>Web Developer Toolbar</li>
<li>'''Inspección del navegador''': revisar que todos los controles tienen un nombre accesible mediante <code>&lt;label&gt;</code>, atributos como <code>aria-label</code> o <code>aria-labelledby</code>, y que su función y estado están correctamente definidos.</li>
<li>Inspectores de accesibilidad del navegador</li>
<li>'''Lectores de pantalla''': (NVDA, JAWS, VoiceOver) navegar por los controles para comprobar que se anuncian nombre, rol (botón, enlace, cuadro de texto, etc.) y estado/valor (marcado, expandido, requerido, etc.).</li>
<li>NVDA / VoiceOver / JAWS</li>
<li>'''Inspección del árbol accesible''': usar DevTools (Accessibility panel) para verificar que los componentes personalizados exponen correctamente sus roles, propiedades y estados (p. ej., mediante ARIA).</li>
<li>'''Pruebas con teclado''': asegurarse de que los componentes son operables mediante teclado, manteniendo foco visible y correcto comportamiento al cambiar valores o estados.</li>
</ul>
</ul>
}}
}}

Revisión actual - 11:07 5 nov 2025

4.1.2-A. Nombre, función y valor

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 de la interfaz de usuario (formularios, enlaces, componentes personalizados con scripts, etc.) deben ser accesibles. Es decir, los productos de apoyo deben poder reconocer cuál es su nombre, su función y su valor o estado y pueden interactuar con ellos.

Comprensión del criterio

Descripción resumida

Todos los controles deben exponer nombre, rol y estado de forma programática.

Los elementos nativos de HTML cumplen esto automáticamente.

Para componentes personalizados (widgets, botones creados con <div>, etc.), se debe usar WAI-ARIA correctamente para ofrecer esta información.

Objetivo

Garantizar que lectores de pantalla y otros productos de apoyo puedan identificar cada control, saber qué hace y conocer su estado y cambios, permitiendo interacción accesible.

Importancia de cumplir el criterio

Si un control no expone su nombre, función o estado, las tecnologías de apoyo no pueden usarlo. Este criterio es esencial para páginas modernas con componentes interactivos creados con JavaScript y frameworks (Vue, React, etc.).

Referencias WCAG

Recursos de apoyo

Consejos
  • Usar controles nativos de HTML siempre que sea posible
  • Asociar etiquetas con <label> o aria-label
  • Usar role, aria-labelledby, aria-expanded, aria-checked según corresponda
  • title en <iframe> y elementos embebidos

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Paso 1. Localizar los componentes de interacción.
  2. Paso 2. Comprobar que se han creado teniendo en cuenta la accesibilidad. Por ejemplo, que se utilizan enlaces y controles de formulario en HTML siguiendo los requisitos de accesibilidad aplicables (texto significativo, etiquetas descriptivas, etc.).
  3. Paso 3. Localizar los marcos o marcos en línea existentes.
  4. Paso 4. Verificar que se proporciona un título en el atributo title que describa de forma breve la finalidad o contenido de cada marco. Para ello, con la herramienta Web Developer Toolbar seleccionar:
    • a. Information → Display title attributes
    • b. Outline → Outline Frames

Resultado esperado

Todos los componentes exponen de forma programática su nombre, función y estado, y notifican los cambios.

Ejemplo

El lector de pantalla reconoce "Botón — Menú — Colapsado". Correcto: 

<button aria-expanded="false" id="menuBtn">
  Menú
</button>

Otras herramientas de evaluación

  • Inspección del navegador: revisar que todos los controles tienen un nombre accesible mediante <label>, atributos como aria-label o aria-labelledby, y que su función y estado están correctamente definidos.
  • Lectores de pantalla: (NVDA, JAWS, VoiceOver) navegar por los controles para comprobar que se anuncian nombre, rol (botón, enlace, cuadro de texto, etc.) y estado/valor (marcado, expandido, requerido, etc.).
  • Inspección del árbol accesible: usar DevTools (Accessibility panel) para verificar que los componentes personalizados exponen correctamente sus roles, propiedades y estados (p. ej., mediante ARIA).
  • Pruebas con teclado: asegurarse de que los componentes son operables mediante teclado, manteniendo foco visible y correcto comportamiento al cambiar valores o estados.










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 4.1.2-A. Nombre, función y valor

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_4/4.1_Compatible/4.1.2-A&oldid=3456»