formularios accesibles según las wcag 2

Ir al contenido | Versión móvil

blogsobre mi& curriculum

consultoría& servicios

recursos& descargas

< < Página de inicio

martes, 2 de junio de 2009

Formularios accesibles según las WCAG 2.0

Artículos relacionados[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[28-02-08] Formularios usables: 60 Directrices de Usabilidad

El objetivo de este artículo es la presentación de una serie de documentos que facilitan laevaluación de la accesibilidad de los formularios de acuerdo con los criterios definidos en lasWCAG 2.0:

Técnicas WCAG 2.0 asociadas a la implementación de formularios accesibles

Guía rápida de normas de accesibilidad WCAG 2.0 para formularios

Checklist para validar formularios de acuerdo con las WCAG 2.0

Documentación de interés

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

Muchas de las prácticas que hasta ahora eran recomendables para hacer un formulario lo más usable posibley que recopilé en "Formularios usables: 60 Directrices de Usabilidad", están ahora recogidas en las WCAG2.0 y se convierten por tanto en requisitos imprescindibles para que los formularios sean accesibles.

A continuación presento una serie de documentos que he elaborado para evaluar la accesibilidad de losformularios de acuerdo con los criterios definidos en las WCAG 2.0.

Técnicas WCAG 2.0 asociadas a la implementación de formularios accesibles

Las técnicas de las WCAG 2.0 están organizadas temáticamente, pero por desgracia, la documentación delas WCAG 2.0 no incluye un índice de las técnicas referentes a formularios, a enlaces, etc.

Por ello, el primer documento que necesité elaborar fue una recopilación de las técnicas relacionadas con losformularios. Dicha recopilación es extensa puesto que incluye el título de las 47 técnicas asociadas aformularios, su enlace, descripción y procedimiento de validación.

Documento: Técnicas WCAG 2.0 asociadas a la implementación de formularios accesibles (word,320KB). Descarga directa. Documento en inglés salvo la introducción.

Buscar en Usable y accesible (web & blog)

Olga Carreras Montoto

Consultoría de accesibilidad web y PDF,

usabilidad, experiencia de usuario (UX) y

arquitectura de información (AI)

Contacto

[email protected]

Histórico de artículos

Por temas | Por fecha | Glosario

Puedes seguirme en:

Usable y accesible

Me gusta 598

Seguir a @olgacarreras 2,250 seguidores

Lo más leído sobre AccesibilidadPDF accesibles1.

Accesibilidad y usabilidad móvil: web móvil y appnativa

2.

SEO y Accesibilidad. Accesible también parabuscadores

3.

HTML 5 y accesibilidad4.

Referencia sobre legislación española relacionadacon la accesibilidad web

5.

Metodologías, certificaciones y entidadescertificadoras de la accesibilidad web en España

6.

Respuesta a 25 dudas habituales sobre accesibilidadweb

7.

ePub accesibles8.

Herramienta de ayuda para realizar una consultoríade accesibilidad de acuerdo a las WCAG 2.0

9.

Correspondencia entre Norma UNE 139803/WCAG1.0/WCAG 2.0

10.

WCAG 2.011.

10 razones para pasarse a las WCAG 2.012.

Diferencias de prioridad entre los requisitos de laNorma UNE 139803:2004 y los puntos de controlde las WCAG 1.0

13.

Consejos avanzados de accesibilidad web14.

Formularios accesibles según las WCAG 2.015.

AJAX accesible16.

Lo más leído sobre UsabilidadClaves para la web móvil1.

Estándares formales de usabilidad y su aplicaciónpráctica en una evaluación heurística

2.

Web Usability Guidelines–Directrices de usabilidadweb

3.

Sirius. Nueva sistema para la evaluación de lausabilidad web

4.

Arquitectura de información. Fundamentos5.

iPad, recomendaciones de usabilidad para tu web6.

Wireframes7.

Usabilidad e internacionalización8.

Plantilla base XHTML9.

Cheat Sheet HTML 4.01, HTML 5, XHTMLElements

10.

Formularios usables: 60 Directrices de Usabilidad11.

Aceptar/Cancelar o Cancelar/Aceptar12.

Actitudes y aptitudes de un arquitecto deinformación

13.

Reseña: "Cómo escribir para la Web" de GuillermoFranco

14.

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

1 de 5 16/05/2013 10:55

Guía rápida de normas de accesibilidad WCAG 2.0 para formularios

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.

A continuación incluyo la lista de normas de accesibilidad y las técnicas que las avalan. Asociada a cadatécnica indico si es una técnica "sufficient" o "advisory" (obligatoria o recomendada), así como los criterios deéxito asociados a cada una y su nivel (A,AA,AAA)

Es importante tener en cuenta que a veces las técnicas se aplican o no en función de unas reglas, o que eldesarrollador puede elegir entre varias técnicas para cumplir con un criterio de éxito, recopilo esta informaciónen el documento Checklist para validar formularios de acuerdo con las WCAG 2.0.

Utiliza controles de formulario de forma estándar indicando correctamente su nombre, valor y estado (H91- Sufficient [2.1.1 - A, 4.1.2 - A])

No limites el tiempo que el usuario dispone para completar un formulario, o dispón de un mecanismo paraanular o ampliar el límite de tiempo (G5 - Sufficient [2.2.3 - AAA], G133 - Sufficient [2.2.1 - A], G198 -Sufficient [2.2.1 - A])

Proporciona un botón de tipo "submit" para iniciar un cambio de contexto. Si un control de formularioprovoca un cambio de contexto debes informar de ello previamente (G13 - Sufficient para la 3.2.2 - A -Advisory para la 3.3.2 - A, G80 - Sufficient [3.2.2 - A], H32 - Sufficient [3.2.2 - A] - , H84 - Sufficient [3.2.2 -A], F9, F36)

La técnica SCR19 - Sufficient [3.2.5 - AAA] explica cómo asociar un evento ONCHANGE a una SELECT sincausar un cambio de contexto.

Indica si un campo es obligatorio en el LABEL asociado al campo, por ejemplo mediante un texto"(obligatorio)" o mediante un asterisco explicando su significado al comienzo del formulario (H90 ? [3.3.2 -A])

Proporciona descripciones textuales (no un mero asterisco o cambio de color) para identificar los camposobligatorios que no fueron completados (G83 - Sufficient [3.3.1 - A, 3.3.3- AA, 3.3.2 - A], F81)

Cuando se produzca un error de validación proporciona una descripción textual que:Describa la naturaleza del problema

Informe de los valores admitidos

Proporcione ejemplos de valores correctos o incluso propuesta de valores similares a losintroducidos 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 delformulario) 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ñadirel 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 asociadainformació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 alcomienzo 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 formulariosupone 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 proporcionarun 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 ydeseo 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 unformulario 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 ordenenviada con el formulario. Debe indicarse el periodo de cancelación y el procedimiento para el mismo.

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

