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 47 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>
<li>
</li>
          <img src="/images/4/40/Cognitiva.png" alt="Icono discapacidad cognitiva" class="icono-discapacidad" />
<li class="discapacidad-item">
          Personas con discapacidad cognitiva – <span class="gravedad">Barrera moderada</span>
  [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]]
        </li>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> –
    </ul>
  <span class="gravedad gravedad-moderada">Barrera moderada</span>
  </section>
</li>
</article>
</html>


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


[[Categoría:Nivel-AA]]
|wcag_texto_criterioOAW=
[[Categoría:Versión-2.0]]
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.).


=== Descripción y comprensión del criterio ===
|wcag_descripcion_resumida=
Cada campo que recopila datos personales debe estar correctamente identificado mediante atributos estándar como <code>autocomplete</code>.


El criterio establece que los campos de los formularios destinados a recopilar información personal —como nombre, dirección o correo electrónico— deben contar con un propósito identificable por el software.
|wcag_objetivo=
Facilitar la introducción de datos y mejorar la comprensión del propósito de cada campo en un formulario.


En la práctica, esto implica que los navegadores y las tecnologías de apoyo, como los lectores de pantalla, deben ser capaces de reconocer automáticamente el tipo de información esperada en cada campo.  
|wcag_importancia=
Reduce la carga cognitiva y motriz de completar formularios, evitando errores y mejorando la velocidad de introducción de datos.


Por ejemplo, un campo destinado al número de teléfono debería poder identificarse como tal a través del código.
|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>


==== Descripción resumida ====
|wcag_recursos=
<div class="wcag-info-criterio">
<ul>
<li>[https://www.w3.org/WAI/tutorials/forms/autofill/ Tutorial W3C sobre autocompletado en formularios]</li>
</ul>


Cada campo que recopila datos personales debe estar correctamente identificado en el código fuente. 
|wcag_tipo_evaluacion=Semiautomática


Esta identificación se logra mediante el uso de tecnologías estándar de la web, como los atributos de autocompletado de HTML. 
|wcag_pasos_evaluacion=
 
Usa la herramienta de ''' [https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es Web Developer Toolbar].'''
La aplicación de estos atributos permite que el navegador proporcione funciones automáticas —como la cumplimentación de datos o la lectura contextual del propósito del campo— mejorando así la accesibilidad y la eficiencia en la interacción.
 
</div>
 
==== Objetivo ====
<div class="wcag-info-criterio">
 
El criterio tiene como finalidad optimizar la introducción de datos en los formularios y facilitar su comprensión. 
 
Su cumplimiento permite:
 
* '''Reducir el esfuerzo de introducción de datos:''' los navegadores pueden autocompletar los campos con información previamente guardada, disminuyendo la carga de tecleo y los posibles errores. 
* '''Favorecer la accesibilidad cognitiva:''' la identificación explícita del propósito de cada campo posibilita que las tecnologías de apoyo ofrezcan mensajes, pistas o iconos que clarifiquen el tipo de información solicitada.
 
</div>
 
==== Importancia de cumplir el criterio ====
<div class="wcag-info-criterio">
 
La aplicación de este criterio mejora la accesibilidad y la eficiencia en la interacción con formularios digitales. 
 
Resulta especialmente relevante para personas con limitaciones motrices, de memoria o atención, al permitir una cumplimentación más rápida, segura y precisa. 
 
Asimismo, la identificación semántica de los campos contribuye a la coherencia del código, favorece la interoperabilidad entre navegadores y dispositivos, y garantiza una experiencia más homogénea para todos los usuarios.
 
</div>
 
==== Referencias WCAG ====
<div class="wcag-info-criterio">
* <span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html Comprender el criterio1.3.5 – Identificar el proposito de entrada (en inglés)]</span>
</div>
 
==== Recursos de apoyo ====
<div class="wcag-info-criterio">
 
