Diferencia entre revisiones de «Principio 1/1.3 Adaptable/1.3.5-A»

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
 
(No se muestran 58 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
== '''1.3.5-A. Propósito de los campos de datos ''' ==
{{CriterioWCAG
<!-- 
|id_wcag_criterio=1.3.5
  Análisis interno:
|id_wcag_subcriterio=1.3.5-A
  Este criterio impacta principalmente a: Personas con discapacidad visual total y motriz 
|wcag_titulo_criterio=1.3.5-A. Propósito de los campos de datos
  Problema grave: Si los campos de entrada no identifican su propósito, los lectores de pantalla y autocompletadores no interpretan correctamente la información solicitada, dificultando la interacción. 
|wcag_nivel=AA
-->
|wcag_version=2.1
<html>
|wcag_principio=1_Perceptible
<!-- criterio 1.3.5-A -->
|wcag_principio_url=Principio_1
<article class="wcag-card">
|wcag_pauta=1.3_Adaptable
  <section class="wcag-info">
|wcag_pauta_url=Principio_1/1.3_Adaptable
    <ul>
|wcag_grupo=Formularios
      <li><span class="label">Nivel:</span><span class="value">AA</span></li>
|wcag_subgrupo=Propósito de campos
      <li><span class="label">Versión:</span><span class="value">2.0</span></li>
      <li><span class="label">Principio:</span><span class="value">1. Perceptible</span></li>
      <li><span class="label">Pauta:</span><span class="value">1.3 Crear contenido adaptable</span></li>
      <li><span class="label">Categoría:</span><span class="value">Formulario</span></li>
      <li><span class="label">Subcategoría:</span><span class="value">Propósito de campos</span></li>
    </ul>
  </section>


  <section class="wcag-users">
|wcag_discapacidades=
    <p>Usuarios más afectados</p>
<li class="discapacidad-item">
    <ul>
  [[Archivo:Motriz.png|20px|class=icon-discapacidad|alt=Discapacidad motriz]]
      <li><img src="/images/4/4d/Sinvision.png" alt="Icono de una persona con discapacidad visual" /> Personas con discapacidad visual total - <span class="gravedad">Barrera grave</span></li>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad motriz|Motriz]]</span> –
      <li><img src="/images/0/06/Motriz.png" alt="Icono discapacidad motriz" class="icono-discapacidad" /> Personas con discapacidad motriz – <span class="gravedad">Barrera moderada</span></li>
  <span class="gravedad gravedad-leve">Barrera leve</span>
    </ul>
</li>
  </section>
<li class="discapacidad-item">
</article>
  [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]]
</html>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> –  
  <span class="gravedad gravedad-moderada">Barrera moderada</span>
</li>


[[Categoría: Visual total]]
|wcag_lista_discapacidades=
[[Categoría: Motriz]]
[[Categoría:Discapacidad motriz]]
[[Categoría:Discapacidad cognitiva]]


[[Categoría: Formularios]]
|wcag_texto_criterioOAW=
Se debe usar un método que permita al navegador identificar automáticamente el tipo de dato solicitado (por ejemplo, nombre, correo, dirección, etc.).


[[Categoría: Nivel-AA]]
|wcag_descripcion_resumida=
[[Categoría: Versión-2.0]]
Cada campo que recopila datos personales debe estar correctamente identificado mediante atributos estándar como <code>autocomplete</code>.


|wcag_objetivo=
Facilitar la introducción de datos y mejorar la comprensión del propósito de cada campo en un formulario.


=== Descripción y comprensión del criterio ===
|wcag_importancia=
Reduce la carga cognitiva y motriz de completar formularios, evitando errores y mejorando la velocidad de introducción de datos.


Los campos de entrada de datos que recopilan información sobre las personas deben tener un propósito claramente identificable por el software.
|wcag_referencias=
<ul>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/html/H98 H98: Using HTML 5.2 autocomplete attributes]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/failures/F107 F107: Failure of Success Criterion 1.3.5 due to incorrect autocomplete attribute values]</span></li>
</ul>


