Formularios accesibles según las WCAG 2.0 http://olgacarreras.blogspot.de/2009/06/formularios-accesibles-segun-l...

Ir al contenido | Versión móvil

Buscar en Usable y accesible (web & blog)

Olga Carreras Montoto

sobre mi consultoría recursos Consultoría de accesibilidad web y PDF,
usabilidad, experiencia de usuario (UX) y
blog & curriculum & servicios & descargas
arquitectura de información (AI)

< < Página de inicio

Contacto
martes, 2 de junio de 2009 carreras.olga@gmail.com

Formularios accesibles según las WCAG 2.0

Histórico de artículos
Artículos relacionados
Por temas | Por fecha | Glosario
[30-01-11] Respuesta a 25 dudas habituales sobre accesibilidad web
[27-03-09] AJAX accesible IV: Técnicas ARIA de las WCAG 2.0
[12-02-08] WCAG 2.0 Puedes seguirme en:
[28-02-08] Formularios usables: 60 Directrices de Usabilidad

Usable y accesible
Me gusta 598

Seguir a @olgacarreras 2,250 seguidores

Lo más leído sobre Accesibilidad

El objetivo de este artículo es la presentación de una serie de documentos que facilitan la
1. PDF accesibles
evaluación de la accesibilidad de los formularios de acuerdo con los criterios definidos en las
WCAG 2.0: 2. Accesibilidad y usabilidad móvil: web móvil y app
nativa
Técnicas WCAG 2.0 asociadas a la implementación de formularios accesibles
3. SEO y Accesibilidad. Accesible también para
Guía rápida de normas de accesibilidad WCAG 2.0 para formularios buscadores

4. HTML 5 y accesibilidad
Checklist para validar formularios de acuerdo con las WCAG 2.0
5. Referencia sobre legislación española relacionada
con la accesibilidad web
Documentación de interés
6. Metodologías, certificaciones y entidades
certificadoras de la accesibilidad web en España

7. Respuesta a 25 dudas habituales sobre accesibilidad

web

8. ePub accesibles

9. Herramienta de ayuda para realizar una consultoría

de accesibilidad de acuerdo a las WCAG 2.0

10. Correspondencia entre Norma UNE 139803/WCAG

Una de las cosas que más llamó mi atención cuando leí las WCAG 2.0 y sus técnicas asociadas (Techniques 1.0/WCAG 2.0
for WCAG 2.0) es el gran número de ellas que están referidas a los formularios.
11. WCAG 2.0

12. 10 razones para pasarse a las WCAG 2.0

Muchas de las prácticas que hasta ahora eran recomendables para hacer un formulario lo más usable posible
y que recopilé en "Formularios usables: 60 Directrices de Usabilidad", están ahora recogidas en las WCAG 13. Diferencias de prioridad entre los requisitos de la
Norma UNE 139803:2004 y los puntos de control
2.0 y se convierten por tanto en requisitos imprescindibles para que los formularios sean accesibles. de las WCAG 1.0

14. Consejos avanzados de accesibilidad web

A continuación presento una serie de documentos que he elaborado para evaluar la accesibilidad de los
formularios de acuerdo con los criterios definidos en las WCAG 2.0. 15. Formularios accesibles según las WCAG 2.0

16. AJAX accesible

Lo más leído sobre Usabilidad

1. Claves para la web móvil

Técnicas WCAG 2.0 asociadas a la implementación de formularios accesibles 2. Estándares formales de usabilidad y su aplicación
práctica en una evaluación heurística

3. Web Usability Guidelines–Directrices de usabilidad

Las técnicas de las WCAG 2.0 están organizadas temáticamente, pero por desgracia, la documentación de web

las WCAG 2.0 no incluye un índice de las técnicas referentes a formularios, a enlaces, etc. 4. Sirius. Nueva sistema para la evaluación de la
usabilidad web

Por ello, el primer documento que necesité elaborar fue una recopilación de las técnicas relacionadas con los 5. Arquitectura de información. Fundamentos
formularios. Dicha recopilación es extensa puesto que incluye el título de las 47 técnicas asociadas a 6. iPad, recomendaciones de usabilidad para tu web
formularios, su enlace, descripción y procedimiento de validación.
7. Wireframes

8. Usabilidad e internacionalización

9. Plantilla base XHTML

10. Cheat Sheet HTML 4.01, HTML 5, XHTML

Elements
Documento: Técnicas WCAG 2.0 asociadas a la implementación de formularios accesibles (word,
11. Formularios usables: 60 Directrices de Usabilidad
320KB). Descarga directa. Documento en inglés salvo la introducción.
12. Aceptar/Cancelar o Cancelar/Aceptar