Formulario con varios botones. Implementaciónusable y accesible

16.

Etiquetas

accesibilidad certificación (7)

accesibilidad ePub (1)

accesibilidad Flash (2)

accesibilidad general (41)

accesibilidad javascript (9)

accesibilidad legislación (23)

accesibilidad metodología (12)

accesibilidad multimedia (7)

accesibilidad móvil (4)

accesibilidad PDF (10)

accesibilidad software (5)

accesibilidad sordos (2)

arquitectura de información (2)

CSS (2)

cursos (2)

documentación (33)

general blog (27)

HTML 5 (6)

navegadores (10)

noticias (33)

recursos (33)

redes sociales (2)

reseñas (12)

SEO (3)

usabilidad estándares (3)

usabilidad formularios (2)

usabilidad general (18)

usabilidad internacionalización (1)

usabilidad metodología (10)

usabilidad móvil (3)

usabilidad software (2)

usabilidad textos (3)

WAI-ARIA (3)

WCAG 1.0 (5)

WCAG 2.0 (29)

XHTML (4)


2 de 5 16/05/2013 10:55

(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 barravertical parpadeante en el punto de inserción de contenido de un campo de texto o puntear el contorno delos 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 losradios y checks e inmediantemente delante (sobre el campo o a la izquierda del mismo) en el resto decontroles (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 serusado. 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 teneretiqueta (de este modo se evita contenido repetido en la página) pero el texto del botón debe ser muyclaro 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 yLEGEND (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 desdeteclado y ratón.

El tamaño del texto introducido en los campos de un formulario debe también aumentar cuando seincrementa 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 documentoque 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

Compártelo en:

Share |

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 formacomplementaria: "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 deNoruega sobre la creación de formularios usables y accesibles.

Etiquetas: WCAG 2.0

Twittear

1

0

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 cuentaque debemos aplicar su width desde el css. ¿Debemos escribir una clase por cada unode los elementos?

Fecha: 14 de oc tubre de 2009 17 :32

El iminar comen tar io de 'Anónimo' con fecha de 14 de octub re de 200917 :32

Olga Carreras dijo...

Artículo relacionado

Accessible forms using WCAG 2.0

Fecha: 14 de marzo de 2013 21:29

0

Share


4 de 5 16/05/2013 10:55

Entrada más reciente

El iminar comen tar io de 'Olga C arreras' con fecha de 14 de marzo de2013 21:29

Anónimo dijo...

me gustas

Fecha: 15 de marzo de 2013 03:56

El iminar comen tar io de 'Anónimo' con fecha de 15 de marzo de 201303 :56

P U B L I C A R U N C O M E N TA R I O E NL A E N T R A D A

Comentar como:

E N L A C E S A E S T A E N T R A D A

Crear un enlace


5 de 5 16/05/2013 10:55

formularios accesibles según las wcag 2

Documents