Esto significa que los navegadores y las tecnologías de apoyo (como los lectores de pantalla) deben poder reconocer automáticamente qué tipo de información se espera en cada campo —por ejemplo, nombre, correo electrónico o número de teléfono— sin necesidad de interpretación humana.
|wcag_recursos=
<ul>
<li>[https://www.w3.org/WAI/tutorials/forms/autofill/ Tutorial W3C sobre autocompletado en formularios]</li>
</ul>


==== Descripción resumida ====
|wcag_tipo_evaluacion=Semiautomática
<div class="wcag-info-criterio"> El propósito de cada campo que recopila datos personales (como nombre, dirección, teléfono o tarjeta de crédito) debe poder determinarse mediante programación. Esto se consigue utilizando tecnologías web estandarizadas, como los **atributos de autocompletado de HTML**, que permiten al navegador identificar automáticamente el tipo de información esperada y ofrecer ayuda al usuario, como el autocompletado o la lectura más contextual por parte de los lectores de pantalla. </div>
==== Objetivo ====
<div class="wcag-info-criterio"> El objetivo de este criterio es doble:


Facilitar la introducción de datos:
|wcag_pasos_evaluacion=
Permite a los navegadores autocompletar los campos con información que el usuario ya ha introducido previamente, lo que reduce la carga de tecleo, los errores y el tiempo necesario para rellenar formularios.
Usa la herramienta de ''' [https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es Web Developer Toolbar].'''


Mejorar la comprensión y personalización:
<ol class="paso-list">
Al identificar claramente el propósito de los campos, las tecnologías de apoyo pueden ofrecer información contextual o iconos que ayuden a reconocer más fácilmente el tipo de dato solicitado.
<li><span class="paso-badge">Paso 1.</span>
Seleccionar <strong>“Forms – Display form details”</strong>.
</li>
<li><span class="paso-badge">Paso 2.</span>
Localizar los campos de formulario que solicitan información acerca de las personas.
</li>
<li><span class="paso-badge">Paso 3.</span>
Verificar que tienen el atributo <code>autocomplete</code> con un valor acorde a su propósito, según los criterios establecidos en
<span lang="en">[https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose Success Criterion 1.3.5: Input Purposes for User Interface Components]</span>
</li>
</ol>


</div>
==== Importancia de cumplir el criterio ====
<div class="wcag-info-criterio"> Cumplir este criterio de **Nivel AA** mejora notablemente la **eficiencia y la accesibilidad cognitiva** de los formularios. Las personas con dificultades de atención, memoria o movilidad se benefician de una introducción de datos más rápida y con menos errores. Además, la identificación semántica de los campos aporta coherencia y facilita la interoperabilidad con navegadores y dispositivos de asistencia, mejorando la experiencia global para todos los usuarios. </div>


=== Evaluación del criterio ===
|wcag_resultado_evaluacion=
==== Tipo de comprobación ====
Los campos incluyen el atributo <code>autocomplete</code> con valores coherentes al propósito del campo.
<div class="wcag-info-criterio"> Comprobación **semiautomática**. Es necesario revisar el código fuente o usar herramientas del navegador para verificar si los campos de formulario incluyen los atributos de autocompletado adecuados. </div>
==== Procedimiento de evaluación ====
<div class="wcag-info-criterio">


<span class="paso-badge">Paso 1.</span>
|wcag_ejemplo_evaluacion=
Abrir la página en el navegador y activar las herramientas de desarrollo (por ejemplo, la opción Inspeccionar elemento).
<div class="accessibility-card">
Se incluye un codigo con autocomplete "email" correspondiente al campo de datos.


<span class="paso-badge">Paso 2.</span>
<pre class="wcag-codigo-html">&lt;label for="correo"&gt;Correo electrónico&lt;/label&gt;
Localizar los campos del formulario que solicitan información personal (nombre, dirección, teléfono, correo, etc.).
&lt;input id="correo" type="email" autocomplete="email"&gt;</pre></div>


<span class="paso-badge">Paso 3.</span>
|wcag_otras_herramientas_evaluacion=
Comprobar que cada campo incluye el atributo <code>autocomplete</code> con un valor que identifique correctamente su propósito (por ejemplo, <code>autocomplete="name"</code> o <code>autocomplete="email"</code>).


<span class="paso-badge">Paso 4.</span>
|wcag_otras_herramientas_evaluacion=
Verificar que el atributo se aplica correctamente a todos los campos relevantes y que no hay confusiones entre tipos de datos.
<ul>
<li>'''Inspección del navegador''': revisar que los campos de formulario que recopilan información personal utilicen atributos semánticos adecuados (p. ej. <code>autocomplete="name"</code>, <code>autocomplete="email"</code>, <code>autocomplete="street-address"</code>, etc.).</li>
<li>'''Pruebas del navegador''': comprobar si el navegador ofrece autocompletado adecuado y reconoce el propósito de cada campo al escribir o guardar información.</li>
<li>'''Lectores de pantalla''': (NVDA, JAWS, VoiceOver) verificar que los campos se anuncian correctamente y que el propósito está claro para usuarios con apoyo asistivo.</li>
<li>'''Validación HTML''': usar herramientas como el [https://validator.w3.org/nu/ W3C HTML Validator] o DevTools para detectar ausencia o uso incorrecto del atributo <code>autocomplete</code> en campos relevantes.</li>
</ul>


</div>
}}
==== Ejemplo ====
<div class="wcag-info-criterio"> <p>Ejemplo de formulario con propósito identificado para el campo de número de tarjeta de crédito:</p> <div class="accessibility-card"> <pre class="wcag-codigo-html"> <code>&lt;label for="tarjeta"&gt;Número de tarjeta de crédito&lt;/label&gt; &lt;input id="tarjeta" type="text" autocomplete="cc-number"&gt;</code> </pre> </div> <p>El valor <code>cc-number</code> permite que el navegador reconozca el tipo de dato y ofrezca autocompletado o validación adecuados.</p> </div>
 