13. Actitudes y aptitudes de un arquitecto de

información

14. Reseña: "Cómo escribir para la Web" de Guillermo

Franco

1 de 5 16/05/2013 10:55
Formularios accesibles según las WCAG 2.0 http://olgacarreras.blogspot.de/2009/06/formularios-accesibles-segun-l...

15. Reseña: "Psicología del color" de Eva Heller

Guía rápida de normas de accesibilidad WCAG 2.0 para formularios
16. Formulario con varios botones. Implementación
usable y accesible

Una vez recopiladas y estudiadas las técnicas WCAG 2.0 relacionadas con los formularios, me resultó
imprescindible la creación de un listado de normas de accesibilidad, fácil de consultar y memorizar. Etiquetas
accesibilidad certificación (7)
A continuación incluyo la lista de normas de accesibilidad y las técnicas que las avalan. Asociada a cada
accesibilidad ePub (1)
técnica indico si es una técnica "sufficient" o "advisory" (obligatoria o recomendada), así como los criterios de
accesibilidad Flash (2)
éxito asociados a cada una y su nivel (A,AA,AAA)
accesibilidad general (41)
accesibilidad javascript (9)
Es importante tener en cuenta que a veces las técnicas se aplican o no en función de unas reglas, o que el accesibilidad legislación (23)
desarrollador puede elegir entre varias técnicas para cumplir con un criterio de éxito, recopilo esta información accesibilidad metodología (12)
en el documento Checklist para validar formularios de acuerdo con las WCAG 2.0. accesibilidad multimedia (7)
accesibilidad móvil (4)
Utiliza controles de formulario de forma estándar indicando correctamente su nombre, valor y estado (H91 accesibilidad PDF (10)
- Sufficient [2.1.1 - A, 4.1.2 - A]) accesibilidad software (5)
accesibilidad sordos (2)
No limites el tiempo que el usuario dispone para completar un formulario, o dispón de un mecanismo para
arquitectura de información (2)
anular o ampliar el límite de tiempo (G5 - Sufficient [2.2.3 - AAA], G133 - Sufficient [2.2.1 - A], G198 -
CSS (2)
Sufficient [2.2.1 - A]) cursos (2)
documentación (33)
Proporciona un botón de tipo "submit" para iniciar un cambio de contexto. Si un control de formulario
general blog (27)
provoca un cambio de contexto debes informar de ello previamente (G13 - Sufficient para la 3.2.2 - A -
HTML 5 (6)
Advisory para la 3.3.2 - A, G80 - Sufficient [3.2.2 - A], H32 - Sufficient [3.2.2 - A] - , H84 - Sufficient [3.2.2 -
navegadores (10)
A], F9, F36)
noticias (33)
recursos (33)
La técnica SCR19 - Sufficient [3.2.5 - AAA] explica cómo asociar un evento ONCHANGE a una SELECT sin
redes sociales (2)
causar un cambio de contexto. reseñas (12)
SEO (3)
Indica si un campo es obligatorio en el LABEL asociado al campo, por ejemplo mediante un texto
usabilidad estándares (3)
"(obligatorio)" o mediante un asterisco explicando su significado al comienzo del formulario (H90 ? [3.3.2 - usabilidad formularios (2)
A]) usabilidad general (18)
usabilidad internacionalización (1)
Proporciona descripciones textuales (no un mero asterisco o cambio de color) para identificar los campos
usabilidad metodología (10)
obligatorios que no fueron completados (G83 - Sufficient [3.3.1 - A, 3.3.3- AA, 3.3.2 - A], F81)
usabilidad móvil (3)
Cuando se produzca un error de validación proporciona una descripción textual que: usabilidad software (2)
usabilidad textos (3)
Describa la naturaleza del problema
WAI-ARIA (3)
Informe de los valores admitidos WCAG 1.0 (5)
WCAG 2.0 (29)
Proporcione ejemplos de valores correctos o incluso propuesta de valores similares a los XHTML (4)
introducidos pero correctos (mediante corrección ortográfica por ejemplo)

Permita localizar los campos que han provocado el error (si la descripción se sitúa al comienzo del
formulario) mediante un enlace a dichos campos, y un enlace al listado de errores.

(G84 - Sufficient [3.3.1 - A, 3.3.3- AA], G85 - Sufficient [3.3.1 - A, 3.3.3 - AA], G139 - Advisory [3.3.1 - A,
3.3.3 - AA], G177 - Sufficient [3.3.3- AA], G194 - Sufficient [3.3.5 - AAA])

