Norma Europea EN 301 549: Estructura (Parte 2)

Debido a lo extensa que es la Norma EN 301 549, en la entrada anterior realicé un resumen de la primera parte de esta norma. Y ahora toca continuar explicando todos y cada uno de los capítulos.

Norma Europea EN 301549 (2ª parte)

Norma EN 301 549: Segunda parte

Capítulo 6: Requisitos sobre la comunicación bidireccional por voz

Se aplica a productos TIC en la que es posible la comunicación entre personas, como por ejemplo, los teléfonos móviles.

Para comprender mejor este capítulo, vamos a tomar como ejemplo una aplicación de videoconferencia. Estas aplicaciones pueden permitir la comunicación por vídeo o sólo por voz.

Este capítulo tiene varios apartados, que son:

6.1 Ancho de banda para voz.

6.2 Funcionalidad de texto en tiempo real

6.3 Identificador de llamadas

6.4 Alternativas a los servicios basados en voz

6.5 Comunicación mediante vídeo

6.6 Alternativas a los servicios basados en vídeos

En el caso de que se produzca una comunicación en tiempo real (RTT), el estándar define requisitos sobre la simultaneidad de texto y voz.

Establece también la diferenciación entre el texto de entrada y el de salida, así como la interoperabilidad y el tiempo de respuesta.

Capítulo 7: Requisitos sobre sistemas de vídeo

Este capítulo se aplica a productos TIC que tienen la capacidad de grabar o transmitir vídeos, como un aparato reproductor de discos o una aplicación para reproducir multimedia.

7.1.1 Se debe gestionar adecuadamente los subtítulos para personas sordas.

7.1.2 y 7.1.3 Se debe sincronizar los subtítulos con la pista de audio y preservando el subtítulado existente al transmitir el vídeo.

 7.2.1, 7.2.2 y 7.2.3 Se debe gestionar la audiodescripción para aquellas personas que no ven reproduciendo y sincronizando dicho canal de información.

7.3 Se debe permitir el control a los usuarios para el subtítulo y la audiodescripción.

Capítulo 8: Hardware

Este capítulo de la norma se enfoca a los productos TIC personales que tengan componentes hardware, como los ordenadores, las tabletas y los móviles. Por lo que, quedan excluidos las páginas web y las aplicaciones móviles

Tiene los siguientes apartados, que son:

8.1 Generalidades: requisitos genéricos, conexiones normalizadas y color.

8.2 Productos de hardware con salida de voz: incremento del volumen de voz, gama de volumen de voz, control fino de volumen, acoplamiento magnético, dispositivos de telefonía fija y de comunicación inalámbrica.

8.3 Acceso físico a las TIC: generalidades, superficie libre, cambio de nivel, aproximación frontal y paralela, anchura libre para pies y rodillas, alcance para la TIC frontal (superior no obstaculizado, inferior no obstaculizado y obstaculizado) y lateral (superior no obstaculizado, inferior no obstaculizado y obstaculizado), visibilidad e instrucciones de instalación.

8.4 Elementos accionables de forma mecánica: teclas numéricas; accionamiento (modo, fuerza) de elementos mecánicos; llaves, billetes y abonos.

8.5 Indicación táctil del modo de voz

 

Capítulo 9: Contenidos Web

Este capítulo se aplica a todo lo relacionado con los contenidos web: sitios web e intranets.

La Norma 301 549 es totalmente compatible con las Pautas de Accesibilidad al Contenido Web 2.0

En la nota 1 se indica que, al evaluar sitios web, estos se evalúan como páginas web individuales. Las aplicaciones web, aplicaciones web para móviles, etc. están cubiertas bajo la definición de página web, que es bastante amplia y cubre todos los tipos de contenido web.

Tiene dos apartados:

9.2 Requisitos para el contenido web: incluye todos los criterios de conformidad A y AA (38 en total) de las WCAG 2.0, haciendo referencia directamente a los mismos. Por tanto, el apartado 9.2 tiene 38 subapartados, del 9.2.1 al 9.2.38, uno por cada criterio de conformidad de las WCAG 2.0

9.3 Requisitos de conformidad de las WCAG 2.0: incluye los 5 requisitos de conformidad de las WCAG 2.0 (Nivel de conformidad; Páginas completas; Procesos completos; Uso de tecnologías exclusivamente según métodos que sean compatibles con la accesibilidad; Sin interferencia)

Capítulo 10: Documentos electrónicos no web

En este capítulo se recogen requisitos que se aplican a documentos electrónicos que no sean páginas web o que no estén incrustados en páginas web.

Algunos ejemplos de documentos son cartas, hojas de cálculo, correos electrónicos, libros, imágenes, presentaciones, EPUB o PDF.

En el apartado 10.2 se establece que deben cumplir con todos los criterios de conformidad hasta el nivel AA de las WCAG 2.0 (38 en total), excepto cuatro criterios:

10.2.20 “Evitar bloques” (2.4.1)

10.2.24 “Múltiples vías” (2.4.5)

10.2.31: “Navegación coherente” (3.2.3)

10.2.32: “Identificación coherente” (3.2.4)

Los apartados en los que deberían incluirse (10.2.20, 10.2.24, 10.2.31, 10.2.32) se mantienen, pero vacíos. De esta manera se mantiene la coherencia de la numeración de los requisitos en los diferentes capítulos. Así, el requisito 9.2.15 (Teclado, equivalente al 2.1.1 de las WCAG 2.0) es igual al 10.2.15 o al 11.2.2.15, independientemente de que se eliminen criterios en sus respectivos listados.

Por otro lado, se añaden dos criterios:

10.2.39 Colocación de los subtítulos. Cuando el documento no web contiene medios sincronizados con subtítulos, estos no deben ocultar información relevante en el medio sincronizado.

10.2.40 Sincronización de la audiodescripción. Cuando el documento no web contiene medios sincronizados con audiodescripción, esta no debe interferir con la información de audio relevante en el medio sincronizado.

Capítulo 11: Software

En este capítulo se recogen todos los requisitos que se refiere a software que no es web.

En el subapartado 11.2.1 se incluyen los requisitos cuando no se están proporcionando funcionalidades “cerradas”. Se listan todos los criterios de conformidad, y estos son los 38 de nivel A y AA de las WCAG 2.0, pero con varias peculiaridades:

No se referencia directamente al criterio de las WCAG como en el capítulo 9. Esto es así porque incluye las notas “Additional Guidance When Applying Success Criterion xxxx to Non-Web Documents and Software” del documento del W3C Guidance on Applying WCAG 2.0 to Non-Web Information and Communications Technologies (WCAG2ICT)

NO se incluyen 6 criterios de conformidad que presumiblemente no aplican al software, como son:

11.2.1.20 “Evitar bloques” (2.4.1)

11.2.1.21 “Titulado de las páginas” (2.4.2)

11.2.1.24 “Múltiples vías” (2.4.5)

11.2.1.28 “Idioma de las partes” (3.1.2)

11.2.1.31 “Navegación coherente” (3.2.3)

11.2.1.32 “Identificación coherente” (3.2.4)

11.2.2 Criterios de conformidad (con funcionalidades cerradas)

En el subapartado 11.2.2 se incluyen los requisitos cuando sí se están proporcionando funcionalidades “cerradas”. En este caso solo se mantienen 12 de los 38 requisitos A y AA de las WCAG 2.0, y se van poniendo en relación con los requisitos definidos en el capítulo 5.

11.3 Interoperabilidad con los productos de apoyo

Cuando el software es una plataforma,

  • la aplicación tiene que usar los servicios de accesibilidad de la plataforma (11.3.2.3)
  • ofrecer información sobre objetos, tablas, valores, etiquetas, jerarquía visual, texto, acciones, etc
  • permitir que los productos de apoyo realicen acciones en nombre del usuario (11.3.2.5 al 11.3.2.17).

 

Cuando el software sea un producto de apoyo, utilizará los servicios documentados de accesibilidad de la plataforma. También puede utilizar otros servicios documentados de accesibilidad.

Los requisitos son los siguientes y solo se aplican si el software no proporciona funcionalidades cerradas, de lo contrario se aplicaría el capítulo 5.1:

11.3.2.5 Información del objeto

11.3.2.6 Fila, columna y cabeceras

11.3.2.7 Valores

11.3.2.8 Relaciones de etiquetado

11.3.2.9 Relaciones padre-hijo

11.3.2.10 Texto

11.3.2.11 Lista de acciones disponibles

11.3.2.12 Ejecución de acciones disponibles

11.3.2.13 Seguimiento del foco y de los atributos de selección

11.3.2.14 Modificación del foco y de los atributos de selección

11.3.2.15 Notificación de cambios

11.3.2.16 Modificaciones de los estados y propiedades

11.3.2.17 Modificación de valores y texto

11.4 Uso de las características de accesibilidad documentadas

Cuando el software es una plataforma, el usuario debe tener control sobre las características de accesibilidad documentadas destinadas a los usuarios.

Cuando el software tiene una interfaz de usuario, este no debe interferir o alterar las características de accesibilidad documentadas de la plataforma, excepto cuando el usuario lo solicite durante el uso del software.

11.5 Preferencias de usuario

Se aplica cuando el software proporciona una interfaz de usuario. Las preferencias de usuario en la configuración de la plataforma abarcan el color, el contraste, el tipo de fuente, el tamaño de fuente y el cursor del foco. Se exceptúa el software que se diseña para aislarse de la plataforma subyacente y que por tanto no tiene acceso a la configuración de las preferencias de usuario en la plataforma.

11.6 Herramientas de autor

Los requisitos para las herramientas de autor son:

  • deben permitir crear contenido que se ajuste a los requisitos de accesibilidad
  • se debe preservar la información de accesibilidad de los contenidos
  • la herramienta debe proporcionar sugerencias para corregir los problemas de accesibilidad
  • tiene que haber plantillas accesibles (11.6.5)

 

