Sin resumen de edición |
|||
| Línea 33: | Línea 33: | ||
</html> | </html> | ||
[[Categoría: Visual total]] | [[Categoría:Visual total]] | ||
[[Categoría: Motriz]] | [[Categoría:Motriz]] | ||
[[Categoría: | [[Categoría:Formularios]] | ||
[[Categoría: | [[Categoría:Nivel-AA]] | ||
[[Categoría:Versión-2.0]] | |||
=== Descripción y comprensión del criterio === | |||
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. | |||
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. | |||
Por ejemplo, un campo destinado al número de teléfono debería poder identificarse como tal a través del código. | |||
==== Descripción resumida ==== | |||
<div class="wcag-info-criterio"> | |||
Cada campo que recopila datos personales debe estar correctamente identificado en el código fuente. | |||
Esta identificación se logra mediante el uso de tecnologías estándar de la web, como los atributos de autocompletado de HTML. | |||
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> | </div> | ||
==== Objetivo ==== | ==== Objetivo ==== | ||
<div class="wcag-info-criterio"> El | <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> | </div> | ||
==== Importancia de cumplir el criterio ==== | ==== 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"> | <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> | </div> | ||
=== Evaluación del criterio === | === Evaluación del criterio === | ||
==== Tipo de comprobación ==== | ==== Tipo de comprobación ==== | ||
<div class="wcag-info-criterio"> 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 ==== | ==== Procedimiento de evaluación ==== | ||
<div class="wcag-info-criterio"> | <div class="wcag-info-criterio"> | ||
<span class="paso-badge">Paso 1.</span> | <ol class="paso-list"> | ||
<li class="paso paso--preparacion"> | |||
<span class="paso-badge">Paso 1.</span> | |||
<strong>Apertura del documento y análisis del código.</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> | |||
<span class="paso-badge">Paso 2.</span> | <li class="paso paso--localizar"> | ||
<span class="paso-badge">Paso 2.</span> | |||
<strong>Identificación de campos de datos personales.</strong> | |||
Se identifican los campos que solicitan información personal, tales como nombre, dirección, teléfono, correo electrónico o número de tarjeta. | |||
</li> | |||
<span class="paso-badge">Paso 3.</span> | <li class="paso paso--verificar"> | ||
<span class="paso-badge">Paso 3.</span> | |||
<strong>Revisión de atributos de autocompletado.</strong> | |||
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> | |||
<span class="paso-badge">Paso 4.</span> | <li class="paso paso--consistencia"> | ||
<span class="paso-badge">Paso 4.</span> | |||
<strong>Verificación de coherencia y cobertura.</strong> | |||
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> | |||
</div> | </div> | ||
==== Ejemplo ==== | ==== Ejemplo ==== | ||
<div class="wcag-info-criterio"> | <div class="wcag-info-criterio"> | ||
**Ejemplo de campo correctamente identificado:** | |||
<div class="accessibility-card"> | |||
<pre class="wcag-codigo-html"><code> | |||
<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> | |||
==== Otras herramientas de evaluación ==== | ==== Otras herramientas de evaluación ==== | ||
<div class="wcag-info-criterio"> | <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. | |||
</div> | |||
Usuarios más afectados
Personas con discapacidad visual total - Barrera grave
Personas con discapacidad motriz – Barrera moderada
Personas con discapacidad cognitiva – Barrera moderada
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.
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.
Por ejemplo, un campo destinado al número de teléfono debería poder identificarse como tal a través del código.
Cada campo que recopila datos personales debe estar correctamente identificado en el código fuente.
Esta identificación se logra mediante el uso de tecnologías estándar de la web, como los atributos de autocompletado de HTML.
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.
El criterio tiene como finalidad optimizar la introducción de datos en los formularios y facilitar su comprensión.
Su cumplimiento permite:
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.
Puede consultarse el tutorial del W3C sobre autocompletado en formularios: Autocompletado en formularios (en inglés)
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.
autocomplete con un valor adecuado, como autocomplete="name", autocomplete="email" o autocomplete="tel", según corresponda.
<code> <label for="tarjeta">Número de tarjeta de crédito</label> <input id="tarjeta" type="text" autocomplete="cc-number"> </code>
El valor cc-number permite que el navegador identifique el tipo de información esperada y ofrezca funciones automáticas de autocompletado o validación.
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 autocomplete coherentes con el tipo de dato solicitado.