La técnica SCR32 - Sufficient [3.3.1 - A,3.3.3 - AA] describe cómo realizar validaciones en cliente y añadir
el texto de los errores vía DOM.

Valida los campos en cliente advirtiendo del error y devolviendo el foco al campo que produjo el error
(SCR18 - Sufficient [3.3.1- A,3.3.3 - AA] salvo para 3.3.4 - AA que es Advisory)

Los campos que requieran un formato de datos concreto (fechas, nº de cuenta, etc.) deben tener asociada
información sobre el formato esperado o un ejemplo (G89- Sufficient [3.3.2 - A, 3.3.5 - AAA])

Cuando el formulario es corto o tiene muchos campos del mismo tipo, incluir un texto de instrucciones al
comienzo del formulario en vez de repetir la información en cada campo (G184 - Sufficient [3.3.2 - A,3.3.5
- AAA])

Se debe proporcionar una página de verificación de datos que permita modificarlos cuando el formulario
supone una operación irreversible, por ejemplo de tipo financiero o jurídico (G98 - Sufficient [3.3.4 -A,
3.3.6 -AAA])

Cuando una aplicación Web ofrece la posibilidad de suprimir información, el servidor debe proporcionar
un medio para recuperar la información que el usuario ha eliminado por error (G99 - Sufficient [3.3.4 - AA,
3.3.6 - AAA])

Cuando el formulario realiza una operación irreversible (eliminar datos, transacción económica)
proporcionar un check no seleccionado por defecto del tipo "Confirmo que he revisado los campos y
deseo enviar/eliminar" (G155 - Sufficient [3.3.4 - AA, 3.3.6 - AAA])

En las situaciones en las cuales una acción no se puede deshacer, pida confirmación antes de enviar un
formulario indicando la opción seleccionada y sus consecuencias (G168 - Sufficient [3.3.4 - AA, 3.3.6 -
AAA])

Establecer un periodo de tiempo durante el cual los usuarios pueden cancelar o modificar la orden
enviada con el formulario. Debe indicarse el periodo de cancelación y el procedimiento para el mismo.

2 de 5 16/05/2013 10:55
Formularios accesibles según las WCAG 2.0 http://olgacarreras.blogspot.de/2009/06/formularios-accesibles-segun-l...

(G164 - Sufficient [3.3.4 -AA, 3.3.6 - AAA])

Debe ser evidente el campo que tiene el foco, por ejemplo el agente de usuario debe mostrar la barra
vertical parpadeante en el punto de inserción de contenido de un campo de texto o puntear el contorno de
los radios y checks (G149 - Sufficient [2.4.7 - AA])

Cada control de formulario debe tener una etiqueta visible inmediatamente después en el caso de los
radios y checks e inmediantemente delante (sobre el campo o a la izquierda del mismo) en el resto de
controles (G162 - Sufficient [3.3.2 - A], F86)

Utiliza elementos LABEL para asociar etiquetas a los controles del formulario. Asócialos de forma explícita
(H44 - Sufficient [1.1.1 - A, 1.3.1 - A, 3.3.2 - A, 4.1.2 - A], F86)