Capítulo 12 Documentación y servicios de atención al cliente

Se aborda la documentación de apoyo y los servicios de apoyo.

  • deberá proporcionar información sobre las características de accesibilidad y compatibilidad (12.1.1)
  • deberá ser un documento accesible (12.1.2)
  • deberán informar sobre características de accesibilidad (12.2.2)
  • deberán adaptarse a las necesidades de comunicación de las personas con diversidad funcional (12.2.3)
  • deberán ofrecer documentación accesible (12.2.4)

 

Capítulo 13. Servicios de intermediación y emergencia

Trata los servicios de intermediación de texto, de signos, de lectura de labios, de voz a voz; y los servicios de telefonía con subtítulos. También se aborda propiamente el acceso a los servicios de intermediación y emergencia.

 

Norma Europea EN 301 549: Estructura (Parte 1)

Después de hacer un repaso general sobre la normativa en España, toca hacer un repaso sobre la Normativa Europea sobre accesibilidad web. La última versión de la norma se pubicó en 2015.

Normativa europea: EN 301 549

La norma ha sido adoptada al catálogo español como UNE-EN 301 549 por parte de AENOR, la entidad responsable del desarrollo de las normas técnicas en España. Por tanto es aquí donde podéis encontrarla en español.

Sin más dilación. os voy a hablar de la estructura de la Norma Europea de accesibilidad EN 301 549Requisitos de accesibilidad de productos y servicios TIC aplicables a la contratación pública en Europa”.

Estructura de la Norma EN 301 549

En la norma se definen 213 requisitos y 26 recomendaciones.

estructura_EN301549

El estándar comienza con el alcance de la norma y algunas referencias y definiciones y abreviaturas en los tres primeros capítulos.

En el capítulo cuatro se encuentran las declaraciones de prestación funcional, donde se establecen diferentes diversidades funcionales y cómo llevar a cabo con las soluciones adecuadas.

¿Qué son las declaraciones de prestación funcional?

En el contexto de la Norma EN 301 549, hace referencia a la funcionalidad que se requiere para satisfacer las diferentes necesidades de los usuarios.

Este capítulo está dividido por dos apartados:

Apartado 4.1: Cómo cumplir las declaraciones de prestación funcional.

Apartado 4.2: Descripción de las diferentes necesidades de los usuarios y por qué es necesario tenerlas en consideración.

4.2.1 Sin visión. Algunos usuarios son ciegos, por tanto la TIC debe ser posible usarla sin visión. Los audios y los vídeos deben ser de utilidad.

4.2.2 Visión limitada o baja visión. Deben existir posibilidades para los usuarios puedan usar la interfaz y regular los costrastes de color. El audio es otro ejemplo para las personas con baja visión.

4.2.3 Percepción del color. Algunos usuarios son daltónicos, por lo qe se debe tener en cuenta esta dificultad visual. Si los colores constituyen la información fundamental, se debe sustituir por texto.

4.2.4. Sin audición. Hay usuarios que no pueden oír, por los interfaces deben ayudar a las personas sordas.

4.2.5. Deficiencia auditiva. Para estos usuarios es importante tener un audio claro y sin ruido de fondo, y la posibilidad de controlar el volumen.

4.2.6 Capacidad vocal. Algunos usuarios no pueden hablar, por lo tanto las TIC se deben usar sin necesidad de voz. Un ejemplo de ello, sería el uso de teclados.

4.2.7 Manipulación o fuerza limitada. Para los usuarios con problemas motores, con la TIC debe ser posible facilitar su uso con una sola mano. También la manipulación y el habla pueden ayudar a estos usuarios.

4.2.8 Alcance limitado. Los usuarios en silla de ruedas.

4.2.9. Sensibilidad a los destellos. Se deben reducir el número de destellos y de luz.

4.2.10. Problemas cognitivos. Se debe proporcionar características que permitan su uso por usuarios que no puedan entender interfaces complejas. Hacerlo intiutiva y fácil para ese grupo.

4.2.11 Privacidad. El uso de auriculares es un ejemplo de ello.

La norma contiene tres anexos:

 

Una vez explicado el capítulo 4, hablaremos sobre el anexo B, donde se establece la relación entre las declaraciones de prestacion funcional y las necesidades de los usuarios. Es un anexo muy interesante porque te hace comprender el impacto que los problemas de accesibilidad pueden tener en los usuarios finales.

Tenemos en cuenta la tabla siguiente:

Tabla de relaciones de la EN 301 549

Para comprender la tabla, primero hay que saber qué significan las abreviaturas. Estas abreviaturas tratan sobre las necesidades de los usuarios de este capítulo que estamos viendo.

Así es que la 4.2.1 “WV” significa “With vision” (Sin visión) y así sucesivamente cada uno de ellos.

¿Qué grupo de usuarios queda afectado por cada requisito?

Tenemos que tener en cuenta que hay dos relaciones:

P: Relacion primaria

Esto significa que el requisito es compatible con la declaración de prestación funcional de ese grupo de usuarios en particular.

S: Relación secundaria

Esto significa apoyo parcial para la declaración de prestación funcional porque algunos usuarios pueden usar la función en algunas situaciones específicas.

Vamos a analizar la tabla con un ejemplo:

Los requisitos tecnicos se enumeran de manera vertical y las declaraciones de prestación funcional de manera horizontal.

Si vemos este ejemplo, tenemos el requisito que hace referencia al uso del volumen de un auricular privado, la tabla se lee así:

La tabla tiene una P para el soporte primario para el requisito 4.2.1 “WV” (Sin visión). Esto significa que el requisito soporta la declaración funcional para los usuarios que no pueden ver. En otras palabras, si proporcionan la posibilidad de controlar el volumen cumplirá una de las necesidades de los usuarios ciegos.

En el requisito 4.2.5, se marca con S, porque si los usuarios tienen problemas de audición, el volumen de los auriculares es muy importante, por lo tanto, satisface parcialmente esas necesidades. No todos los usuarios usan auriculares, pero si lo hacen el volumen es muy importante.

Continuando con los diferentes capítulos que contiene la norma, se describen los siguientes:

  • Capítulo 5: Requisitos genéricos, que sirven para todas las TIC.
  • Capítulo 6: Requisitos TIC con comunicación bidireccional por voz.
  • Capítulo 7: Requisitos TIC con capacidades de vídeo
  • Capítulo 8: Hardware
  • Capítulo 9: Requisitos sobre contenido web
  • Capítulo 10: Requisitos sobre documentos
  • Capítulo 11: Software no web
  • Capítulo 12: Documentación y servicios de apoyo
  • Capítulo 13: Acceso de servicios de retransmisión o emergencia.

 

A partir de aquí, paso a desarrollar cada uno de los capítulos. Empiezo por el 5 y los demás los dejo para otra entrada para que no se haga demasiado extenso  el post.

Capítulo 5: Requisitos genéricos. Funcionalidad cerrada.

¿Qué es la funcionalidad cerrada?

La funcionalidad cerrada consiste en los que los usuarios no pueden utilizar tecnologías de apoyo propias, (lector de pantallas). Esta situación podría darse por ejemplo, en máquinas de venta de entradas. (tickets).

Para que los dispositivos con sistema de funcionalidad cerrada funcione para todos los usuarios, el sistema debe proporcionar alguna manera para que los usuarios interactúen y perciban la información. Esto significa que el propio sistema debe funcionar con tecnología de apoyo.

Un ejemplo de producto con funcionalidad cerrada sería un cajero automático. Esto implica que debe ser accesible por sí mismo, sin ayudas externas.

Para ello, tendrá que cumplir los siguientes requisitos:

  • Debe permitir su uso sin visión, con la que tendrá salida por voz
  • La salida por voz tiene que tiene que tener relación con la salida visual, para ayudar a los que tengan dificultades visuales
  • También tiene que poder pararse y repetirse cada vez que los usuarios lo necesiten
  • Deberá incluir descripción de elementos no visuales y la narración de vídeos.
  • Se deberá tener especial cuidado con la información personal y con no reproducir contraseñas
  • La salida por voz deberá tener un volumen suficientemente alto para personas con problemas de audición, con posibilidad de reajuste rápido al cambiar de usuario.
  • Es importante que la información esté en el mismo idioma que el contenido mostrado.
  • Debe incluir la información necesaria para que los usuarios sepan que se han realizado las transacciones.
  • Debe incluir un tamaño del texto adecuado, que sirva a las personas con baja visión.
  • Deberá ofrecer alternativas al uso del teclado.

 

Para seguir leyendo sobre la Norma EN 301 549, aquí tienes la segunda parte.

 

 

 

 

 

 

 

 

 

 

Accesibilidad y usabilidad web: Diferencias

Introducción

Me apetecía escribir esta entrada porque me encuentro a gente que me ha preguntado que no sabe muy bien cuál es la diferencia entre la accesibilidad web y la usabilidad web. O que no les queda del todo claro. Hay gente que puede pensar que las dos palabras significan lo mismo, pero no es así.

Estos dos conceptos están muy relacionados pero NO son lo mismo.

Para comprender esto mejor, vamos a establecer una definición sencilla:

  • accesible: que se puede acceder a él
  • usable: que sea fácil de usar

 

Accesibilidad web y usabilidad web: Diferencias

A partir de ahí, hay que plantearse el dilema de ¿accesible/usable para quién?

En realidad no hay una respuesta exacta para resolver esta pregunta porque puede haber casos en los que habrá a quien le resulte “cómodo” acceder y usarlo y otras personas a las que no, y pueda darse el caso de que no se pueda usar.

Por ejemplo, un vídeo con mala calidad y sin subtítulos puede ser díficil de entender, pero si lo reproduces varias veces, al final te enteras de la película. Pero una persona con dificultades auditivas o sorda, por mucho que lo ponga no se entera y no lo entenderá.

