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.

 

 

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.

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

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.

 

Problemas de ceguera al color: Daltonismo

 ¿Qué es el daltonismo?

El daltonismo se define como la dificultad para distinguir ciertos colores, que NO es lo mismo que no percibir esos determinados colores. No se puede confundir el significado de percibir y distinguir, son cosas diferentes. El daltonismo debe su nombre al científico inglés John Dalton, que sufrió este problema visual, y a raíz de eso, se investigó más sobre ello.

Principalmente el daltonismo se debe a varias causas principales, pero antes de avanzar, vamos a explicar las cosas paso a paso.

Para hablar del color hay que hablar de la luz.

¿Qué es la luz?

La luz no es más que la radiación electromagnética causada por un objeto, bien porque la genera (como el Sol o el fuego), o bien porque la refleja.

Los procesos físicos: El espectro visible

La radiación se emite mediante ondas, y una onda tiene diferentes longitudes. El ojo humano responde a una longitud de ondas desde 390 a 750 nm. El espectro visible es el rango de colores que el ojo humano es capaz de percibir. Para nosotros, (visión normal) serían los colores del arcoiris.

Daltonismo: Espectro visible por el ojo humano

 

Los procesos fisiológicos

Cuando hablamos de procesos fisiológicos se refiere a cómo la luz interacciona con nuestra vista, cómo interacciona ante los estímulos visuales.

Los procesos mentales

Una vez que la luz interacciona con la vista, ya nos queda el último paso que es cómo nuestra mente percibe el color. Esto no es algo absoluto ni fijo, sino que depende de muchos factores.

Un ejemplo claro de ello serían las ilusiones ópticas. Todo depende del entorno, de la luz, de la oscuridad, del color y esto hace que las cosas se vean de una manera u otra. Es como cuando te vas a una tienda y te compras un pantalón o una camiseta, y en la tienda lo ves de una manera y cuando llegas a casa lo ves de otra. ¿No os ha pasado eso alguna vez?

¿Por qué se produce? ¿A qué se debe el daltonismo?

El ojo humano se compone de varias partes, entre las que se encuentran el iris, la córnea, el cristalino y el nervio óptico, entre otras muchas. Pero, lo que nos concierne en este caso, es la retina.

La retina se compone de una capa de células fotosensibles o fotoreceptoras, y en ellas se encuentran los conos y los bastones.

Los conos son los que se encargan de hacer que distingamos los colores, y los bastones son los encargados de que podamos percibir los contrastes.

Existen tres tipos de conos/pigmentos: Uno sensible a la luz roja, otro a la luz verde y un tercero, que es sensible a la luz azul.

Tipos de daltonismo

Existen tres tipos:

  • Acromático
  • Dicromático: Es el que sufría John Dalton.
  • Tricromático anómalo: Perciben los colores alterados, pero menos notables.

 

Las personas con visión normal, perciben los seis colores elementales: rojo, naranja, amarillo, verde, azul y violeta. A eso, hay que añadirle los dos extremos: el blanco y el negro.

Las personas con daltonismo acromático sólo distinguen la denominada escala de grises, es decir, los tonos de colores entre el blanco y el negro.

Las personas que padecen daltonismo dicromático tienen problemas en uno de los conos.

  • Protanopía: no distingue el color rojo o la luz roja (ni ninguno de sus tonos). Puede ser total o parcial.
  • Deuteranopía: no distingue el color verde o la luz verde (ni ninguno de sus tonos). Puede ser total o parcial.
  • Tritanopia: no distingue el color o la luz azul (ni ninguno de sus tonos). Puede ser total o parcial.

También existe otro tipo de daltonismo, el del tricromático anómalo. Este es el grupo más común. Aquí hay que hacer referencia a tres subtipos.

  • Protanomalía: Dificultad para visualizar el color rojo
  • Deuteranomalía: Dificultad para visualizar el color verde
  • Tritanomalía: Dificultad para visualizar el color azul y el amarillo (son casos menos frecuentes).

Consejos para tener en cuenta la accesibilidad web para las personas daltónicas

  • No lo bases todo en el color, apoya la información con texto o con iconos identificativos que tengan sentido.
  • Utiliza los colores de manera lógica y razonada.
  • No seleccionar colores problemáticos que dificulten la navegación y la visualización: ni dos colores claros, ni dos colores oscuros. Piensa bien en los contrastes.
  • Usa siempre un contraste alto.
  • En caso de usar gráficos, representa bien las gráficas y las leyendas con rellenos y tramas.

También hay que hacer mención de la cromostereopsis, que se trata del efecto que se produce en el contraste entre los colores rojo-azul, o el rojo-verde. Estos contrastes producen mala legibilidad y son muy molestos.

La genética del daltonismo

El daltonismo es hereditario. Se produce por una alteración genética y se puede transmitir de padres a hijos. Afecta al 9% de los varones y al 1% de las mujeres. ¿Por qué se produce tanta diferencia entre un género y otro?

