Ver el código de «Principio 4/4.1 Compatible/4.1.2-A»

{{CriterioWCAG
|id_wcag_criterio=4.1.2
|id_wcag_subcriterio=4.1.2-A
|wcag_titulo_criterio=4.1.2-A. Nombre, función y valor
|wcag_nivel=A
|wcag_version=2.2
|wcag_principio=4_Robusto
|wcag_principio_url=Principio_4
|wcag_pauta=4.1_Compatible
|wcag_pauta_url=Principio_4/4.1_Compatible
|wcag_grupo=Compatibilidad_tecnologica
|wcag_subgrupo=Nombre_funcion_valor

|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>

|wcag_lista_discapacidades=
[[Categoría:Discapacidad visual total]]

|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.

|wcag_descripcion_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 <code>&lt;div&gt;</code>, etc.), se debe usar WAI-ARIA correctamente para ofrecer esta información.

|wcag_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.

|wcag_importancia=
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.).

|wcag_referencias=
<ul>
<li>G108: Exponer nombre, función y propiedades</li>
<li>H91: Usar controles estándar HTML</li>
<li>F15: Fallo por controles personalizados sin API accesible</li>
</ul>

|wcag_recursos=
<ul>
<li>Usar controles nativos de HTML siempre que sea posible</li>
<li>Asociar etiquetas con <code>&lt;label&gt;</code> o <code>aria-label</code></li>
<li>Usar <code>role</code>, <code>aria-labelledby</code>, <code>aria-expanded</code>, <code>aria-checked</code> según corresponda</li>
<li><code>title</code> en <code>&lt;iframe&gt;</code> y elementos embebidos</li>
</ul>

|wcag_tipo_evaluacion=Comprobación manual

|wcag_pasos_evaluacion=
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Identificar todos los elementos interactivos.</li>
<li><span class="paso-badge">Paso 2.</span> Confirmar que los elementos nativos HTML se usan correctamente.</li>
<li><span class="paso-badge">Paso 3.</span> Para controles personalizados, comprobar atributos ARIA apropiados.</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>
</ol>

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

|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
<strong>Correcto:</strong>
<pre class="wcag-codigo-html">
<button aria-expanded="false" id="menuBtn">
  Menú
</button>
</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>

|wcag_otras_herramientas_evaluacion=
<ul>
<li>Web Developer Toolbar</li>
<li>Inspectores de accesibilidad del navegador</li>
<li>NVDA / VoiceOver / JAWS</li>
</ul>
}}