Diferencias entre la accesibilidad web y la usabilidad web

La accesibilidad web consiste en hacer accesible todo lo que engloba un sitio web y todas las opciones y funcionalidades que posee. Todas las funcionalidades que posee para todas las personas usuarias.

En el caso de WordPress, aparte de tener nuestro sitio web, también hay que hacerlo con las opciones del escritorio, los widgets y los plugins. Y si hablamos del futuro editor de WordPress, Gutenberg, que se pretende implantar en las próximas versiones, todavía está muy verde y deja mucho que desear y mejorar en cuanto a accesibilidad y usabilidad web.

¿Cómo se pone en práctica la accesibilidad en la web?

Para poner en práctica la accesibilidad web hay que tener presente las Pautas de Accesibilidad al Contenido Web, así como aplicar los Roles ARIA que se usan para hacer contenido accesible para las personas con diversidad funcional.

Pongamos por ejemplo, una empresa de nombre ficticio ACUS, que se encuentra analizando un formulario.

Desde siempre hemos pensado que los formularios se podían realizar de la manera que en la siempre lo hemos hecho, poner los campos con la aplicación de sus atributos correspondientes. Y con el foco de teclado visible, claro.

Pero resulta que en la empresa tenemos un usuario ciego (al cual llamaremos Pepe), que nos comenta que él no puede acceder a los formularios de la web.

Tras conocer la noticia, los desarrolladores (que se llaman Andrés y Antonio), se vuelven locos intentando averiguar a ver de qué manera pueden solucionarle el problema a Pepe.

Pero ahí está la profesional experta en usabilidad, (de nombre Isabel), que les comenta a los desarrolladores que tienen ese problema porque no usan el etiquetado correcto en los formularios.

Si consiste en un problema grave que imposibilita llegar al objetivo a los usuarios, estamos hablando de un problema de accesibilidad. El objetivo de la accesibilidad es que se pueda usar por todas las personas.

Si quieres más información sobre este tema, la explico detalladamente en otras entradas de este blog:

Consejos para llevar a cabo la accesibilidad web

Cómo hacer formularios accesibles

 

¿Cómo llevamos a cabo la usabilidad?

La usabilidad consiste en conocer la experiencia que tiene el usuario cuando navega por el sitio, que nos cuenten las dificultades que se encuentran en el proceso, cuando están realizando una tarea determinada (realizar una compra, una venta, rellenar un formulario de registro…).

Entrando en materia os pongo una frase de uno de los mayores expertos en usabilidad, Steve Krug, del cual ha escrito un libro sobre el tema que es muy interesante y os lo recomiendo como lectura: “No me hagas pensar”.

¿Cuál es el objetivo de todo esto? ¿Qué quiero decir con esto?

Muy sencillo, que no hay que hacer pensar a los usuarios, que hay que ponérselo fácil y cómodo. Que, entre otras cosas, los usuarios que navegan por tu web son lo más importante que hay que en tener en cuenta. ¿Por qué? Porque si no lo tienes accesible ni usable, tu web no sirve para nada. Por muy bonita que esté y tenga un buen diseño, si no es usable, los usuarios no podrán interactuar con ella. Pueden ser posibles clientes potenciales y al no poder interactuar y no tenerlo accesible, no obtienes beneficios. Así de simple.

Por eso es importante saber que la usabilidad va enfocada desde el punto de vista del usuario, así como conocer sus inquietudes, qué puede y no puede hacer, qué piensa, cómo interactúa al realizar determinadas tareas y principalmente, conocer sus problemas. Y con todo esto, intentar buscar las soluciones más adecuadas a sus necesidades.

Siguiendo el ejemplo de la empresa: Andrés y Antonio, después de un intenso día de trabajo,  llegan muy ilusionados a su casa, sabiendo que han aprendido algo nuevo. Y con la ilusión, van y se lo enseñan a su madre. Y la señora al ver el formulario, se encuentra con unos campos con un asterisco en algunas de ellas, en las cuales no sabe qué tiene que hacer. No entiende qué tiene que hacer. Y les pregunta que cómo lo tiene que rellenar. Tras hacer los ajustes pertinentes, comprueban que ya ha entendido cómo hacerlo y procede a rellenarlo sin problemas.

Es decir, en este ejemplo que hemos explicado, hemos mejorado la usabilidad de los formularios.

Para finalizar, el objetivo de la usabilidad es que pueda ser usado fácilmente por un grupo de usuarios concreto. En este caso caso, las personas mayores.

Para que algo sea fácil de usar, es necesario que se pueda usar. Por eso, para un mismo perfil de usuario, usable implica accesible (pero no al revés). O dicho de otra manera, la accesibilidad es condición necesaria (pero no suficiente) para la usabilidad.

Conclusión

Hay que recordar varias cosas importantes.

  • Si algo no es accesible, no es usable.
  • Si algo no es usable, no es accesible.
  • Algo puede ser accesible pero puede no ser usable.

 

Si se da alguna de estas cirscuntancias, tenemos problemas de usabilidad web.

 

Entradas relacionadas:

Usabilidad web: ¿Qué es UI y UX? Diferencias

 

Accesibilidad web: Diversidad funcional motriz

Diversidad funcional motriz

Cuando hablamos de diversidad funcional motriz nos estamos refiriendo a personas que tienen dificultades a nivel físico y que puede afectar a todo: a nivel físico, vista, oído, al movimiento del cuerpo, al habla o a la deglución.

Accesibilidad web: Diversidad funcional motriz

En mi caso, hablamos de una patología llamada Parálisis Cerebral Infantil. Es una patología que afecta a 2 de cada 1000 personas. Esta patología se caracteriza por un trastorno psicomotor. Los problemas psicomotrices están acompañados de alteraciones cognitivas, de comunicación y percepción. Dependiendo de la zona del cerebro afectada se pueden observar desde movimientos involuntarios, espasmos y rigidez en los músculos, así como disfunciones visuales y auditivas.

Clasificación de la Parálisis Cerebral Infantil

Para entender mejor la parálisis cerebral vamos a establecer los diferentes tipos que hay:

Espástica: Es el grupo más numeroso, que se caracteriza por la rigidez en los músculos. Se puede dar hipertonía hiperreflexia e hiperflexión.

Atetósica: Se caracteriza por tener movimientos involuntarios, muecas por dificultades en la cara y torpeza al hablar. Se puede dar afectación de pérdida auditiva.

Atáxico: Son personas que tienen mal equilibrio corporal, muestran inseguridad en la marcha y dficultades en la coordinación y el control de las manos y los ojos.

Mixta: En este caso, es más raro de encontrar casos puros de espasticidad, atetosis o ataxia, lo normal es que se dé una mezcla de todas ellas.

¿Cómo acceden a la web las personas con dificultades motrices?

En el caso de las patologías motrices, como por ejemplo, la parálisis cerebral, hay muchos tipos y diferentes grados dependiendo de la zona afectada. Debido a esto, la persona tendrá más o menos autonomía, pero en la gran mayoría de los casos, las personas con esta patología suelen utilizar dispositivos de apoyo, como por ejemplo:

Licornio: dispostivo que se coloca en la cabeza que ayuda a escribir a las personas que tienen dificultades en las manos. Para usar el licornio debe tener un buen control del cuello para llevar la varilla hasta donde necesite.

Persona utilizando un licornio para el ordenador

Varilla de boca/joystick de boca/barbilla: estas personas usan una varilla para ir pulsando sobre el teclado tecla a tecla para escribir el texto. También lo pueden usar adaptado para las manos.

Varilla de boca, adaptada también para las manos

Tableros de pictogramas: Un tablero de pictogramas sirve para que todas aquellas personas que tienen dificultades del habla, puedan comunicarse a través de los movimientos de los ojos o señalando al icono que representa un sentimiento o la necesidad de la persona en ese momento.

Diversidad funcional motriz:Tablero de pictogramas

¿Qué son los sistemas de comunicación aumentativa y alternativa?

Los sistemas aumentativos complementan el lenguaje oral, cuando por sí solo no es suficiente para mantener una conversación.

Los sistemas alternativos sustituyen al lenguaje oral cuando éste no es comprensible o está ausente.

Los sistemas de comunicación aumentativa y alternativa varían en función de las características e intereses de la persona y su entorno.

Aquí os dejo algunos ejemplos de este tipo de ayudas técnicas para estos usuarios.

  • Plaphoons: Es un sistema de comunicación por pictogramas, donde pueden expresar su mensaje o lo que les dé la gana de forma totalmente independiente. También contiene opciones para usar un conmutador de barrido automático. También se puede usar para la lecto-escritura o con teclado alfabético.
  • Irisbond: Sistema de tecnología eyetracking avanzado (sistema de comunicación con la mirada), que no sólo usan personas con parálisis cerebral, sino también personas con otras patologías motrices como la Esclerosis Lateral Amiotrófica, la Esclerosis Múltiple, etc.
  • GoTalk 9+ Es otro sistema de comunicación.

 

Conmutadores y pulsadores de presión y soplo: El conmutador simple de soplido o aspiración consiste en un sensor que permite detectar presiones positivas (soplido) o negativas (aspiración) ejercidas mediante la boca.

También existen otros conmutadores que se activan por el tacto, por la mano o por el pie.

Teclado de una sola mano: Estos teclados son teclados adaptados para personas que sólo pueden usar una sola mano.

Teclado de una sola mano

Teclado en pantalla: El teclado en pantalla es necesario para todas aquellas personas que por problemas de movilidad en las manos y tengan que acceder a él desde teclado.

Acceso por pulsador: Normalmente, funcionan por barrido con un pulsador para acceder a la casilla del pictograma deseado. O también si se seleccionan las teclas directamente.

 

