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.

Introducción y antecedentes

La Norma CEN (Cómite Europeo de Normalización) CENELEC (Cómite Europeo de Normalización Electrotécnica) y ETSI (Instituto Europeo de Normalización y Telecomunicaciones) aprobaron en Enero de 2014 el primer estándar europeo para productos y servicios TIC accesibles.

Además de esta norma europea, también se aprobaron tres informes técnicos relacionados con la accesibilidad que la complementan. Concretamente, son:

Mandatos de la Comisión Europea

La Comisión Europea encargó a CENELEC varios mandatos relacionados con la accesibilidad,

  •  M / 273 «Estandarización en el campo de las tecnologías de la información y las comunicaciones (TIC) para personas discapacitadas y mayores»
  • M / 283 ‘Documento de orientación en el campo de la seguridad y la usabilidad de los productos por parte de personas con necesidades especiales» (por ejemplo, personas mayores y discapacitadas). En respuesta a M / 273 y M / 283, CENELEC estableció BTWG 101-5 sobre «Usabilidad y seguridad de los productos eléctricos para personas con necesidades especiales»
  • M / 392 ‘Cláusula de limitación’. La ejecución de M / 392 fue asumida por CLC / TC 61 «Electrodomésticos y aparatos eléctricos similares – Seguridad». El objetivo del mandato era revisar la serie de normas europeas EN 60335 y enmendar, cuando corresponda, la parte 1 y la parte 2 con respecto a situaciones razonablemente previsibles en las que los niños, las personas mayores y las personas con discapacidad entren en contacto con aparatos eléctricos domésticos.
  • M / 473 para incluir ‘Diseño para todos’ en las iniciativas de estandarización.
  • M / 420 «en apoyo de los requisitos de accesibilidad europeos para la contratación pública en el entorno construido».

entre los que destaca el mandato M/376 CEN-CENELEC-ETSI EN 301 549: 2015 ‘Requisitos de accesibilidad adecuados para la contratación pública de productos y servicios de TIC accesibles en Europa’que se dio como resultado de esos tres informes técnicos arriba mencionados.

La siguiente versión de la norma se publicó en abril de 2015 sin muchos cambios.

mandato M376

La Norma EN 301 549 se actualizó el 29 de agosto de 2018. Es la v2.1.2. Se actualizó con un nuevo anexo, el anexo D, que abarca los criterios de la triple A. Estos requisitos no son de obligado cumplimiento.

Normativa europea: EN 301 549