Utiliza el atributo TITLE para identificar los controles del formulario cuando el elemento LABEL no puede ser
usado. Por ejemplo, en el caso de un LABEL, un INPUT de búsqueda y una SELECT para restringir la búsqueda,
esta SELECT sin LABEL asociado llevaría el TITLE "Busca en" (H65 - Sufficient [1.1.1 - A, 1.3.1 - A, 3.3.2 - A,
4.1.2 - A)

Utiliza el atributo TITLE para proporcionar ayuda contextual en los controles del formulario (H89 - Advisory
[3.3.5 - AAA], F86)

Cuando un botón está asociado a un control de formulario (por ejemplo un campo de texto más un botón
"buscar") el botón debe situarse inmediatamente después del campo. El campo no tiene porque tener
etiqueta (de este modo se evita contenido repetido en la página) pero el texto del botón debe ser muy
claro puesto que sirve tambień de etiqueta para el control (G167 - Sufficient [3.3.2 - A])

Los nombres, etiquetas, etc. deben ser consistentes para el contenido con una misma funcionalidad
(G197 - Sufficient [3.2.4 - AA])

Informa convenientemente de que el formulario se ha enviado con éxito (G199 - Advisory [3.3.1 - A, 3.3.2
-A, 3.3.4- AA, 3.3.6 -AAA])

Proporciona un orden de tabulación lógico mediante tabindex cuando el de por defecto no es suficiente
(H4 - Sufficient [2.4.3 - A])

Agrupa semánticamente los controles relacionados, especialmente los radio y checks mediante FIELDSET y
LEGEND (H71 - Sufficient [1.3.1 - A, 3.3.2 - A])

Agrupa los OPTIONS de una SELECT mediante OPTGROUP (H85 - Sufficient [1.3.1 - A])

Usa eventos independientes del dispositivo, ofreciendo de forma redundante eventos de teclado y ratón
(SCR2 - Sufficient [2.1.1 - A, 2.1.3 - AAA], SCR20- Sufficient [2.1.1 -A, 2.1.3-AAA])

La técnica SCR35 - Sufficient [2.1.1-A, 2.1.3-AAA] explica como el evento ONCLICK es accesible desde
teclado y ratón.

El tamaño del texto introducido en los campos de un formulario debe también aumentar cuando se
incrementa el tamaño de fuente del contenido (C17 - Advisory [1.4.4 - AA], ? [1.4.8- AAA])

Identifica los campos obligatorios mediante la propiedad REQUIRED (ARIA2 - Advisory [3.3.3 - AA])

La técnica ARIA4 - Advisory [1.3.1 - A, 3.3.2 - A] explica como añadir la propiedad de forma dinámica.

Identifica el rango de valores válido mediante las propiedades VALUEMIN y VALUEMAX (ARIA3 - Advisory [3.3.3 -
AA])

Checklist para validar formularios de acuerdo con las WCAG 2.0

Una vez interiorizadas las normas de accesibilidad que deben cumplir los formularios, el siguiente documento
que me resultó necesario crear fue una herramienta de trabajo que facilitara las labores de revisión.

Este documento es una excel que tiene las siguientes columnas ordenadas por el nivel de cumplimiento
(A,AA,AA) y el tipo de técnica (sufficient, advisory o failure):

Número y enlace de la técnica

Criterios de éxito asociados y su nivel de cumplimiento

Enlace a las normas de aplicación asociadas a la técnica

Procedimiento de validación (en versión original en inglés)

Celda para indicar si se cumple o no la técnica

Celda para apuntar observaciones

3 de 5 16/05/2013 10:55
Formularios accesibles según las WCAG 2.0 http://olgacarreras.blogspot.de/2009/06/formularios-accesibles-segun-l...

Documento: Checklist para validar formularios de acuerdo con las WCAG 2.0 (Excel, 85KB).
Descarga gratuita previa aceptación del contrato coloriuris.

Documentación de interés

Documentando este artículo me encontré con uno muy bueno, que recomiendo leer de forma
complementaria: "Accessible Forms using WCAG 2.0" de Roger Hudson.

También recomiendo leer:

Formularios usables: 60 Directrices de Usabilidad

Las Elmer 2: User interface guidelines for governmental forms on the Internet (PDF), guía del Gobierno de
Noruega sobre la creación de formularios usables y accesibles.

Etiquetas: WCAG 2.0

0 1 0
Compártelo en:
Share Twittear

Share |

Listado de artículos anteriores

< < Página de inicio

3 C O M E N TA R I O S :

Anónimo dijo...

Si tenemos varias páginas con formularios que tienen una gran cantidad de campos
(cajas de texto, combos...) ¿cual es la mejor manera para alinearlos? teniendo en cuenta
que debemos aplicar su width desde el css. ¿Debemos escribir una clase por cada uno
de los elementos?

Fech a: 14 de oc tu br e de 2 00 9 17 :3 2

El i mi nar comen t ar io d e ' An óni mo' c on f ec ha de 1 4 de oct ub re de 2 009

17 :3 2

Olga Carreras dijo...

Artículo relacionado

Accessible forms using WCAG 2.0

Fech a: 14 de mar zo de 2 013 21: 2 9

4 de 5 16/05/2013 10:55
Formularios accesibles según las WCAG 2.0 http://olgacarreras.blogspot.de/2009/06/formularios-accesibles-segun-l...

El i mi nar comen t ar io d e ' Ol ga C ar reras' con f ec ha d e 14 d e mar z o de

20 13 2 1: 29

Anónimo dijo...

me gustas

Fech a: 15 de mar zo de 2 013 03: 5 6

El i mi nar comen t ar io d e ' An óni mo' c on f ec ha de 1 5 de mar zo d e 20 13

03 :5 6

P U B L I C A R U N C O M E N TA R I O E N
LA ENTRADA

Comentar como:

E N LA C E S A E S TA E N TR A D A

Crear un enlace

Entrada más reciente

5 de 5 16/05/2013 10:55