Uso de audios y vídeos

Si la afectación se produce a nivel auditivo tenemos que hablar de diversidad funcional auditiva.

Si las personas están escuchando un audio y ese audio no dispone de transcripción: Para llevar a cabo la accesibilidad hay que escribir la transcripción del audio para que las personas con dificultades auditivas puedan disfrutar de su contenido.

Con los audios con contenido multimedia, es decir, los vídeos, también hay que tener en cuenta la accesibilidad web añadiendo subtítulos al contenido que está visualizando. También es necesario que tenga un botón para dar la opción a los usuarios de abrir o cerrar los subtítulos. En WordPressTV si vas a visualizar un vídeo no aparece esa opción, lo cual es un problema de usabilidad. Los subtítulos han de contener dos líneas como máximo y tener entre 35 o 40 caracteres.

En algunos casos, debido al grado de afectación de las personas sobre todo, al escribir por un teclado y la espasticidad que genera, estas personas se pueden cansar. Por lo que es recomendable un sistema de reconocimiento de voz para facilitarles las cosas.

Sistema de reconocimiento de voz

Uso del teclado

Debido a la gran complejidad de esta patología y sus diferentes grados de afectación, hay personas que por sus movimientos involuntarios y el control de los movimientos tienen dificultades para usar el ratón. Por esto, es necesario, que tengamos siempre la opción de acceso por el sitio web a través de teclado, y que tenga el foco visible, tal y como indica el criterio 2.4.7 de las WCAG 2.0

Muchas personas con esta patología están afectados intelectualmente y hacen uso de los iconos para orientarse por la web.

Uso de ratones

Ratones virtuales: Son programas informáticos cuyas opciones de movimiento y funciones de clic aparecen en pantalla. Suelen utilizar un pulsador y un sistema de barrido para facilitar el uso del programa de comunicación.

Ratones de cabeza: Los movimientos de la cabeza realizados por el usuario se transforman en movimientos del puntero. De esta forma seleccionan directamente en la pantalla: la letra, la palabra, el pictograma, etc., según qué sistema se esté utilizando. Algunos ratones de cabeza necesitan una cámara web para su uso.

Control del ratón por el iris: Este sistema permite a personas con grandes dificultades de movimiento, controlar el puntero del ratón con la mirada.

Ratón controlado por pulsadores: Cada conmutador realiza un tipo de click, izquierdo y derecho. El ratón sigue conservando toda su funcionalidad habitual

Diveridad funcional motriz: Ratón por pulsador

Cómo comunicarse con personas con parálisis cerebral

  • Si hablas en su presencia, no le des la espalda y ten en cuenta que puede entender todo lo que dices.
  •  Permanece atento/a a sus gestos, ya que quizás quiera comunicarte algo o usar sistemas alternativos de comunicación.
  •  Cuando no sepas qué hacer o cómo hacerlo, pregúntale directamente. Te dirá como quiere ser ayudada. Pídele opinión acerca de las cosas.
  •  Si no entiendes lo que te dice, pídele que lo repita las veces que haga falta. Como todas las personas, lo que desea es ser comprendida.
  • En una conversación, dale tiempo para acabar sus frases y razonar sin interrumpirle.
  • Háblale mirándola a la cara cuando quieras decirle algo, no se lo digas a través de terceros. Sabrá cómo responderte, incluso instará a su acompañante para que te conteste si es necesario, pero con su consentimiento.
  • Deja que pueda adoptar sus propias decisiones, esto facilitará que pueda escoger y tomar iniciativas. Ofrécele solo la ayuda necesaria y complementaria.
  • Piensa que estás ante una PERSONA y, a partir de ahí, actúa como te gustaría que lo hicieran contigo. Procura no hacer etiquetaciones y evita que no te incluyan a ti en ninguna.
  • Ten en cuenta que su escala de valores puede ser distinta. A veces lo que para ti es una tarea rutinaria para ella es todo un logro. Háblale, por ello, de sus capacidades, no de sus limitaciones.
  • Comunícate con esa persona según su edad cronológica y mental. No la trates como a un niño pequeño.

 

 

 

 

 

 

 

 

 

 

Usabilidad: ¿Cómo hacer formularios usables?

Como ya comenté en otras entradas, es importante establecer formularios accesibles para las personas que usan lectores de pantallas. En esta entrada voy a intentar explicar un poco cómo mejorar la usabilidad de los formularios.

Formularios usables

Tenemos que tener presente que los formularios son el medio de interacción más importante del sitio web, puesto que es donde los usuarios pueden realizar las diferentes tareas, (compras, registros, envíar correos, etc.)

Muchos de los problemas de usabilidad en los formularios se producen porque son poco usables y están mal estructurados. Esto hace que los usuarios cometan errores fácilmente.

Lo que hay intentar siempre es que los usuarios rellenen los formularios sin ninguna dificultad y que sean entendibles.

Para ello, voy a mencionaros una serie de ejemplos de la mala usabilidad de los formularios para comprender por qué se cometen tantos errores.

¿Campos obligatorios o no?

Vamos a tener en cuenta esta imagen:

Errores de usabilidad

Bien, en principio aparentemente no hay ningún problema, ¿no? ¿Se entiende bien?

Yo tengo una duda: ¿Qué significa ese asterisco que hay justo al lado del texto?

Cuando estamos rellenando un formulario, la persona que entra por primera al sitio web y te quiere hacer una consulta no tendrá ni idea de lo que tiene que hacer. Es importante especificar qué es lo que significa. Los usuarios no se pueden sentir perdidos.

Hay quienes optan por poner entre paréntesis “necesario”, en vez de “obligatorio”, porque es un término más amigable. Pero de las dos maneras es igualmente válido.

Cuantos menos campos se usen, mejor

Si hacemos un formulario con muchos campos, será más difícil de rellenar para los usuarios. Es importante sólo pedir la información justa y necesaria. Y si tenemos que pedir información importante como un DNI, hay que saber qué campos se establecen como obligatorios y cuáles no. Pero lo dicho, cuanto menos campos pongamos estaremos dando más facilidades a los usuarios y se sentirán más cómodos.

Formularios en una sola columna

Los campos de formularios es mejor ponerlos de una sola columna, ya que la hora de rellenar los datos tiene un orden ascendente y no hace que los usuarios tengan que dirigir la mirada dos veces para rellenar el formulario, y así evitamos que los usuarios se pasen los campos por alto.

Usando bien los colores para mejorar la legibilidad

La legibilidad es muy importante en un sitio web. Por ello, los colores que se deben utilizar deben ser los adecuados. Sobre todo, hay que tener en cuenta a las personas con problemas de visión y/o daltonismo. Y no sólo eso, sino también hay que aplicar los contrastes de color tal y como establecen las WCAG 2.0.

Usando checkboxs

Para facilitar las cosas en los formularios, es muy útil utilizar checkboxs ya que sirven para seleccionar opciones entre varias. Es necesario agrupar los campos visualmente de forma clara con las etiquetas correspondientes, para que las personas que usen lector de pantallas los puedan usar.

Errores de formulario

Los usuarios tienen que saber en todo momento lo que ocurre mientras usan la web. Por eso, cuando alguien rellena un formulario y comete un error, se le debe informar del error. Porque lo que el usuario espera es obtener resultados y que les lleve a otra página.

Hay que destacar los campos que han dado error, pero no lo podemos basar únicamente en el color. Hay que acompañarlos de un icono de error que lo identifique.

Cuando se produzca un error, el formulario no debe resetearse, es decir, los campos no erróneos deben seguir manteniendo la información en ellos introducida.

Captchas

Una cosa muy importante a tener en cuenta son los captchas. Que mucha gente cree que un captcha no es problema para la accesibilidad y usabilidad y sí que lo es.

Los lectores de pantalla no interpretan los captchas de suma o de otra operación matemática. Por lo que es un problema para las personas con dificultades cognitivas.

Tampoco son muy accesibles los captchas de sonido para las personas con problemas de audición, o los que tengan el texto distorsionado que sabemos que dificultan la lectura para los que no ven o para las personas con dificultades visuales.

Hay que usar los formularios con cabeza para no crear una mala experiencia de usuario.

Límite de tiempo

No hay que establecer un límite de tiempo para complementar el formulario.

Política de privacidad

Siempre hay que informar a los usuarios de la política de privacidad para que completen el formulario con total confianza.

Formularios largos

Si los formularios son muy extensos no se pueden poner columnas, sino que es importante dividir en páginas bien rotuladas que indiquen al usuario los pasos del proceso (por ejemplo Paso 3 de 4). El usuario debe poder volver a los pasos anteriores.

Hay que mantener la consistencia en los formularios

Cuando vamos a rellenar un formulario deben aparecer todos los campos en un mismo idioma para que los usuarios puedan rellenarlos con facilidad.

De nada sirve poner, por ejemplo, un campo en español y otro en inglés del tipo:

<label for="name">Tu nombre (requerido):</label>
<input id="name" name="name" type="text"

<label for="email">Tu email (required):</label>
<input id="email" name="email" type="text"

Si nos fijamos en estos dos campos, una persona con dificultades cognitivas o intelectuales puede tener problemas a la hora de rellenar este formulario porque puede que no entienda que significa la palabra “required” al estar en inglés.

Es por eso, que hay mantener la consistencia y ser coherentes con lo que estamos haciendo. O bien ponemos el formulario en inglés o bien en español.

¿Campos a la derecha o a la izquierda?

Todos los campos deben estar verticalmente alineados entre sí a la izquierda.
¿Cómo alinear las etiquetas entre sí: a la derecha, a la izquierda o las colocamos encima del campo?

  • Si tenemos que rellenar datos que son familiares (y no son muchos): Etiquetas en vertical encima del campo.
  • Cuando necesitemos ajustar el espacio vertical: Etiquetas a la izquierda del campo, alineadas a la derecha.
  • Sí hay que ajustar el espacio vertical, y los datos no nos son familiares o son complejos: Etiquetas al lado del campo, alineadas a la izquierda.

 