==== Otras herramientas de evaluación ====
<div class="wcag-info-criterio"> Se pueden utilizar extensiones de navegador o herramientas de desarrollo como **Web Developer Toolbar**, **axe DevTools** o **Accessibility Insights**. Estas herramientas permiten comprobar fácilmente si los campos de formulario incluyen los atributos <code>autocomplete</code> correctos y coherentes con el tipo de información solicitada. </div>

Revisión actual - 09:43 5 nov 2025

1.3.5-A. Propósito de los campos de datos

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 debe usar un método que permita al navegador identificar automáticamente el tipo de dato solicitado (por ejemplo, nombre, correo, dirección, etc.).

Comprensión del criterio

Descripción resumida

Cada campo que recopila datos personales debe estar correctamente identificado mediante atributos estándar como autocomplete.

Objetivo

Facilitar la introducción de datos y mejorar la comprensión del propósito de cada campo en un formulario.

Importancia de cumplir el criterio

Reduce la carga cognitiva y motriz de completar formularios, evitando errores y mejorando la velocidad de introducción de datos.

Referencias WCAG

Recursos de apoyo

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomática

Procedimiento de evaluación

Usa la herramienta de Web Developer Toolbar.
  1. Paso 1. Seleccionar “Forms – Display form details”.
  2. Paso 2. Localizar los campos de formulario que solicitan información acerca de las personas.
  3. Paso 3. Verificar que tienen el atributo autocomplete con un valor acorde a su propósito, según los criterios establecidos en Success Criterion 1.3.5: Input Purposes for User Interface Components

Resultado esperado

Los campos incluyen el atributo autocomplete con valores coherentes al propósito del campo.

Ejemplo

Se incluye un codigo con autocomplete "email" correspondiente al campo de datos. 

<label for="correo">Correo electrónico</label>
<input id="correo" type="email" autocomplete="email">

Otras herramientas de evaluación

  • Inspección del navegador: revisar que los campos de formulario que recopilan información personal utilicen atributos semánticos adecuados (p. ej. autocomplete="name", autocomplete="email", autocomplete="street-address", etc.).
  • Pruebas del navegador: comprobar si el navegador ofrece autocompletado adecuado y reconoce el propósito de cada campo al escribir o guardar información.
  • Lectores de pantalla: (NVDA, JAWS, VoiceOver) verificar que los campos se anuncian correctamente y que el propósito está claro para usuarios con apoyo asistivo.
  • Validación HTML: usar herramientas como el W3C HTML Validator o DevTools para detectar ausencia o uso incorrecto del atributo autocomplete en campos relevantes.










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 1.3.5-A. Propósito de los campos de datos

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_1/1.3_Adaptable/1.3.5-A&oldid=3434»