Puede consultarse el tutorial del W3C sobre autocompletado en formularios: 
 
[https://www.w3.org/WAI/tutorials/forms/autofill/ Autocompletado en formularios (en inglés)]
 
</div>
 
=== Evaluación del criterio ===
 
==== Tipo de comprobación ====
<div class="wcag-info-criterio">
 
Comprobación '''semiautomática'''.
 
La verificación requiere revisar el código fuente o utilizar herramientas del navegador para comprobar la presencia y adecuación de los atributos de autocompletado en los campos del formulario.
 
</div>
 
==== Procedimiento de evaluación ====
<div class="wcag-info-criterio">


<ol class="paso-list">
<ol class="paso-list">
  <li class="paso paso--preparacion">
<li><span class="paso-badge">Paso 1.</span>  
    <span class="paso-badge">Paso 1.</span> '''Apertura del documento y análisis del código.''' 
Seleccionar <strong>“Forms – Display form details”</strong>.
    Se debe abrir la página en el navegador y activar las herramientas de desarrollo (por ejemplo, la opción “Inspeccionar elemento”) para examinar el código HTML del formulario.
</li>
  </li>
<li><span class="paso-badge">Paso 2.</span>  
 
Localizar los campos de formulario que solicitan información acerca de las personas.
  <li class="paso paso--localizar">
</li>
    <span class="paso-badge">Paso 2.</span> '''Identificación de campos de datos personales.''' 
<li><span class="paso-badge">Paso 3.</span>  
    Se identifican los campos que solicitan información personal, tales como nombre, dirección, teléfono, correo electrónico o número de tarjeta.
Verificar que tienen el atributo <code>autocomplete</code> con un valor acorde a su propósito, según los criterios establecidos en
  </li>
<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>
  <li class="paso paso--verificar">
    <span class="paso-badge">Paso 3.</span> '''Revisión de atributos de autocompletado.''' 
    Se comprueba que cada campo incluya el atributo <code>autocomplete</code> con un valor adecuado, como <code>autocomplete="name"</code>, <code>autocomplete="email"</code> o <code>autocomplete="tel"</code>, según corresponda.
  </li>
 
  <li class="paso paso--consistencia">
    <span class="paso-badge">Paso 4.</span> '''Verificación de coherencia y cobertura.''' 
    Se valida que los atributos de autocompletado se apliquen de forma coherente a todos los campos relevantes y que no existan inconsistencias o valores erróneos.
  </li>
</ol>
</ol>


</div>


==== Ejemplo ====
|wcag_resultado_evaluacion=
<div class="wcag-info-criterio">
Los campos incluyen el atributo <code>autocomplete</code> con valores coherentes al propósito del campo.
 
Ejemplo de campo correctamente identificado:


|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
<div class="accessibility-card">
<pre class="wcag-codigo-html"><code>
Se incluye un codigo con autocomplete "email" correspondiente al campo de datos.
<label for="tarjeta">Número de tarjeta de crédito</label>
<input id="tarjeta" type="text" autocomplete="cc-number">
</code></pre>
</div>
 
El valor <code>cc-number</code> permite que el navegador identifique el tipo de información esperada y ofrezca funciones automáticas de autocompletado o validación.


</div>
<pre class="wcag-codigo-html">&lt;label for="correo"&gt;Correo electrónico&lt;/label&gt;
&lt;input id="correo" type="email" autocomplete="email"&gt;</pre></div>


==== Otras herramientas de evaluación ====
|wcag_otras_herramientas_evaluacion=
<div class="wcag-info-criterio">


Pueden emplearse herramientas de desarrollo o extensiones del navegador, como **Web Developer Toolbar**, **axe DevTools** o **Accessibility Insights**, que permiten verificar si los campos del formulario disponen de atributos <code>autocomplete</code> coherentes con el tipo de dato solicitado.
|wcag_otras_herramientas_evaluacion=
<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>
}}

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»