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
Sin resumen de edición
 
(No se muestran 43 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
== '''1.3.5- A. Identificar el propósito de la entrada''' ==
{{CriterioWCAG
|id_wcag_criterio=1.3.5
|id_wcag_subcriterio=1.3.5-A
|wcag_titulo_criterio=1.3.5-A. Propósito de los campos de datos
|wcag_nivel=AA
|wcag_version=2.1
|wcag_principio=1_Perceptible
|wcag_principio_url=Principio_1
|wcag_pauta=1.3_Adaptable
|wcag_pauta_url=Principio_1/1.3_Adaptable
|wcag_grupo=Formularios
|wcag_subgrupo=Propósito de campos


=== Identificación general del criterio ===
|wcag_discapacidades=
<li class="discapacidad-item">
  [[Archivo:Motriz.png|20px|class=icon-discapacidad|alt=Discapacidad motriz]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad motriz|Motriz]]</span> –
  <span class="gravedad gravedad-leve">Barrera leve</span>
</li>
<li class="discapacidad-item">
  [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> –
  <span class="gravedad gravedad-moderada">Barrera moderada</span>
</li>


<html>
|wcag_lista_discapacidades=
<!-- criterio 1.3.5-A -->
[[Categoría:Discapacidad motriz]]
<article class="wcag-card">
[[Categoría:Discapacidad cognitiva]]
<section class="wcag-info">
<ul>
  <li>
    <span class="label">Nivel:</span>
    <span class="value">AA</span>
  </li>


  <li>
|wcag_texto_criterioOAW=
      <span class="label">Versión:</span>
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.).
      <span class="value">2.2</span>
  </li>


  <li>
|wcag_descripcion_resumida=
      <span class="label">Principio:</span>
Cada campo que recopila datos personales debe estar correctamente identificado mediante atributos estándar como <code>autocomplete</code>.
      <span class="value">1. Perceptible</span>
  </li>


  <li>
|wcag_objetivo=
      <span class="label">Pauta:</span>
Facilitar la introducción de datos y mejorar la comprensión del propósito de cada campo en un formulario.
      <span class="value">1.3 Adaptable</span>
  </li>


  <li>
|wcag_importancia=
      <span class="label">Categoría:</span>
Reduce la carga cognitiva y motriz de completar formularios, evitando errores y mejorando la velocidad de introducción de datos.
      <span class="value">Formularios</span>
  </li>


  <li>
|wcag_referencias=
      <span class="label">Subcategoría:</span>
<ul>
      <span class="value">Propósito de campos</span>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/html/H98 H98: Using HTML 5.2 autocomplete attributes]</span></li>
  </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>
</ul>
</section>


<section class="wcag-users">
|wcag_recursos=
  <p>'''Discapacidades afectadas'''</p>
<ul>
  <p class="sr-only">Este criterio afecta especialmente a personas con discapacidad visual total, cognitiva o motriz.</p>
<li>[https://www.w3.org/WAI/tutorials/forms/autofill/ Tutorial W3C sobre autocompletado en formularios]</li>
  <ul>
</ul>
    <li><img src="/images/4/4d/Sinvision.png" alt="Discapacidad visual total" /> Visual total – <span class="gravedad">Barrera grave</span></li>
    <li><img src="/images/0/06/Motriz.png" alt="Discapacidad motriz" /> Motriz – <span class="gravedad">Barrera grave</span></li>
    <li><img src="/images/4/40/Cognitiva.png" alt="Discapacidad cognitiva" /> Cognitiva – <span class="gravedad">Barrera moderada</span></li>
  </ul>
</section>
 
</article>
</html>
 
[[Categoría:Formularios]]
[[Categoría:Nivel-AA]]
[[Categoría:Versión-2.2]]
 
=== Descripción y comprensión del criterio ===
El propósito de los campos de introducción de datos debe ser identificable por software. 
Esto permite que los navegadores y las tecnologías de apoyo reconozcan automáticamente la finalidad del campo —por ejemplo, si se trata de un nombre, una dirección o un correo electrónico— sin necesidad de interpretación humana.
 
==== Descripción resumida ====
<div class="wcag-info-criterio">
Cada campo que recopila datos personales debe estar correctamente identificado en el código mediante tecnologías estandarizadas, como los atributos de autocompletado de HTML. 
Estos atributos permiten que los navegadores reconozcan el tipo de información esperada y ofrezcan funciones automáticas como autocompletado o validaciones contextuales.
</div>
 
==== Objetivo ====
<div class="wcag-info-criterio">
Facilitar la introducción de datos en formularios y mejorar la comprensión del propósito de cada campo. 
Identificar el tipo de información esperada ayuda a los navegadores y a las tecnologías de apoyo a ofrecer asistencia adaptada al usuario.
</div>
 
==== Interpretación práctica ====
<div class="wcag-info-criterio">
El atributo <code>autocomplete</code> debe incluir un valor que describa el tipo de dato solicitado. 
Por ejemplo: <code>autocomplete="name"</code>, <code>autocomplete="email"</code>, <code>autocomplete="tel"</code>, o <code>autocomplete="cc-number"</code>. 
Esto permite que los navegadores rellenen los datos automáticamente o los lectores de pantalla anuncien el propósito del campo.
</div>
 
==== Importancia de cumplir el criterio ====
<div class="wcag-info-criterio">
Cumplir este criterio mejora la accesibilidad cognitiva y motriz, ya que reduce la carga de escritura, los errores y el tiempo necesario para completar formularios. 
También aporta consistencia y coherencia semántica, facilitando la interoperabilidad entre dispositivos y navegadores.
</div>


==== Referencias WCAG ====
|wcag_tipo_evaluacion=Semiautomática
<div class="wcag-info-criterio">
* <span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html Understanding Success Criterion 1.3.5: Identify Input Purpose (en inglés)]</span>
</div>


==== Recursos de apoyo ====
|wcag_pasos_evaluacion=
<div class="wcag-info-criterio">
Usa la herramienta de ''' [https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es Web Developer Toolbar].'''
* [https://www.w3.org/WAI/tutorials/forms/autofill/ Tutorial W3C: Autocompletado en formularios (en inglés)] 
* [https://developer.mozilla.org/es/docs/Web/HTML/Attributes/autocomplete MDN: atributo autocomplete (en español)]
</div>
 
=== Evaluación del criterio ===
 
==== Tipo de comprobación ====
<span class="wcag-info-criterio">Comprobación '''Semiautomática'''</span>
 
==== 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> '''Abrir la página y analizar el código.''' 
Seleccionar <strong>“Forms – Display form details”</strong>.
    Se debe acceder a la página en el navegador y abrir las herramientas de desarrollo (por ejemplo, “Inspeccionar elemento”) para visualizar el código HTML.
</li>
  </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>


  <li class="paso paso--localizar">
    <span class="paso-badge">Paso 2.</span> '''Identificar los campos de entrada de datos personales.''' 
    Localizar los campos que solicitan nombre, correo, dirección, teléfono u otra información personal.
  </li>


  <li class="paso paso--verificar">
|wcag_resultado_evaluacion=
    <span class="paso-badge">Paso 3.</span> '''Revisar el atributo autocomplete.''' 
Los campos incluyen el atributo <code>autocomplete</code> con valores coherentes al propósito del campo.
    Comprobar que cada campo incluya el atributo <code>autocomplete</code> con un valor adecuado, como <code>name</code>, <code>email</code> o <code>tel</code>.
  </li>


  <li class="paso paso--consistencia">
|wcag_ejemplo_evaluacion=
    <span class="paso-badge">Paso 4.</span> '''Verificar la coherencia.''' 
<div class="accessibility-card">
    Confirmar que el atributo se aplica a todos los campos relevantes y que no existen valores genéricos o incorrectos (por ejemplo, <code>autocomplete="off"</code> sin justificación).
Se incluye un codigo con autocomplete "email" correspondiente al campo de datos.
  </li>
</ol>


</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>


==== Resultado esperado ====
|wcag_otras_herramientas_evaluacion=
<span class="wcag-info-criterio">
Los campos de entrada incluyen el atributo <code>autocomplete</code> con un valor que corresponde al propósito real de cada campo.
</span>


==== Ejemplo ====
|wcag_otras_herramientas_evaluacion=
<div class="wcag-info-criterio">
<ul>
'''Ejemplo de campo correctamente identificado:'''
<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>
<pre class="wcag-codigo-html"><code>
<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>
<label for="correo">Correo electrónico</label>
<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>
<input id="correo" type="email" autocomplete="email">
</ul>
</code></pre>
 
En este ejemplo, el valor <code>autocomplete="email"</code> permite que el navegador identifique el campo como un correo electrónico y ofrezca autocompletado o validación automática.
</div>


==== Otras herramientas de evaluación ====
}}
<div class="wcag-info-criterio">
* **Web Developer Toolbar** 
* **axe DevTools** 
* **Accessibility Insights** 
Estas herramientas permiten comprobar si los campos del formulario incluyen los atributos <code>autocomplete</code> adecuados.
</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»