Vamos con un ejemplo de un formulario con problemas de usabilidad:

formulario no usable

Si por ejemplo, nos encontramos con este formulario, así a simple vista es imposible rellenarlo. ¿Qué información hay que rellenar en cada campo? No tengo ni idea.

No se sabe tampoco si los campos son necesarios o si son opcionales, precisamente porque no hay nada.

Para finalizar, toca hablar del criterio 3.2.6, que establece la versión a recomendación de las WCAG 2.1, que denomina “Cambios de estado”. Este criterio hace referencia a que los usuarios cuando rellenan un formulario tienen que enterarse de que se ha enviado. Por lo que una vez enviado el formulario, debe aparecer un mensaje del tipo: “El formulario se ha enviado con éxito”.

 

Accesibilidad web: Cómo influye en el SEO

Teniendo en cuenta lo que es la accesibilidad web y qué es lo que significa, vamos a hablar de una serie de factores importantes para comprender cómo influye en el SEO.

Accesibilidad web y SEO

Limitaciones personales y tecnológicas

Partiendo de la definición de que la accesibilidad web beneficia a las personas con diversidad funcional (y a todos), existen una serie de limitaciones aparte de las que son derivadas de la propia condición de la persona.

Limitaciones personales: El tener una diversidad funcional no siempre implica que sea visual, auditiva, motriz o intelectual, sino que puede ser derivada de la edad, de la inexperiencia con el mundo de las TIC (Tecnologías de la Información y de la Comunicación), o por un problema temporal. También puede ser debido a que están aprendiendo un idioma o al nivel educativo de los usuarios.

Limitaciones tecnológicas o derivadas del entorno: Pueden darse situaciones muy diferentes, como una conexión lenta a intenet, un ambiente con mucho ruido, poca visibilidad, navegación sin imágenes, navegación sin ratón, etc.

Técnicas SEO para mejorar el posicionamiento

  • Una de la técnicas es facilitar el rastreo e indexación de las páginas por parte de los motores de búsqueda y que se realice por los téminos relevantes para esa página.
  • Conseguir que Google considere la página relevante. Para ello, hay ciertos factores que influyen, como la velocidad de carga de la página o la temática de las páginas que enalazan con la nuestra, etc.

Google es un usuario ciego

Google como tal, no ve las imágenes ni los vídeos, ni interpreta las animaciones y sus características no se diferencian mucho de las que se tratan en la accesibilidad web. Hay que pensar en él como un usuario más. Es la razón por la que muchas de las técnicas que se aplican repercuten de manera directa y positiva en su indexación.

Accesibilidad web y SEO: Técnicas de las WCAG 2.0.

Ahora vamos a hablar de algunos criterios y vamos a ver la relación que tienen con la accesibilidad, cómo influye y por qué es beneficioso para el SEO.

Alternativas textuales para elementos no textuales

Según el criterio 1.1.1, las imágenes deben tener un texto alternativo que proporcione la misma información o funcionalidad que pretende transmitir la imagen. Desde el punto de vista de la accesibilidad web, el texto alternativo de una imagen permite que las personas que no pueden ver, cual es el contenido de la fotografía gracias al lector de pantalla.

Con el SEO los buscadores sólo entienden texto y pueden interpretar los diferentes contenidos no textuales (fotos, vídeos, audios), gracias a las alternativas textuales.

Título e idioma de las páginas

Según el criterio 2.4.2, las páginas deben tener un título o temática que describa su propósito. En la técnica G88 se establece que el título debe tener sentido fuera de contexto y ha de ser corto.

Con el criterio de conformidad 3.1.1 “Idioma de la página”. Se debe indicar el idioma de la página. Esto beneficia a todos las personas porque pueden identificarla con rapidez.

Desde el punto de vista SEO, nos dice sobre qué trata y ayuda a mejorar la indexación de la página en la web.

Enlaces

Los criterios de conformidad 2.4.4 y 2.4.9 hablan del propósito de los enlaces. Establece que no hay que usar enlaces ambiguos y que los enlaces deben tener un destino claro.

Con el SEO, cuanto más fácil sea el texto del enlace, más fácil será interpretarlo para los motores de búsqueda.

Encabezados y marcado semántico

En el criterio 1.3.1 se establece que hay que separar el contenido de la presentación. También que hay que respetar la semántica del etiquetado en HTML y CSS.

En el criterio 2.4.1 se establece que hay estructurar el contenido mediante encabezados. Los encabezados deben usasrse de forma coherente y sin saltarse niveles.

Según el criterio 2.4.6, los encabezados deben ser claros e identificar la sección del contenido que encabezan.

Es importante también establecer los encabezados de sección, como se indica en el criterio 2.4.10.

Desde el punto de vista SEO, si la página se carga sin CSS se pueden identificar los títulos, las listas y el texto resaltado. Esto mismo se aplica a los motores de búsqueda.

Por otro lado, el marcado semántico y un uso correcto de los encabezados hacen que los motores de búsqueda indexen mejor la página.

Separación entre contenido y presentación

El criterio 4.1.1 hace referencia al uso del lenguaje de marcado de acuerdo a su especificación, y que se puede validar mediante un validadador automático, por ejemplo, el del W3C.

En el criterio 1.1.1, que ya hemos visto anteriormente se indica que las imágenes se deberían incluir en las CSS, para separar el contenido de la presentación. Por este mismo motivo se debe evitar el uso de tablas, tal y como establecen las técnicas H73 y G140.

El criterio 1.4.5 establece que se debe utilizar texto en vez de imágenes de texto, aunque se admiten excepciones, por ejemplo, para los logotipos.

Para el SEO, que ocurra esto es muy bueno porque genera páginas más ligeras y disminuye el tiempo de carga, lo cual es un factor relevante para el posicionamiento. Además de esto, las páginas tienen un código más claro y más limpio.

Mapa web y navegabilidad

El criterio de condormidad 2.4.5 indica que se debe establecer varías vías para localizar una página web dentro del sitio. Se pueden utilizar diferentes técnicas: enlaces a páginas relacionadas, tablas de contrenidos o un mapa web.

En el criterio 2.4.8 se indica que hay que proporcionar información al usuario acerca de su ubicación. Las técnicas que se pueden emplear son: uso de las migas de pan, un mapa web o incluir un mapa de navegación semántica.

También se establece en el criterio 2.2.1, que las redirecciones deben ser claras para el usuario, como por ejemplo, usando las redicciones del servidor 301.

Para el SEO, los motores de búsqueda deben ser capaces de llegar a todas las páginas web de nuestro sitio. Incluir migas de pan y enlaces relacionados ayuda a que se pueda acceder a todas las páginas.

Legibilidad

El criterio 3.1.3 indica que se debe aclarar el signicado de las jergas y las palabras inusuales, con un glosario de definiciones.

El criterio 3.1.4 establece que se debe explicar el significado de las abreviaturas, en el propio texto o en el atributo title del elemento <abbr>.

Ee el criterio 3.1.5 se indica que se debe adecuar el nivel de lectura del texto y su legibilidad para todos los usuarios. Para ello se puede emplear: textos con imágenes que ayuden a explicar las ideas, incluir menos lectura o hacer el texto más fácil usando palabras sencillas.

Desde el punta de vista SEO, el hecho de establecer un texto sencillo y claro, incluyendo la explicación de las jergas permite abarcar más posibilidades de búsqueda.

 

 

Usabilidad web: Introducción, principios y beneficios.

Para definir el concepto de usabilidad, vamos a hacerlo primero preguntando qué es la usabilidad.

Usabilidad: Ibntroducción, principios y beneficios

¿Qué es la usabilidad?

La palabra usabilidad viene del inglés usability, que hace referencia a la facilidad de uso con la que las personas pueden usar una herramienta particular, cualquier interfaz o cualquier otro objeto con la finalidad de alcanzar un objetivo determinado.

Tras esta definición, si hablamos de usabilidad web se refiere a la facilidad con la que nuestros visitantes utilizan la web. Es decir, si al realizar determinadas tareas son capaces de terminarlas.

La Organización Internacional para la Estandarización (ISO) nos da dos definiciones de usabilidad.

ISO/IEC 9126

La usabilidad se refiere a la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones específicas de uso.

ISO/IEC 9241

Usabilidad es la eficacia, eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico.

Tanto una definición como la otra, hace enfásis a la funcionalidad y a la calidad de uso, no sólo del producto, sino también de cómo los usuarios realizan tareas específicas de su uso.

 

Principios básicos de la usabilidad web

Jakob Nielsen define el concepto de usabilidad como el “atributo de calidad que mide lo fáciles que son las intefaces web”. En 1995 llevó a cabo lo que se denomina el Plan Heurístico, que consta de cuatro puntos.

  1. Identificar el problema.
  2. Definir el plan para solucionar el problema
  3.  Realizar el plan establecido,
  4. Analizar el resultado

 

En otra entrada os hablaré de Steve Krug, otro experto en usabilidad y su libro “No me hagas pensar” y Haz fácil lo imposible”

A continuación, os resumo brevemente los principios básicos de la usabilidad.

Escucha y conoce a los usuarios

Es importante saber cómo se comportan los usuarios y cuáles son sus destrezas, hay que conocer las razones por la que los usuarios utiliza tu web y saber cuál es su propósito. Así, al utilizarla conocerás sus expectativas.

Relación con el sistema

Hay que utilizar palabras que sean familiares para los usuarios. La información debe presentarse en un orden lógico y natural.