Todo tiene su explicación. Los genes que codifican los pigmentos de los colores rojo-verde están ligados al cromosoma X, es decir, a los cromosomas sexuales, (XX para la mujer y XY para el hombre), que corresponden al par número 23.

Los pares númericos de los humanos, que son los pares del 1 al 22, son cromosomas autosómicos, es decir, tienen que ver con cualquier cromosoma que no sea sexual. El del color azul afecta a los dos sexos por igual, al estar implicado el cromosoma 7.

El hombre, al poseer un sólo cromosoma X, tiene más probabilidades de que sea daltónico. La mujer posee dos cromosomas X, pero si tiene afectado sólo uno, es portadora. Si tiene afectados los dos, sería daltónica, pero es bastante improbable que ocurra, ya que tendría que darse la opción de que tanto la madre como el padre sean portadores del gen.

Esta es la razón por la cual existen más hombres daltónicos que mujeres.

 

 

 

 

Accesibilidad web para WordPress: Consejos

¿Cómo llevar a cabo la accesibilidad web en WordPress?

En WordPress, la accesibilidad web es muy importante. Para ello daré una serie de consejos para poner en práctica las WCAG 2.0 y 2.1.

Consejos sobre accesibilidad para WordPress

Consejos sobre accesibilidad web

En las WCAG 2.0 se establece en en el criterio 2.4.2 “Las páginas web describen su temática o propósito”. Todas las páginas web deben tener un elemento <title>. Es obligatorio. Además, el título es muy importante, sirve para identificar los resultados en Google, y por supuesto, mejora el posicionamiento de los sitios web.

Al igual que el título, los encabezados de una página también son importantes porque les va a permitir a las personas ciegas ojear el documento en el que están. Se recoge en el criterio 2.4.6 “Los encabezados o etiquetas describen el tema o propósito”. Esto ayuda a saber cómo está estructurada la información. Es muy útil para las personas que usan lector de pantallas (diversidad funcional visual), y para las que tienen diversidad funcional intelectual, porque les ayuda orientarse dentro de la web.

Por lo tanto, es muy importante, respetar la jerarquía de encabezados, sin saltos, es decir si pones un h2 en la siguiente sección coloca un h3, no un h4. Y sobre todo, separar el contenido de la presentación. HTML por un lado y CSS por otro.

El idioma del sitio, hay que establecerlo al inicio del documento con el atributo lang. En las WCAG 2.0 en el criterio 3.1.1 se establece el idioma de la página. “El idioma predeterminada de cada página puede ser determinado por software”.

Si el documento es HTML 4.01 o HTML 5, el idioma se marcará <html lang=”es”>

¿Cuándo usamos el cambio de idioma?

  • Cuando el cambio de idioma se produce en una o varias palabras. Para ello, usamos la etiqueta lang en el elemento <span>
  • <span lang="fr">je ne sais pas</span>

 

Si se trata de un sitio con múltiples idiomas, se usará el atributo hreflang, tanto en el origen como en el destino.

A la hora de trabajar con el contenido y el diseño de la web,  es recomendable usar tipografías claras, fundamentalmente, que sea Sans Serif. Se pueden usar también tipografías serifas, pero hay que tener cuidado porque algunas de ellas producen mala legibilidad y esto puede ser un problema de accesibilidad para las personas con dislexia.

Siguiendo con la tipografía se debe usar unidades relativas “em”, no absolutas. 1 em equivale a 16 ptos.

En las WCAG 2.0, en el criterio 1.4.4 Cambio de tamaño del texto: A excepción de los subtítulos y las imágenes de texto, todo el texto puede ser ajustado sin ayudas técnicas hasta un 200 por ciento sin que se pierdan el contenido o la funcionalidad”. En relación a esto, viene recogido en las técnicas C14, donde especifica el uso de unidades relativas (em) para la tipografía, y la C28 para los contenedores también en em.

En la encuesta realizada de Webaim, un 25% de los usuarios contestó que necesitaban una ampliación del texto de hasta el 400%.

Si hablamos de imágenes, hay que tener en cuenta dos cosas:

Si las imágenes aportan información, debemos poner textos alternativos.

  • <img src="imagen.jpg alt="texto alternativo">

Si las imágenes son decorativas, las cuales no aportan ningún tipo de información, se les pondrá texto alternativo nulo.

  • <img src="imagen.jpg" alt="">

 

Para las descripciones largas en las imágenes, hay que utilizar el atributo longdesc. El texto alternativo que se incluya a la imagen no puede superar los 150 caracteres.

Si quieres ampliar más información puedes leer la entrada: Cómo trabajar los textos alternativos para las imágenes.

Los enlaces tienen que tener un propósito, es decir, un destino claro y también deben tener sentido para que las personas ciegas se orienten dentro del sitio web. Un ejemplo de ello, es usar el propio texto del enlace. Evita enlaces ambiguos como “Pulsa aquí”, “Más información”.

