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

De WCAG Wiki
← Edición anteriorEdición siguiente →
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
Línea 1: Línea 1:
== '''4.1.2-A. Nombre, función, valor''' ==
{{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


<!-- Análisis interno: Este criterio impacta principalmente a: Personas con discapacidad visual total. Problema grave: Si los controles o elementos personalizados no exponen su nombre, función o estado a través de las APIs de accesibilidad, los lectores de pantalla no pueden informar al usuario ni permitir la interacción. Gravedad: Barrera grave, ya que impide la interacción con la interfaz. -->
|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>


<!-- criterio 4.1.2-A -->
|wcag_lista_discapacidades=
<html>
[[Categoría:Discapacidad visual total]]
<article class="wcag-card">
  <section class="wcag-info">
    <ul>
      <li><span class="label">Nivel:</span><span class="value">A</span></li>
      <li><span class="label">Versión:</span><span class="value">2.2</span></li>
      <li><span class="label">Principio:</span><span class="value">4. Robusto</span></li>
      <li><span class="label">Pauta:</span><span class="value">4.1 Compatible</span></li>
      <li><span class="label">Categoría:</span><span class="value">Compatibilidad tecnológica</span></li>
      <li><span class="label">Subcategoría:</span><span class="value">Nombre, función, valor</span></li>
    </ul>
  </section>


  <section class="wcag-users">
|wcag_texto_criterioOAW=
    <p>Usuarios más afectados</p>
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.
    <ul>
 
      <li>
|wcag_descripcion_resumida=
        <img src="/images/4/4d/Sinvision.png" alt="Icono discapacidad visual total" class="icono-discapacidad" />  
Todos los controles deben exponer nombre, rol y estado de forma programática. 
        Personas con discapacidad visual total – <span class="gravedad">Barrera grave</span>
Los elementos nativos de HTML cumplen esto automáticamente. 
      </li>
Para componentes personalizados (widgets, botones creados con <code>&lt;div&gt;</code>, etc.), se debe usar WAI-ARIA correctamente para ofrecer esta información.
    </ul>
 
  </section>
|wcag_objetivo=
</article>
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.
</html>
 
|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>
}}

Revisión del 19:11 4 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)

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

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

  • G108: Exponer nombre, función y propiedades
  • H91: Usar controles estándar HTML
  • F15: Fallo por controles personalizados sin API accesible

Recursos de apoyo

  • 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 Comprobación manual

Procedimiento de evaluación

  1. Paso 1. Identificar todos los elementos interactivos.
  2. Paso 2. Confirmar que los elementos nativos HTML se usan correctamente.
  3. Paso 3. Para controles personalizados, comprobar atributos ARIA apropiados.
  4. Paso 4. Verificar que cambios de estado (p.ej., expandido, seleccionado) se comunican al lector de pantalla.

Resultado esperado

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

Ejemplo

Correcto: 

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

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

Incorrecto: 

<div onclick="toggleMenu()">
  Menú
</div>

El lector de pantalla no sabe que es un botón ni su estado.

Otras herramientas de evaluación

  • Web Developer Toolbar
  • Inspectores de accesibilidad del navegador
  • NVDA / VoiceOver / JAWS










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=3349»