Optimiza las operaciones

  • Intenta que los usuarios lleguen a sus objetivos en el menor tiempo posible.
  • Reorganiza la web en función de las necesidades que tengan.
  • Dar libertad a la hora de trabajar, estableciendo diferentes posibilidades de acceso u opciones. También hay que darle a los usuarios la posibilidad de subsanar los errores, ya que es normal equivocarse.

Reduce la memorización

Hay que hacer visibles las opciones y acciones para que los usuarios no tengan que recordar la información del sitio web. Es muy beneficioso para las personas con dificultades intelectuales, por lo que es importante mantener la consistencia.

Diseño estético y minimalista

Elimina toda la información innecesaria. No recargues el diseño de tu sitio web. Es importante no distraer al usuario con mucha información, y además porque puede cansarse. Es mejor mostrar sólo lo justo y necesario.

En este principio basta con recordar una frase: “Menos es más”.

Gestiona los errores

Hay que ofrecer mensajes de error claros para que los usuarios sepan qué es lo que ocurre, como por ejemplo, los errores 404. Pero puede ocurrir que haya gente que no conozca qué son los errores 404, y hay que sustituirlo por un mensaje más familiar como: “Página no encontrada” y proporcionar un enlace para volver atrás y no se vayan del sitio web.

Flexibilidad y eficiencia de uso

Hay que tener un sitio web adaptado para todo tipo de usuarios, desde los novatos hasta los más expertos. Si conseguimos que el sitio lo use el mayor número de usuarios, obtendremos flexibilidad.

La teoría está muy bien, pero para poder aplicarla tenemos que saber cómo y cuándo podemos encontrarnos problemas de usabilidad.

¿Cuándo tenemos un problema de usabilidad en la web?

Vamos a poner una serie de problemas que se pueden dar:

  • Cuando hay problemas para completar una tarea
  • Cuando se saca al usuario del camino
  • Cualquier cosa que genere confusión en los usuarios.
  • Cuando se producen errores.
  • Cuando los usuarios no ven algo que deberían haber visto.
  • Cuando los usuarios dan por hecho que algo es correcto cuando no lo es.
  • Cuando los usuarios piensan que han terminado una determinada tarea y no es así.
  • Cuando los usuarios realizan una acción equivocada.
  • Cuando se malinterpreta el contenido.
  • Cuando no se entiende la navegación en la web.
  • Cuando un usuario tiene que dar muchísimos clics para llegar al objetivo.
  • Cuando hay que esperar mucho tiempo a que la página cargue.
  • Cuando en la web nos encontramos cosas que no deseamos ver.

 

Si tenemos en cuenta estos consejos a la hora de tener en cuenta los problemas de usabilidad conseguiremos una serie de beneficios, que los vamos as enumerar a continuación:

Beneficios de la usabilidad

  • Se reduce el aprendizaje y el esfuerzo.  Es beneficioso para todas aquellas personas que tengan cualquier dificultad, cuanta más precisa la información y menos haya que hacer, mejor.
  • Disminuyen los costes de asistencia y ayuda al usuario, haciendo que los usuarios se sientan más seguros. Esto hace que disminuyan los errores cometidos por el usuario.
  • Se optimiza el coste de diseño y mantenimiento.
  • Aumenta la tasa de conversión de los visitantes al sitio web, es decir, saber cuántas personas completan el proceso de una tarea determinada.
  • Para los usuarios es más fácil navegar por la web, estableciendo bien los pasos a seguir. Si no ocurre esto, el usuario se puede sentir frustrado y se va.
  • Mejora el prestigio del sitio web y la imagen de la empresa.
  • Incrementa la productividad y reduce el estrés de los usuarios.
  • Aumenta la velocidad de carga de los sitios webs. Reduciendo el peso del sitio web hace que los usuarios visiten más páginas en menos tiempo. Intentar que la web cargue en menos de cinco segundos.
  • Poner un cuadro de búsqueda para que puedan encontar más rapidámente la información que están buscando en el sitio web.
  • Establecer formularios accesibles y usables, para que los usuarios puedan completar las tareas correctamente. De nada sirve tener un buen diseño de la web, si luego los usuarios no pueden contactar con nosotros, o no pueden realizar una venta o cualquier tarea.

 

Antes de acabar, me gustaría decir qué es lo que hay saber para tener en cuenta la usabilidad. Aquí va una serie de preguntas claves sobre cómo debe ser:

  • Útil: ¿Hace algo que la gente necesita hacer?
  • Comprensible: ¿Puede imaginarse la gente cómo usarlo?
  • Recordable: ¿Tiene la gente que reaprenderlo cada vez que lo usan?
  • Eficaz: ¿Realizan el trabajo?
  • Eficiente: ¿Hace esto en una razonable cantidad de tiempo y esfuerzo?
  • Deseable: ¿Lo quiere la gente?
  • Delicioso: ¿Usarlo es agradable y divertido?

 

Si quieres continuar aprendiendo, aquí te dejo una entrada sobre cómo hacer formularios usables, y cuáles son las diferencias entre accesibilidad y usabilidad web.

 

 

 

 

Accesibilidad web con Roles ARIA.

Navegación accesible con roles WAI-ARIA

Una de las cosas importantes a tener en cuenta para la accesibilidad web es usar los roles ARIA. Para hacerles la vida más fácil a los usuarios que usan lector de pantallas hay que estructurar la navegación a través del sitio web.

roles ARIA

Ya comentamos que lo importante que es la estructuración del contenido en otra entrada y en la que di una serie de consejos.

Para orientarse a través de un sitio web, los usuarios que usan lector de pantallas van pulsando diferentes teclas para navegar por la web: listas, saltar entre encabezados, ojear las imágenes, etc.

Por ejemplo, para ojear los encabezados, siempre que tenga bien estructurados los encabezados, las personas que usen lector de pantallas, pulsarán la tecla “h” para ir navegando por ellos.

¿Cómo saltan entre los diferentes bloques de contenido?

Cuando hablamos de bloques de contenido hace referencia a la cabecera, la zona de navegación, el contenido principal, el cuadro de búsqueda y el pie de la página. Las WCAG 2.0, establece la especificación WAI ARIA, que consiste en establecer unos roles que sirven para crear contenidos web accesibles.

¿Qué es un rol?

La misión del rol es definir el papel que juegan los elementos dentro del documento web.

Landmark Roles

Los landmarks roles, que son los llamados puntos de referencia. Son los que identifican las diferentes partes o zonas de una página.

Si usamos los puntos de referencia, estaremos respetando la semántica de la estructura de la página. También es muy importante introducir los enlaces de “saltar contenido”.

Incluir el rol del elemento es muy sencillo, sólo hay que incluir el atributo
roleal elemento.

Por ejemplo, ponemos un div, seguido de la palabra role, y el rol que le asignamos al elemento en función de lo que corresponda. Un ejemplo:

 <div role=”landmark_role”>…</div>

Landmarks roles o puntos de referencia

Ahora vamos a ver los diferentes landmarks roles. Vamos a establecer cada una de las partes de un sitio para que sea accesible.

  • Banner
  • Complementary
  • Contentinfo
  • Form
  • Main
  • Navegation
  • Search
  • Region

 

Roles en HTML

Role=”banner”.

Este rol se utiliza para establecer la cabecera de la página, la que contiene el logotipo y el título principal. Sería el equivalente a la etiqueta <header> de HTML5. En la especificación de HTML5 también se admite el rol presentation.Este rol debe ser único en la página.

Role=”complementary”

Se trata de una sección complementaria del contenido principal. En HTML 5 sería el equivalente a la etiqueta <aside>. También puede tener el rol de search, note o presentation.

Role=”Contentinfo”

Es una sección que se coloca en la parte inferior de la página, lo que sería el pie de página. Su equivalente en HTML5 es la etiqueta <footer>. También puede tener el rol de presentation. Pero sólo deberíamos marcar un <footer> como contentinfo.

Role=”form”

Es el rol que se usa para establecer un formulario. En HTML5 se añadiría el rol a un elemento form o a un div. Si se trata de un formulario de búsqueda se usaría search.

Para hacerlo accesible para una persona que accede a nuestra web con un lector de pantalla hay que usar la etiqueta label.

Role=”main”

Este rol debe ser único por página. Se trata del contenido principal del documento. En HTML5 sería el equivalente a la etiqueta main.También admite el rol presentation.

Role=”navigation”

Es lo que en HTML5 se marcaría con la etiqueta <nav>, lo que sería un menú de navegación. Puede haber varios menús, por ejemplo, uno en la parte superior (el principal) y otro en la columna izquierda. También admite el rol presentation.

Si ponemos en el pie de página un menú, no hace falta marcarlo, ya lo hacemos con el rol contentinfo.

Role=”search”

Es lo que sería el cuadro de búsqueda de la página. En HTML5 no existe un elemento equivalente, por lo que se incluiría dentro de un div.

Role=”region”

Este rol, en recomendación de WAI-ARIA 1.1 pasó de los Document Structure Roles a los Landmark Roles. Se trata de una sección que contiene contenido relevante o específico. Debe tener una etiqueta label. Si una página incluye más de un region cada uno debe tener una etiqueta única.

Etiquetas con “aria-label” o “aria-labelledby”

ARIA nos proporciona unos mecanismos para agregarles etiquetas y descripciones a los elementos. Es la forma que tiene de proporcionar ayuda accesible o textos descriptivos.

Se puede hacer con los atributos “aria-label” y “aria-labelledby”.

aria-label

Con aria-label se pone la etiqueta dentro del atributo, lo que elimina el etiquetado nativo.

aria-label="Menú principal"

aria-labelledby

Se indica el ID del elemento que hace de título en esa zona.

<p id="report-title">Download 2012 Sales Report:
<a aria-labelledby="report-title pdf" href="pdf.pdf" id="pdf">PDF</a> |
<a aria-labelledby="report-title doc" href="word.doc" id="doc">Word</a> |
<a aria-labelledby="report-title ppt" href="ppt.ppt" id="ppt">Powerpoint</a></p>

