Diferencia entre revisiones de «Principio 3/3.3 Assistencia en los input/3.3.1-A»

De WCAG Wiki
← Edición anteriorEdición siguiente →
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
Línea 23: Línea 23:
   <span class="discapacidad-texto">[[:Categoría:Discapacidad visual baja|Baja visión]]</span> –
   <span class="discapacidad-texto">[[:Categoría:Discapacidad visual baja|Baja visión]]</span> –
   <span class="gravedad gravedad-moderada">Barrera moderada</span>
   <span class="gravedad gravedad-moderada">Barrera moderada</span>
</li>
<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>
</li>


|wcag_lista_discapacidades=
|wcag_lista_discapacidades=
[[Categoría:Discapacidad cognitiva]]
[[Categoría:Discapacidad cognitiva]]
[[Categoría:Discapacidad visual baja]]
[[Categoría:Discapacidad baja visión]]
[[Categoría:Discapacidad visual total]]
 


|wcag_texto_criterioOAW=
|wcag_texto_criterioOAW=
Se deben identificar los campos de formulario obligatorios que no hayan sido completados y se debe informar a los usuarios mediante un texto que indique dónde se ha producido el error y qué se necesita corregir.
Se deben identificar los campos de formulario obligatorios que no han sido completados y se debe informar a los usuarios mediante un texto.


|wcag_descripcion_resumida=
|wcag_descripcion_resumida=
Línea 43: Línea 50:
|wcag_referencias=
|wcag_referencias=
<ul>
<ul>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G83 G83: Providing text descriptions to identify required fields that were not completed]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR18 SCR18: Providing client-side validation and alert]</span></li>
</ul>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/error-identification.html Understanding Success Criterion 3.3.1]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/error-identification.html Understanding Success Criterion 3.3.1]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/quickref/#error-identification WCAG Quick Reference]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/quickref/#error-identification WCAG Quick Reference]</span></li>
<li>[https://www.w3.org/TR/WAI-ARIA-1.2/#aria-invalid ARIA – aria-invalid]</li>
<li>[https://webaim.org/techniques/forms/ WebAIM — Accessible Forms]</li>
</ul>
</ul>


|wcag_recursos=
|wcag_recursos=
<strong> Consejos </strong>
<ul>
<ul>
<li>Mensajes de error claros y visibles</li>
<li>Mensajes de error claros y visibles</li>
<li>Asociación mediante <code>aria-describedby</code></li>
<li>Asociación mediante <code>aria-describedby</code></li>
<li>Uso adecuado de <code>aria-invalid</code>
<li>Uso adecuado de <code>aria-invalid</code>
</ul>
<ul>
<li><span lang="en">[https://www.w3.org/WAI/tutorials/forms/validation/ Validating Input — W3C/WAI Forms Tutorial]</span></li>
</ul>
</ul>


Línea 60: Línea 73:
|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
<ol class="paso-list">
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Enviar formulario con errores o campos vacíos.</li>
<li><span class="paso-badge">Paso 1.</span>
<li><span class="paso-badge">Paso 2.</span> Verificar que aparece mensaje textual claro.</li>
Localizar los formularios existentes.
<li><span class="paso-badge">Paso 3.</span> Confirmar que el mensaje identifica el campo y el error.</li>
</li>
<li><span class="paso-badge">Paso 4.</span> Revisar presencia de <code>aria-invalid</code> y vínculos mediante <code>aria-describedby</code>.</li>
 
<li><span class="paso-badge">Paso 5.</span> Comprobar anuncio en lectores de pantalla.</li>
<li><span class="paso-badge">Paso 2.</span>
Intentar enviar el formulario sin haber completado los campos obligatorios.
</li>
 
<li><span class="paso-badge">Paso 3.</span>
Verificar que se informa a los usuarios mediante texto de qué campos obligatorios faltan por completar.
</li>
</ol>
</ol>


|wcag_resultado_evaluacion=
|wcag_resultado_evaluacion=
Línea 72: Línea 92:
|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
<div class="accessibility-card">
<strong>✅ Accesible: error textual vinculado al campo</strong>
Error textual vinculado al campo.
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<label for="email">Correo electrónico</label>
<label for="email">Correo electrónico</label>
Línea 82: Línea 102:
|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>Prueba con teclado</li>
<li>'''Prueba funcional''': intentar enviar el formulario sin completar los campos obligatorios y comprobar que aparece un mensaje de error textual indicando qué campo falta.</li>
<li>NVDA / JAWS / VoiceOver</li>
<li>'''Inspección del código''': verificar uso correcto de <code>required</code> o <code>aria-required="true"</code> y que los mensajes de error están asociados al campo mediante <code>aria-describedby</code> u otro mecanismo adecuado.</li>
<li>DevTools – Propiedades accesibles</li>
<li>'''Lectores de pantalla''': (NVDA, JAWS, VoiceOver) confirmar que el mensaje se anuncia automáticamente y que el usuario entiende qué campo debe corregir.</li>
<li>Axe / Lighthouse (detección parcial)</li>
<li>'''Revisión visual''': comprobar que la identificación del error no depende solo del color; debe haber texto claro explicando el problema.</li>
</ul>
</ul>
}}
}}

