Diferencia entre revisiones de «Principio 4/4.1 Compatible/4.1.3-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.3-A. Mensajes de estado''' ==
{{CriterioWCAG
|id_wcag_criterio=4.1.3
|id_wcag_subcriterio=4.1.3-A
|wcag_titulo_criterio=4.1.3-A. Mensajes de estado
|wcag_nivel=AA
|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=Informacion_dinamica
|wcag_subgrupo=Mensajes_de_estado


<!-- Análisis interno: Este criterio impacta principalmente a: Personas con discapacidad visual total y usuarios de lectores de pantalla. Problema grave: Si los mensajes de estado (como errores, confirmaciones o alertas) no son identificables por software, los usuarios no se enteran de cambios importantes (como “formulario enviado” o “error en el campo”). Gravedad: Barrera grave, porque puede impedir completar tareas o recibir información crítica. -->
|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.3-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">Mensajes e información dinámica</span></li>
      <li><span class="label">Subcategoría:</span><span class="value">Mensajes de estado</span></li>
    </ul>
  </section>


  <section class="wcag-users">
|wcag_texto_criterioOAW=
    <p>Usuarios más afectados</p>
En el contenido implementado mediante lenguajes de marcado, los mensajes de estado pueden ser determinados por software a través de su rol o sus propiedades, de modo que puedan ser presentados a la persona usuaria de productos de apoyo sin recibir el foco.
    <ul>
 
      <li>
|wcag_descripcion_resumida=
        <img src="/images/4/4d/Sinvision.png" alt="Icono discapacidad visual total" class="icono-discapacidad" />  
Cuando el contenido presenta información dinámica como confirmaciones, errores, avisos de progreso o resultados de búsqueda, dicha información debe ser anunciada por lectores de pantalla sin mover el foco. 
        Personas con discapacidad visual total – <span class="gravedad">Barrera grave</span>
Esto se consigue asignando roles y propiedades ARIA apropiadas (por ejemplo, <code>role="status"</code> o <code>role="alert"</code>).
      </li>
 
    </ul>
|wcag_objetivo=
  </section>
Garantizar que las personas usuarias sean informadas de cambios relevantes en el contenido sin perder su posición ni interrumpir su interacción, especialmente cuando utilizan lectores de pantalla.
</article>
 
</html>
|wcag_importancia=
Si los mensajes de estado no se identifican de forma programática, los usuarios con tecnologías de apoyo no sabrán que ocurrió un cambio importante, como un error en formulario, un envío exitoso o un mensaje de progreso. 
Esto puede impedir completar tareas y comprender resultados de acciones.
 
|wcag_referencias=
<ul>
<li>ARIA22: <code>role="status"</code> para mensajes informativos</li>
<li>ARIA19: <code>role="alert"</code> y regiones vivas</li>
<li>ARIA23: <code>role="log"</code> para actualizaciones secuenciales</li>
<li>ARIA18: <code>aria-alertdialog</code> para errores críticos</li>
<li>F103: Fallo por no exponer mensajes de estado por rol/propiedades</li>
</ul>
 
|wcag_recursos=
<ul>
<li>Usar <code>role="status"</code> para notificaciones pasivas</li>
<li>Usar <code>role="alert"</code> para errores inmediatos</li>
<li>Usar <code>role="progressbar"</code> para progreso</li>
<li>Usar <code>aria-live</code> adecuadamente en contenido dinámico</li>
</ul>
 
|wcag_tipo_evaluacion=Comprobación manual
 
|wcag_pasos_evaluacion=
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Activar acciones que generen feedback (errores, éxitos, progreso).</li>
<li><span class="paso-badge">Paso 2.</span> Verificar que el mensaje no mueve el foco.</li>
<li><span class="paso-badge">Paso 3.</span> Revisar con herramientas si hay rol ARIA correcto (<code>role="status"</code>, <code>alert</code>, etc.).</li>
<li><span class="paso-badge">Paso 4.</span> Confirmar que lectores de pantalla anuncian el mensaje.</li>
</ol>
 
|wcag_resultado_evaluacion=
Los mensajes de estado son detectados por software y anunciados sin mover el foco, permitiendo a usuarios con lectores de pantalla recibir la información de forma no intrusiva.
 
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
<strong>Correcto:</strong>
<pre class="wcag-codigo-html">
<div role="status">Producto añadido al carrito</div>
</pre>
El lector de pantalla anuncia el cambio sin perder el foco.
</div>
 
<div class="accessibility-card-error">
<strong>Incorrecto:</strong>
<pre class="wcag-codigo-html">
<div id="msg">Producto añadido</div>
</pre>
Sin rol ARIA, los lectores de pantalla no lo anuncian.
</div>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<li>Web Developer Toolbar</li>
<li>NVDA / VoiceOver / JAWS</li>
<li>Inspector de accesibilidad del navegador</li>
</ul>
}}

Revisión del 19:12 4 nov 2025

4.1.3-A. Mensajes de estado

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 el contenido implementado mediante lenguajes de marcado, los mensajes de estado pueden ser determinados por software a través de su rol o sus propiedades, de modo que puedan ser presentados a la persona usuaria de productos de apoyo sin recibir el foco.

Comprensión del criterio

Descripción resumida

Cuando el contenido presenta información dinámica como confirmaciones, errores, avisos de progreso o resultados de búsqueda, dicha información debe ser anunciada por lectores de pantalla sin mover el foco. Esto se consigue asignando roles y propiedades ARIA apropiadas (por ejemplo, role="status" o role="alert").

Objetivo

Garantizar que las personas usuarias sean informadas de cambios relevantes en el contenido sin perder su posición ni interrumpir su interacción, especialmente cuando utilizan lectores de pantalla.

Importancia de cumplir el criterio

Si los mensajes de estado no se identifican de forma programática, los usuarios con tecnologías de apoyo no sabrán que ocurrió un cambio importante, como un error en formulario, un envío exitoso o un mensaje de progreso. Esto puede impedir completar tareas y comprender resultados de acciones.

Referencias WCAG

  • ARIA22: role="status" para mensajes informativos
  • ARIA19: role="alert" y regiones vivas
  • ARIA23: role="log" para actualizaciones secuenciales
  • ARIA18: aria-alertdialog para errores críticos
  • F103: Fallo por no exponer mensajes de estado por rol/propiedades

Recursos de apoyo

  • Usar role="status" para notificaciones pasivas
  • Usar role="alert" para errores inmediatos
  • Usar role="progressbar" para progreso
  • Usar aria-live adecuadamente en contenido dinámico

Evaluación del criterio

Tipo de evaluación

Evaluación Comprobación manual

Procedimiento de evaluación

  1. Paso 1. Activar acciones que generen feedback (errores, éxitos, progreso).
  2. Paso 2. Verificar que el mensaje no mueve el foco.
  3. Paso 3. Revisar con herramientas si hay rol ARIA correcto (role="status", alert, etc.).
  4. Paso 4. Confirmar que lectores de pantalla anuncian el mensaje.

Resultado esperado

Los mensajes de estado son detectados por software y anunciados sin mover el foco, permitiendo a usuarios con lectores de pantalla recibir la información de forma no intrusiva.

Ejemplo

Correcto: 

<div role="status">Producto añadido al carrito</div>

El lector de pantalla anuncia el cambio sin perder el foco.

Incorrecto: 

<div id="msg">Producto añadido</div>

Sin rol ARIA, los lectores de pantalla no lo anuncian.

Otras herramientas de evaluación

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










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 4.1.3-A. Mensajes de estado

Loading comments...




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