Sin más dilación, os voy a hablar de la estructura de la Norma Europea de accesibilidad EN 301 549 «Requisitos 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» (Uso 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.

 

Anexo C

Este anexo normativo recoge los medios necesarios para determinar la conformidad con los requisitos individuales que figuran en el cuerpo de este documento.

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

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.

¿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. También se pueden dar crisis convulsivas (epilepsia) y sensoriales.

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. Hay diferentes tipos:

  • Hemiplejia espástica o hemiparesia. Este tipo afecta el brazo, la mano y a veces la pierna de un solo lado del cuerpo. Los niños con esta forma pueden tener retraso en el aprendizaje del habla, pero la inteligencia suele ser normal.
  • Diplejía o diparesia espástica. Las personas con esta forma tienen principalmente rigidez en los músculos de las piernas, mientras que los brazos y el rostro no se ven tan afectados. La inteligencia y las habilidades del lenguaje suelen ser normales.
  • Tetraparesia o cuadriparesia espástica. Este es la forma más grave de parálisis cerebral, e involucra rigidez severa en los brazos y las piernas, y un cuello blando o débil. Las personas con cuadriplejia espástica por lo general no pueden caminar y suelen tener problemas para hablar.

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áxica: 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.

Vídeo de Gema, una niña con parálisis cerebral usando IrisBond

Y aquí más ejemplos de sistemas de comunicación aumentativa y aumentativa. En ese vídeo se observa cómo usan el ratón con el mentón.

 

 

 

 

 

 

 

Usabilidad: ¿Cómo hacer formularios usables?

Introducción

Como ya comenté en otras entradas, es importante establecer formularios accesibles para las personas que usan lectores de pantalla. 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 las personas usuarias 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 se cometan errores fácilmente.

Lo que hay intentar siempre es que las personas usuarias 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. Las personas usuarias que acceden al formulario no se pueden sentir perdidas.

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 las personas usuarias. 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 y tendrán una mejor experiencia de usuario.

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

Usando checkboxs (campos de botones de rabio)

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 sobre 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: 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.

Referencia:

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»

 

Accesibilidad 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.

Cómo hacer formularios accesibles

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.»

Accesibilidad web: Diversidad funcional intelectual.

Para comprender mejor a las personas que tienen diversidad funcional intelectual hay que  conocer qué problemas existen y cómo se desenvuelven. También es importante saber cómo llevar a cabo la accesibilidad web para estos usuarios.

Diversidad funcional intelectual

Dislexia

La dislexia se trata de un trastorno que se define como la dificultad para leer y escribir correctamente. Este grupo de personas puede tener problemas en la compresión lectora, la escritura, la ortografía o las matemáticas.

Características de la dislexia

  • Dislalia: Trastorno del lenguaje que se manifiesta por la dificultad de pronunciar palabras.
  •  Confunden los fonemas, que se puede dar en el texto borroso.
  • Invierten las sílabas: «pardo» por «prado», «drala» por «ladra».
  • Confunden la derecha con la izquierda.
  • Tienen dificultades para ver palabras mal escritas.
  • Copian palabras mal aunque estén mirando cómo se escriben.
  • Dificultad en el aprendizaje de operaciones básicas (tablas de multiplicar)
  • Problemas con los caracteres: «b/d»,»u/n», «p/q», «c/e», «l/i/1», «z,n» «w/m»
  • Confusión de números: 42 por 24
  • Cometen errores de números y letras rotados: E con el número 3

Hay que recalcar que la dislexia afecta al aprendizaje, no a la inteligencia.

En cuanto a las tipografías, la gente prefiere letras curvas, y se recomienda principalmente que sean Sans-Serif, como por ejemplo, Helvética, Verdana, Tahoma e incluso Trebuchet.

Para las personas disléxicas, hay una serie de puntos que hay que tener en cuenta:

Los denominados «ríos en blanco»

Ahora bien, ¿qué es esto de un «río en blanco»? Pues es muy sencillo: Cuando justificamos el texto aparece alineado a la izquierda y a la derecha, por ambos lados. Bien, pues esta característica hace que se produzcan huecos vacíos entre las palabras.

Por tanto, una solución adecuada para evitar problemas a las personas con dislexia es alinear los textos a la izquierda, alinearlos a la derecha o bien centrarlos.

Otra solución es dejar sólo un espacio en blanco entre palabras.

Evita el efecto borroso: Los textos sobre blanco puro y texto negro suelen ser molestos para los disléxicos. Se recomienda un fondo gris sobre letra negra.
No utilizar grandes bloques de texto: Una idea, un párrafo.

Evita el efecto lavado: Esto se produce cuando el texto no se distingue bien. En este caso se recomienda usar la negrita para destacar el texto.

Consejos para mejorar la accesibilidad web a las personas con dislexia:

  • Usa una tipografía clara y que no produzca confusión.
  • Utiliza texto real y no imágenes, para permitir a los usuarios usar hojas de estilo propias.
  • El contenido debe ser claro de leer: Utiliza frases cortas, no más de 10 o 15 palabras por frase.
  • Las animaciones son una gran distracción. Si se ponen, los usuarios tienen que poder pararlas. De hecho, este es un criterio actualizado en las WCAG 2.1, en el que se obligará a parar las animaciones. (Criterio 2.2.9)
  • Las imágenes de fondo dificultan la lectura, por lo que se recomienda usar texto real.

 

Algunos usuarios con dislexia severa usan lector de pantallas. Incluso hay gente que prefiere imprimir la web y leerla impresa, por lo que hay que comprobar que la página web se imprime correctamente. Se puede crear una hoja de estilo CSS específica para impresión.

Otras personas usan herramientas de lectura asistida para que el contenido se lea directamente desde la página web, como por ejemplo, ReadSpeaker.

Afasia

La afasia es un trastorno de comunicación que se caracteriza por la dificultad de comunicarse, leer y escribir. Es la pérdida o alteración del lenguaje como consecuencia de una lesión cerebral. Puede afectar a la expresión, a la comprensión, a lectura y escritura y a la expresión gestual y facial.

Características de la afasia

  • Las personas con afasia pueden sufrir anartria, que consiste en que comprenden lo que leen, pero les cuesta pronunciar la palabra que leen.
  • Pueden tener dificultades para comprender la gramática del lenguaje (agramatismo). Por ejemplo, cuando una persona con afasia dice «Caminar perro», nos está intentando decir que quiere sacar al perro a pasear. Es decir, sabe lo que quiere, pero no lo expresa bien.
  • Expresan palabras que acaba de oír (ecolalia), o simplenmente las repite.
  • No le salen las palabras que conoce o no le salen las palabras (anomia), por lo que se se exporesa con ayuda de gestos.

 

Consejos para mejorar la accesibilidad web a las personas con afasia:

  • Usar palabras simples y oraciones cortas, hacer una lectura sencilla. En caso de usar palabras difíciles, se deben explicar.
  • Redactar textos en voz activa y poner las frases en afirmativa.
  • Tamaño minimo de fuente de 14-16 puntos.
  •  Usar tipografia Sans Serif.
  • Poner un interlineado que proporcione bloques de texto.
  • Usar dibujos lineales simples (a ser posible en blanco y negro).
  • Las imágenes deben relacionarse bien con el texto.
  • Si se escriben números, que estén identificados como números, no como palabras.
  • Para los colores, usar el texto negro sobre crema. Pero las preferencias pueden variar según los usuarios y debe permitir variaciones.
  • Se debe evitar el uso de símbolos, ya que distraen la atención.
  • Poner encabezados claros y colocarlos a la izquierda con un uso sistemático del espacio.
  • Navegación fácil y predecible, sin desplazamiento horizontal. Debe ser accesible por teclado mediante la tecla TAB.

 

Trastorno de aprendizaje no verbal: TANV

Es una dificultad en las que las personas afectadas no son capaces de interpretar el lenguaje no verbal, como el lenguaje corporal, el tono de voz y las expresiones faciales.

Características del trastorno de aprendizaje no verbal

  • Tienen dificultades con las matemáticas, con la comprensión lectora y la escritura.
  • Recuerdan la información pero no saben por qué es importante.
  • Prestan atención a los detalles, pero no captan la idea general.
  • Escriben de manera desordenada.

Consejos para mejorar la accesibilidad web a las personas con TANV:

  • Son personas que a pesar de que cuentan con un amplio vocabulario, la comprensión del significado y su contexto de uso les resulta difícil. Se recomienda una lectura fácil.
  • El uso de símbolos (pictogramas) representa una gran ventaja para este tipo de usuarios, que les ayuda a mejorar la comprensión.
  • Debido a los problemas que tienen para comunicarse, es importante que la navegación sea fácil para que les resulte cómodo reconocer y comprender lo que ven.
  • Es importante el uso de subtítulos.
  • El audio les ayuda a tener una mejor comprensión de la información.

Síndrome de down: SD

Es un trastorno generado por una copia extra del cromosoma 21, lo que se denomina trisomía.

Características del SD.

  • Tienen problemas de percepción auditiva.
  • Dificultades para expresarse y dar respuestas verbales.
  • Dificultades visuales.

Consejos para mejorar la accesibilidad web a las personas con SD:

  • Para estos usuarios el uso de los colores debe ser personalizable.
  • Los tipos de letra deben ser suficientemente grande y Sans Serif
  • Debido a este tipo de usuarios pueden tener diferentes problemas, como miopía, cataratas, estrabismo, es necesario tener la opción del aumento del tamaño del texto.
  • Establecer la configuración del puntero para que sea más fácil verlo.
  • Uso del audio para quienes tengan problemas de comprensión lectora.
  • Uso de símbolos para ayudarles a procesar la información.

 

Envejecimiento y demencia

El envejecimiento es el conjunto de transformaciones y/o cambios que se dan a lo largo a de la vida. La demencia se caracteriza por la pérdida y deterioro progresivo y persistente de las facultades intelectuales. Puede dar lugar a enfermedades como el alzheimer, demencia vascular, parkinson, etc.

Caracteristicas del envejecimiento y la demencia

  • Dificultades para realizar tareas rutinarias.
  • Problemas en el lenguaje
  • Desorientación
  • Dificultades para leer y escribir.
  • Afasia.
  • Agnosia
  • Apraxia
  • Deterioro de la memoria.

 

Consejos para mejorar la accesibilidad web a las personas con envejecimiento y demencia

  • Utilizar un lenguaje fácil, claro y directo. Se debe evitar el uso de palabras técnicas.
  • La utilización del audio puede ser de gran ayuda para estas personas.
  • Uso de enlaces con un lenguaje claro y sencillo.
  • La navegación ha de ser fácil.
  • Las fuentes que se deben utilizar son: Sans Serif, sin sombras, ni itálicas. El uso de diversas fuentes no es recomendable porque puede generar confusión en este tipo de usuarios.
  • Usar un tamaño de texto grande y que se pueda personalizar.
  • Usar un contraste de colores alto.
  • El uso de imágenes debe hacerse con cuidado porque pueden generar confusión. Las imágenes deben ser sencillas, claras, revelantes y atractivas.
  • Se recomienda el uso de encabezados para la organización del contenido.

 

Trastorno de Déficit de Atención: TDA/TDAH

Se trata de un trastorno de carácter neurobiológico que tiene su origen en la infancia. Sus síntomas son deficit de atención, hiperactividad e impulsividad, que se presentan de diferentes formas, según las personas afectadas.

Caracteristicas del TDA/TDAH

  • Tienen dificultades para mantener la atención durante un tiempo.
  • No prestan atención a los detalles.
  • Presentan dificultades para finalizar tareas.
  • Les cuesta escuchar y seguir órdenes.
  • Son desorganizados.
  • Suelen perder u olvidar objetos.
  • Cambian con frecuencia de conversación.

 

Consejos para mejorar la accesibilidad web a las personas con TAD/TADH

  • El uso de código de colores les viene muy bien a estas personas en función del ejercicio a realizar.
  • Crear espacios con la información justa y necesaria.
  • El uso de agendas o calendarios les vendrá muy bien para recordar cosas.
  • Utilizar listas para realizar un seguimiento de las tareas programadas.
  • Usar un sistema de archivos (carpetas para diferentes tipos de documentos y utilizar código de color).

 

Autismo

Es un trastorno caracterizado por la alteración de la interacción social, de la comunicación y el comportamiento restinguido y repetitivo.

Caracteristicas del autismo

  • Poca interacción social: Evitan el contacto visual.
  • Presentan dificultades para interpretar la situación emocional de las personas de su entorno.
  • Tienen dificultades para comunicarse.
  • Realizan movimientos repetitivos. Salir del entorno o un ambiente conocido les produce ansiedad.

 

Consejos para mejorar la accesibilidad web a las personas con autismo

  • Navegación consistente.
  • Elementos de interfaz similares e interacciones similares
  • Aumento de tamaño de texto
  • Imágenes (mantener su integridad cuando se amplíen, aunque tengan texto, que debe ser legible y comprensible)
  • Organización del contenido (uso de encabezados, de listas, interacciones complejas en varios pasos cortos, navegación coherente)
  • Evitar los sonidos de fondo
  • Lectura facil y uso de un lenguaje simple. Expandir las abreviaturas y acrónimos
  • Tipos de fuente (Sans-serif pero algunas personas en el espectro del autismo prefieren un tipo de letra Serif)
  • Incluir etiquetas con descripciones simples en los formularios.
  • Proporcione texto alternativo en las imágenes.
  • Enlaces (reducir el número de enlaces y asegurar que se identifican como tales)
  • Utilice espacios en blanco

 

Disculcalia

La discalculia es una condición de por vida que dificultan las tareas relacionadas con las matemáticas.

Características de la disculcalia

  • Tienen problemas para reconocer los símbolos numéricos.
  • Les cuesta entender información presentada en gráficos o tablas
  • Tienen dificultades midiendo cosas como los ingredientes de una receta sencilla o líquidos en una botella.

 

Consejos para mejorar la accesibilidad web a las personas con disculcalia

  • Navegación y utilizaciónde un lenguaje fácil.
  • Usar una tipografia clara
  • Texto descriptivo de imágenes y tablas con un tamaño de letra adecuado
  • Uso del audio.