Revisión del 06:36 6 nov 2025

3.3.1-A. Identificación de errores

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)

  • Se deben identificar los campos de formulario obligatorios que no han sido completados y se debe informar a los usuarios mediante un texto.

Comprensión del criterio

Descripción resumida

Indicar claramente qué campo contiene un error y el motivo del error mediante texto visible.

Objetivo

Garantizar que los usuarios detecten los errores y puedan corregirlos sin perder información ni contexto.

Importancia de cumplir el criterio

Las personas con discapacidad cognitiva, baja visión o que usan lector de pantalla pueden no percibir errores si solo se usa color o iconos. Es necesario texto claro y asociado al campo.

Referencias WCAG

  • Understanding Success Criterion 3.3.1
  • WCAG Quick Reference

    • Recursos de apoyo

    Consejos
    • Mensajes de error claros y visibles
    • Asociación mediante aria-describedby
    • Uso adecuado de aria-invalid

    Evaluación del criterio

    Tipo de evaluación

    Evaluación Manual

    Procedimiento de evaluación

    1. Paso 1. Localizar los formularios existentes.
    2. Paso 2. Intentar enviar el formulario sin haber completado los campos obligatorios.
    3. Paso 3. Verificar que se informa a los usuarios mediante texto de qué campos obligatorios faltan por completar.

    Resultado esperado

    Los errores se identifican mediante texto y están asociados al campo correspondiente, facilitando su corrección.

    Ejemplo

    Error textual vinculado al campo. 

    <label for="email">Correo electrónico</label>
<input id="email" aria-describedby="email-error" aria-invalid="true">
<p id="email-error" class="error">Introduce un correo electrónico válido.</p>

    Otras herramientas de evaluación

    • Prueba funcional: intentar enviar el formulario sin completar los campos obligatorios y comprobar que aparece un mensaje de error textual indicando qué campo falta.
    • Inspección del código: verificar uso correcto de required o aria-required="true" y que los mensajes de error están asociados al campo mediante aria-describedby u otro mecanismo adecuado.
    • Lectores de pantalla: (NVDA, JAWS, VoiceOver) confirmar que el mensaje se anuncia automáticamente y que el usuario entiende qué campo debe corregir.
    • Revisión visual: comprobar que la identificación del error no depende solo del color; debe haber texto claro explicando el problema.










    Ejemplos accesibles y no accesibles creados por alumnos

    Comentarios

    A continuación se muestran comentarios sobre el criterio 3.3.1-A. Identificación de errores

    Loading comments...




    Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_3/3.3_Assistencia_en_los_input/3.3.1-A&oldid=3557»