A tener en cuenta: Resumen

  • Usar el rol según la especificación, es decir, respetar si solo puede haber uno de un determinado tipo, o que el contenido de la zona se corresponda realmente con el rol asignado.
  • Que todo el contenido esté englobado dentro de elementos identificados con un rol, que no haya contenido que se quede huérfano. Así, el usuario de lector de pantalla puede navegar de forma segura de “landmark” en “landmark” sin perderse nada de la página.
  • Añadir “aria-label” o “aria-labelledby” para diferenciar varias zonas con el mismo rol asignado.
  • El primer contenido de una zona marcada con un landmark role debe ser lógico, por ejemplo, el primer contenido que esperas en un landmark “main” es un encabezado. Ten en cuenta que es lo primero que le anuncia el lector de pantalla de ese área.
  • Revisa en la versión móvil, si siguen teniendo sentido.

 

Criterios de conformidad de las WCAG 2.0 asociados

La inclusión de landmark roles en las páginas está relacionado con los siguientes criterios de conformidad de las WCAG 2.0

  • 1.3.1 Información y relaciones: La información, estructura y relaciones comunicadas a través de la presentación pueden ser determinadas por software o están disponibles como texto.
  • 2.4.1 Evitar bloques: Existe un mecanismo para evitar los bloques de contenido que se repiten en múltiples páginas web.
  • 4.1.2 Nombre, función, valor: Para todos los componentes de la interfaz de usuario (incluyendo pero no limitado a: elementos de formulario, enlaces y componentes generados por scripts), el nombre y la función pueden ser determinados por software; los estados, propiedades y valores que pueden ser asignados por el usuario pueden ser especificados por software; y los cambios en estos elementos se encuentran disponibles para su consulta por las aplicaciones de usuario, incluyendo las ayudas técnicas.

Accesibilidad web: Diversidad funcional auditiva.

 

diversidad funcional auditiva

Para hablar de accesibilidad auditiva en la web, lo primero que vamos a hacer es remitirnos a la Ley 27/2007, de 23 de octubre, por la que se reconocen las lenguas de signos españolas y se regulan los medios de apoyo a la comunicación oral de las personas sordas, con discapacidad auditiva y sordociegas, que en su disposición adicional duodécima establece:

Disposición adicional duodécima. Lenguas Oficiales.

Las Administraciones Públicas deberán fomentar el pluralismo lingüístico en la utilización de las nuevas tecnologías de la Sociedad de la Información, en particular en los ámbitos territoriales en que existan lenguas propias.

También hay que decir que, desde que entró en vigor la Lengua de Signos Española (LSE), el 24 de ocubre de 2007, también está equiparada a cualquier lengua del Estado.

En su artículo 14 establece lo siguiente:

Artículo 14

1. Los poderes públicos promoverán las medidas necesarias para que los medios de comunicación social, de conformidad con lo previsto en su regulación específica, sean accesibles a las personas sordas, con discapacidad auditiva o sordociegas mediante la incorporación de las lenguas de signos españolas.

2. Asimismo, los poderes públicos adoptarán las medidas necesarias para que las campañas de publicidad institucionales y los distintos soportes audiovisuales en los que éstas se pongan a disposición del público sean accesibles a estas personas.

3. Se establecerán las medidas necesarias para incentivar el acceso a las telecomunicaciones en lengua de signos española.

4. Las páginas y portales de Internet de titularidad pública o financiados con fondos públicos se adaptarán a los estándares establecidos en cada momento por las autoridades competentes para lograr su accesibilidad a las personas sordas, con discapacidad auditiva y sordociegas mediante la puesta a disposición dentro de las mismas de los correspondientes sistemas de acceso a la información en la lengua correspondiente a su ámbito lingüístico.

Una vez visto esto, vamos a explicar la importancia de comprender lo que necesitan las personas con problemas auditivos.

A este tipo de usuarios, al tener déficit auditivo les cuesta comprender el habla en la comunicación y por lo tanto, el proceso de la información.

Por ello, a la hora de diseñar webs se han de tener en cuenta varios aspectos.

¿Cómo diseñar sitios web para personas con dificultades auditivas?

Las tareas cognitivas a tener en cuenta son las siguientes.

Tarea de búsqueda visual

Consiste en buscar información o elementos en la pantalla. En las búsquedas visuales que implican palabras, por ejemplo en un menú, los sordos tienen dificultades.

En este caso, es importante apoyar las palabras con iconos cuando se pueda. Y si no se puede, tenemos que tener en cuenta su vocabulario para facilitarles las cosas. Hay que exponer o formular palabras para unas determinadas acciones, y usar esas palabras.

Tareas de atención dividida

Las páginas web tienen mucha información que se nos presenta de golpe, y hay que procesarla de manera concurrente, es decir, dividiendo nuestra atención.

Para conseguir este objetivo, primero hay que saber cómo se procesa la información las personas sordas. Para ello, tenemos que conocer el principio de compatibilidad estímulo/código de procesamiento.

En primer lugar, para entender mejor de qué hablamos, vamos a explicarlo.

En la web hay diferentes formatos en los que se puede presentar la información:

  • Por palabras escritas, para la construcción de textos o artículos de investigación.
  • Mediante habla, insertando vídeos grabados, un sistema de lectura de voz, o un audio.
  • Sonidos e imágenes.

 

Las personas oyentes tenemos dos códigos para procesar la información: El verbal y el visoespacial. El verbal con las palabras escritas y el habla, y el visoespacial con los sonidos y las imágenes.

Sin embargo, las personas sordas procesan la información con las palabras escritas y las imágenes, es decir, su procesamiento quedaría reducido por sus limitaciones. Sólo accederían a la información mediante texto e imágenes.

Tareas de navegación

Las personas, cuando tienen algún tipo de limitación, siempre desarrollan capacidades para sacar provecho de lo que tienen. En el caso de las personas sordas tienen muy desarrolladas las habilidades visoespaciales, por lo que son mejores a la hora de navegar.

La tarea de navegación es una tarea espacial, tanto de percepción como de memoria, ya que se pueden recordar los pasos hasta donde se ha llegado: Volver atrás, seleccionar enlaces, etc. Sin estas habilidades visoespaciales las personas sordas se desorientan.

Por todo esto, se recomienda poner mapas web, que les son de de gran ayuda.

Tareas de lectura y comprensión de textos

Las personas sordas tieen problemas con la lectura, ya que ellos se comunican con la lengua de signos. Por ello, al diseñar para estas personas hay que tener en cuenta varias cosas:

  • Escribir directamente lo que se quiere decir, sin exceso de palabras.
  • Usar un vocabulario familiar.
  • Enumerar y separar las instrucciones y los procesos.
  • Resaltar puntos y palabras claves en negrita.
  • Evitar oraciones subordinadas, artículos y pronombres.
  • Evitar las frases negativas.

Tareas de manejo de ratón y escritura

La tarea del manejo del ratón es una tarea sencilla porque lo manejan igual que las personas oyentes. Por otro lado, la escritura les es un poco más difícil. Si a eso le añadimos que no tienen la posibilidad de aprender la gramática y el vocabulario es mucho más complicado.

A la hora de diseñar para una persona es más fácil activar una casilla de verificación que escribir un comentario.

Tecnicas SMIL

En las WCAG 2.0, existen unas técnicas que se utilizan para describir presentaciones multimedia, es decir, combinar texto con imágenes, audio y vídeo. Son las técnicas SMIL.

Las personas con sordera total necesitan de la lengua de signos para comunicarse. Las técnicas SMIL establecen los criterios relacionados con los audios y vídeos.

Los criterios de accesibilidad a tener en cuenta para llevar a cabo estas técnicas son:

1.2.2 Subtítulos (grabados)

1.2.4 Subtítulos (en directo)

1.2.3 Audiodescripción o Medio Alternativo (grabado)

1.2.5 Audiodescripción (grabada)

1.2.7 Audiodescripción ampliada (grabada)

 

1.2.6 Lengua de señas (grabada)

SM13: Proporcionar interpretación en lengua de señas a través de una pista de vídeo sincronizada mediante SMIL 1.0

SM14: Proporcionar interpretación en lengua de señas a través de una pista de vídeo sincronizada mediante SMIL 2.0

Lengua de Signos

La Lengua de Signos no es universal, por lo que debe adaptarse al público en cuestión.

En los vídeos, se tienen que ver los brazos, las manos y los gestos del cuerpo para que la conversación se interprete y resulte legible. Es preferible que sea una persona/intérprete a un avatar.

Pero también existe una herramienta muy buena para hacer un poco más accesibles los vídeos para las personas sordas. Se trata de la herramienta TextoSign, qiue es un traductor automático de texto a Lengua de Signos, Se pueden exportar a vídeo y se pueden integrar en los sitios webs.

Para finalizar, tengo que mencionar que en España existen alrededor de un millón de personas sordas, de las cuales cuatrocientas mil usan lengua de signos. En España sólo hay un intérprete de signos por cada 221 personas sordas. En otros países europeos, la proporción es un intérprete por cada diez personas sordas.

Aquí se ve de manera clara el gran problema que tienen las personas sordas a la hora de acceder a la web, y a la información.

Subtítulos

Para las personas sordas o con problemas de audición, los subtítulos son muy importantes.

El subtitulado para personas sordas no solo debe transcribir el diálogo o la narración, sino también la información importante como los efectos de sonidos: ruido, risas, etc.

Cuando en el vídeo hablan dos o más personas se debe distinguir a los hablantes, utilizando un color para cada personaje, y mantenerlo.

Para evitar confusiones entre los personajes y que la conversación no se pueda diferenciar por etiquetas o por colores, es recomendable poner guiones. También se pueden distinguir poniendo entre paréntesis el nombre de la persona.