En cuanto a los subtítulos, en el criterio de conformidad 1.2.2 de las WCAG 2.0: “Subtítulos (grabados): Se proporcionan subtítulos para el contenido de audio grabado dentro de contenido multimedia sincronizado, excepto cuando la presentación es un contenido multimedia alternativo al texto y está claramente identificado como tal.”.

Para los vídeos, hay que poner subtítulos que consten de dos líneas de texto como máximo y que contengan de 35 a 40 caracteres. Los subtítulos deben estar centrados en la parte inferior, excepto los efectos sonoros, que se incluirán en la parte superior derecha entre paréntesis. Los subtítulos deben aparecer el tiempo suficiente para poder ser leídos.  El interlineado debe ser sencillo y se debe usar una tipografía legible.

En Youtube, hay varias formas de añadir subtítulos.

  • Subir una transcripción o un archivo de subtítulos con tiempo. Es la opción más recomendable.
  • Escribir o pegar una transcripción del vídeo y los subtítulos se establecerán automáticamente.
  • Se pueden escribir los subtítulos mientras se ve el vídeo.

 

Para los audios, son muy importantes las transcripciones de texto, que sirven de apoyo a aquellas personas que no puedan visualizar ni oír bien un vídeo.

Para ampliar más información, puede leer la entrada Accesibilidad web: Diversidad funcional auditiva.

Funcionalidades dependientes de ratón:

En el criterio 2.1.1 se dice: “Teclado: Toda la funcionalidad del contenido es operable a través de una interfaz de teclado sin que se requiera una determinada velocidad para cada pulsación individual de las teclas, excepto cuando la función interna requiere de una entrada que depende del trayecto de los movimientos del usuario y no sólo de los puntos inicial y final.”

Si hay personas que no pueden usar el ratón, ya sea porque no le sea fácil manejarlo por sí mismos o porque hay personas que no ven, hay que hacer accesibles las opciones mediante teclado.

Para ello, es muy importante aplicar el criterio de conformidad 2.4.7 “Foco visible: Cualquier interfaz de usuario operable por teclado tiene una forma de operar en la cuál el indicador del foco del teclado resulta visible.” Esto ayudará mucho más a las personas ciegas, a las personas con baja visión y a las personas con problemas motrices a tener una buena navegación por la web mediante teclado.

Hablando de personas ciegas también hay que tener en cuenta las migas de pan, que se recoge en el criterio 2.4.8 de las WCAG 2.0: “Se proporciona información acerca de la ubicación del usuario dentro de un conjunto de páginas web”. En la técnica G65 se proporcionan ejemplos de ello.

En las WCAG 2.0, existen requisitos mínimos y máximos para trabajar con el contraste de color.

Criterio 1.4.3 (Contraste mínimo), que, para el tamaño normal, dice lo siguiente:

“La presentacion visual de texto e imágenes de texto tiene una relación de contraste de al menos, 4,5:1

Y en los textos grandes: “La presentacion visual de texto e imágenes de texto de gran tamaño, tienen una relación de contraste de al menos, 3:1

Criterio 1.4.6 (Contraste mejorado), que es más estricto para el tamaño grande, y establece que: “La presentacion visual de texto e imágenes de texto tiene una relación de contraste de al menos, 7:1

Y en los textos grandes: “La presentacion visual de texto e imágenes de texto de gran tamaño, tienen una relación de contraste de al menos, 4,5:1

Es importante destacar que hay personas con problemas de ceguera al color como los daltónicos y las personas con dislexia, que prefieren un color de fondo que no sea blanco puro.

También es muy importante hacer los formularios accesibles y usables para tener en cuenta a los usuarios que usan lectores de pantalla.

Y tengo que añadir algo más: las tablas no son muy recomendables porque dan problemas de accesibilidad, pero como todo, también se pueden hacer accesibles. Te recomiendo leer la entrada “Accesibilidad web: ¿Cómo hacer tablas accesibles?”.

Hay que utilizar dispositivos de apoyo como por ejemplo:

  • Lectores de pantallas (Jaws y NVDA: Windows) (VoiceOver: Iphone y Mac),
  • Magnificadores de pantalla (ZoomText),
  • Comprueba la accesibilidad por teclado siempre

 

Usa verificadores de ortografía y gramática para facilitar la comprensión y la lectura.

Utiliza analizadores de legibilidad de textos, para ayudar a las personas con diversidad funcional intelectual a tener una mejor comprensión del contenido.

 

Utiliza herramientas automáticas para chequear y testear webs:

Valida la sintaxis y las hojas de estilo CSS (Ej: Validador oficial del W3C).

Revisa siempre el contenido. (Todas las páginas).

Invita a los usuarios a hacer una retroalimentación en el sitio web para mejorar la accesibilidad y la usabilidad del sitio.

Si quieres más información puedes leer la entrada:

Requisitos de Usuario para la Accesibilidad de los Medios Audiovisuales

Y además, te recomiendo ampliar información sobre cómo hacer una navegación más accesible.