Los subtítulos pueden ser abiertos, es decir, que estén siempre disponibles. o pueden ser cerrados, que pueden ser activados o desactivados por los usuarios.

Transcripciones

Las transcripciones son también importantes para todas aquellas personas que no puedan seguir los subtítulos y necesiten leer el texto sobre lo que dice más detenidamente y a su ritmo.

Puede presentarse simultáneamente con el contenido audiovisual o de manera independiente.

 

Entradas relacionadas:

Se puede leer más información sobre la diversidad funcional auditiva en la entrada: “Accesibilidad web: Confederación Estatal de Personas Sordas”

 

Acccesibilidad web: ¿Cómo hacer formularios accesibles?

Hace unos días hablé sobre consejos para llevar a cabo la accesibilidad web en WordPress, y comenté que había que hacer los formularios accesibles.

El tema de los formularios es muy amplio, por eso he decidido hacer una entrada dedicada a ello.

formularios accesibles

Para hacer formularios accesibles hay que saber etiquetar correctamente los controles del formulario. Para ello, hay que respetar la semántica, que es lo que va a permitir que los campos sean accesibles.

Campos de formulario

Cada campo de formulario está asociado a un control, que determinará qué tipo de campo es.

Para establecer la relación entre la etiqueta y el control del formulario, tal y como indica la técnica H44, hay que asociarla con el atributo forcuyo valor debe ser igual al id del control del formulario. Sólo una etiqueta puede estar asociado a cada elemento de forma única, el id debe ser único en la página.

Campos de tipo Texto:

<label for="name" > Nombre (obligatorio) </label>
<input type="text" name="nombre" id="name"

El elemento label debe usarse con los elementos <textarea> <select> y los inputs de tipo "text", "checkbox", "file" y "password."

El elemento label no debe usarse con los input de tipo imagen, porque estos se etiquetan con el atributo alt, como indica la técnica H36.

Tampoco debe usarse en los input de tipo "submit" o "reset", los cuales se etiquetan con el atributo value.

<input type="submit" name="Enviar" value="Enviar" / >

Tampoco se usa con el elemento "button", donde ya se usa el contenido como etiqueta.

<button type="submit" name="Enviar">Enviar</button>

Tipo textarea: Es la caja que aparece cuando vamos a envíar un formulario y escribimos nuestra consulta o dudas al respecto.

<label for="address">Pon tu dirección:</label><br />
<textarea id="address" name="addresstext"></textarea>

Campos con opciones: Para establecer campos donde se den opciones a elegir, a la hora de hacerlos accesibles es necesario contar con dos etiquetas, para que los campos sean reconocidos por los dispositivos de apoyo, como el lector de pantallas. Estas etiquetas son: <fieldset></fieldset>, que nos servirá para agrupar los elementos dentro del campo. Y usar la etiqueta <legend></legend> para poner un título al campo.

Para trabajar los campos con opciones existen dos tipos: de tipo checkbox, y de tipo radio.

Tipo checkbox: Estos campos permiten seleccionar más de una opción a la hora de elegir.

<fieldset>
<legend> Selecciona el tipo de envío </legend>
<p><label> <input type="checkbox" name="deliverytype" value="urgente" checked > Urgente </label></p>
<p><label> <input type="checkbox" name="deliverytype" value="acuse" > Acuse </label></p>
<p><label> <input type="checkbox" name="deliverytype" value="contrareembolso" > Contrareembolso </label></p>
</fieldset>

Y el otro tipo de campo de opciones es el de tipo radio. Se usa igual que el del tipo checkbox, pero hay que que especificar que es de tipo radio. Este tipo de campos sólo permite marcar una sola opción a la hora de elegir.

<fieldset>
<legend> Selecciona una prioridad </legend>
<p><label> <input type="radio" name="priority" value="baja" checked > Baja </label></p>
<p><label> <input type="radio" name="priority" value="media" > Media </label></p>
<p><label> <input type="radio" name="priority" value="alta" > Alta </label></p>
</fieldset>

El uso de estas etiquetas viene especificada en la técnica H71 de las WCAG 2.0.

Campos de selección: Asociar la etiqueta <label></label> para el título del grupo y el campo (select) para agrupar las opciones, y (option) para poner cada uno de los valores a seleccionar.

<label for="favteam">Elige tu equipo favorito:</label>
<select id="favteam" name="select">
<option value="1">Real Madrid CF</option>
<option value="2">FC Barcelona</option>
<option value="3">Atlético de Madrid</option>
<option value="4">Valencia CF</option>
<option value="5">Sevilla FC</option>
<option value="6">R. Betis Balompie</option>
<option value="7">Málaga CF</option>
<option value="8">RC Deportivo de La Coruña</option>
<option value="9">RCD Espanyol</option>
<option value="10">Villareal CF</option>
</select>

En la técnica H89, se especifica que hay que usar el atributotitle que sirva como ayuda a la hora de rellenar el formulario.

<label for="direccion">Dirección</label>
<input id="direccion" 
title="Address example: 101 Collins St, Melbourne, Australia" name="direccion" size="30" type="text" value="" />

En la técnica H90 se especifica que hay que indicar los controles de formulario que es obligatorio rellenar y para una buena presentación, en los campos que sean obligatorios, es preferible poner un texto antes del campo, en vez del asterisco.

Formulario con texto adyacente

Hablando de campos obligatorios, la técnica ARIA2, establece que los campos obligatorios hay que identificarlos con la propiedad aria-required.

   <label for="fname">First name: </label>
    <input type="text" id="fname" aria-required="true" />
    [required]

Otra técnica que se puede usar y es muy importante es la técnica H85, que establece la importancia del elemento optgroup, que permite agrupar las diferentes opciones (options) dentro de un campo (select)

<label for="food">¿Cuál es tu comida favorita?</label>
<select id="food" name="food">
<optgroup label="Frutas">
<option value="1">Manzanas</option>
<option value="3">Plátanos</option>
<option value="4">Peras</option>
<option value="5">Naranjas</option>
</optgroup>
<optgroup label="Verduras">
<option value="2">Zanahorias</option>
<option value="6">Pepinos</option>
<option value="7">Lechuga</option>
</optgroup>
<optgroup label="Productos de panadería y confitería">
<option value="8">Tarta de manzana</option>
<option value="9">Pastel de chocolate</option>
<option value="10">Merengue</option>
</optgroup>
</select>

Otra técnica a tener en cuenta es la G205, que establece que no se debe poner un formulario basado en el color, ya que puede dar problemas de accesibilidad a muchos usuarios, principalmente a personas que tengan problemas de ceguera al color.

Por otro lado, en la técnica G89, se explica que para evitar errores, hay que indicar a los usuarios qué tipo de formato deben aplicar. Por ejemplo, en un campo de tipo fecha:

<label for="date">Fecha (dd-mm-yyyy)</label>
<input type="text" name="date" id="date" />

Cuando en algunos casos no se pueda usar el elemento label, las WCAG 2.0 permiten utilizar el atributo title para etiquetar los controles del formulario e identificar su propósito. Este es el caso de los campos en los que hay que introducir datos por partes, como una fecha o un número de cuenta, tal y como indica la técnica H65.

<fieldset>
<legend>Fecha de nacimiento(dd/mm/aaaa):</legend>
<input type="text" id="dia" name="dia"
title="Día (dos dígitos)"/> /
<input type="text" id="mes" name="mes"
title="Mes (dos dígitos)"/> /
<input type="text" id="año" name="año"
title="Año (cuatro dígitos)"/>
</fieldset>

En la técnica G5, se especifica que no hay que poner límite de tiempo a los usuarios para rellenar los formularios. Y en el caso de que exista ese límite, poner un mecanismo para los usuarios puedan ampliar el tiempo, como establece las técnica G133.

También en la técnica G162, se indica cómo deben ser colocadas las etiquetas de los campos. Se indica que se deben colocar encima del campo o a la izquierda del campo, con los elementos textarea y select y con los input de tipo: "text","checkbox", "radio", "file" y "password".

En la técnica G167, se especifica la utilización de un botón al lado del campo del formulario para definir su finalidad, como es el caso del cuadro de búsqueda. En este caso, este campo identifica una región de una página, landmarks roles (o puntos de referencia), por lo que hay que usar el rol ARIA correspondiente para que sea detectado por los dispositivos de apoyo.

<div role="search">
<label for="busqueda">
<input id="busqueda" type="text"></label>
<button type="submit">Buscar</button>
</div>

Es muy importante tener en cuenta los Roles ARIA.

En la técnica H84 especifica que cuando tenemos que elegir entre varias opciones para navegar a una página diferente, hay que poner un botón para que el usuario lo elija libremente.

<label for="idioma">Selecciona un idioma</label>
<select name="idioma" id="idioma">
<option value="1">Español</option>
<option value="2"> Italiano</option>
<option value="12">Inglés</option>
</select>
<input type="button" name="submit" value="Cambiar de idioma">

Por todas estas razones, es importante tener en cuenta la accesibilidad de los formularios, para facilitar la vida a muchas personas.

Pero también existen otras opciones para aquellas personas que no se atrevan a usar código, lo pueden hacer mediante un plugin. Normalmente en WordPress, para establecer un formulario de contacto usamos el plugin Contact Form 7, pero lamentablemente los campos no son accesibles por defecto.

Para solucionar este problema, tenemos que instalar el plugin Contact Form 7 Accessible Defaults. Este plugin sí tiene los campos accesibles por defecto.

 

Entradas relacionadas:

Si quieres tener más información acerca de los formularios puedes leer la entrada “Usabilidad web: Cómo hacer formularios usables?”

Y si quieres aprender más sobre ellos, lee la entrada Mensajes de error en los formularios”. Otra entrada interesante para leer es “Cómo hacer un buen uso del marcador de posición en los formularios.”