Steve Krug: “No me hagas pensar.”

En esta entrada os voy a hacer un resumen del libro de Steve Krug: “No me hagas pensar”.  El autor, en este libro hace un repaso de las claves de la usabilidad. Es la nueva edición del libro (año 2015), en la que incluye un capítulo sobre usabilidad para móviles.

Portada del libro de Steve Krug: No me hagas pensar

Capítulo 1. ¡No me hagas pensar!

Primera norma de usabilidad

Se trata del principio fundamental de la usabilidad en el diseño Web. Una página web ha de ser obvia, evidente, clara y fácil de entender. Debe entenderse a primera vista, deben mostrar su encanto de un solo vistazo.

La primera clave de usabilidad es que la página no presente interrogantes al usuario como “¿por dónde empiezo?”, “¿por qué lo llaman así?” o “¿puedo hacer clic en esto?”.

Los interrogantes aumentan el trabajo cognitivo y distraen nuestra atención de la tarea que estamos realizando. Las distracciones, aunque pueden ser leves se acumulan y pueden llevarnos a abandonar el sitio.

Capítulo 2. Cómo usamos realmente la web.

Ojear, ser suficientes y apañárselas.

Si quieres hacer hacer págibnas web eficientes hay que tener en cuenta tres factores:

Factor nº 1: No leemos la páginas, las escaneamos.

La gente invierte poco tiempo en leer las páginas web, las leen muy por encima.

¿Por qué sucede esto?

Porque tenemos prisa y leemos justo lo necesario. Sólo nos interesa una parte del contenido y esscaneamos para encontrar esas partes relevantes. Centramos nuestro interés con palabras y frases que parecen encajar mejor con la tarea que tenemos entre manos, nuestros intereses personales o las palabras que causan una reacción repentina, como “Gratis”, “Oferta”.

Factor nº 2: No tomamos decisiones óptimas. Es sufiente satisfacer.

Cuando navegamos por una página web, hacemos clic en la primera opción que nos parece razonable, es decir, aplicamos la estrategia del satisficing.

Esto se debe a que tenemos prisa. Por eso, la estrategia del satisficing es mucho más efectiva. Si nos equivocamos, las consecuencias por el error cometido no son importantes, siempre podemos volver atrás. Y sopesar distintas opciones no ayuda a mejorar las oportunidades. Todo depende de nuestro esquema mental y de la confianza que tengamos en el sitio.

Factor nº 3: No averiguamos cómo funcionan las cosas, nos las apañamos.

A la gente nos da igual cómo funcionan las cosas, simplemente nos apañamos e intentamos averiguar cómo funcionan. Si nos funcionan de una manera, optamos por esa opción y dejamos de buscar otra solución.

Esto ocurre porque no nos importa saber cómo funcionan las cosas siempre que podamos usarlas. Arreglárselas funciona, pero termina siendo ineficaz y proclive al error.

Sin embargo, si los usuarios entienden el sitio, encontrarán mejor lo que buscan y se sentirán más seguros y convencidos cuando usen el sitio.

Capítulo 3. Diseño de rotulos 101.

Diseño de páginas para poder ser escaneadas, no para leer.

Hay varias claves para diseñar páginas web:

  • Aprovechamiento y uso de las convenciones
  • Crea una jerarquía visual  clara
  • División de las páginas en zonas bien definidas
  • Dejar bien claro sobre que se puede hacer clic
  • Eliminar el ruido visual
  • Formatear el contenido para facilitar el escaneo

Aprovechamiento y uso de las convenciones

Todas las convenciones nacen de la idea brillante de alguien. Si funcionan lo suficientemente bien, otros sitios la imitan y termina viéndose en tantas partes que no necesita ningún tipo de explicación.

Las convenciones son útiles. No hay que intentar reinventar la rueda: innova solo cuando sepas que la idea es mejor pero aprovecha las convenciones cuando no haya ideas mejores.

Creación de una jerarquía visual clara en cada página

Una buena jerarquía visual nos ahorra tales esfuerzos a la hora de preprocesar la página, organizar y establecer prioridades en los contenidos, lo que nos permite captar todo de forma casi instantánea.

Todas las páginas han de tener una jerarquía visual clara. Para ello, se basan en tres características:

  • Los elementos más importantes deben ser los más destacados. Los encabezados más importantes serán los más grandes y aparecerán en negrita.
  • Lo que está relacionado por lógica también debe estarlo de forma visual. Agrupar los elementos bajo un mismo título.
  • Los elementos se engloban visualmente para diferenciar cada una de las secciones o bloques.

División de las páginas en zonas bien definidas

Es importante dividir la página en zonas definidas con claridad para que los usuarios puedan decidir sobre qué parte quiere centrarse y cuáles ignorar.

Dejar claro sobre lo que se puede hacer clic

Hay que identificar fácilmente sobre lo que se puede hacer clic, los botones y lols enlaces.

Eliminar el ruido visual

Deshacerte de todo aquello que no contribuye a la solución debe desaparecer: todo lo que llama la atención, el ruido y la desorganización.

Formatear el contenido para facilitar el escaneo

  • Usar encabezados, que te permitirán decidir qué parte, leer, escanear o saltarte.
  • Escribir párrafos cortos para hacer más fácil el escaneo.
  • Usar listas.
  • Destacar los términos claves.

Capítulo 4. ¿Animal, vegetal o mineral?

¿Por qué le gustan al usuario las opciones mecánicas?

El número de clics no importa tanto como el esfuerzo de pensar lo que se debe hacer, y la incertidumbre sobre si la elección tomada es la correcta.

No importa el número de clics que se deban hacer mientras el camino sea sencillo y ofrezca la certeza de que se sigue la pista correcta.

Tres clics insconscientes e inequívocos equivalen a un clic que requiere cierto grado de reflexión.

Capítulo 5. Omisión de palabras innecesarias.

El arte de no escribir en la web

La tercera norma de usabilidad es:

Elimina la mitad de las palabras en todas las páginas y luego deshágase de la mitad de lo que quede.

Tenemos que eliminar el discurso innecesario. Otrra cosa que hay que eliminar son las instrucciones porque nadie las va a leer. Si las instrucciones son necesarias, hay que reducirlas a lo esencial.

Si se elimina lo innecesario se reduce el ruido de la página, haciendo que el contenido sea más relevante y se acortan las páginas, permitiendo que se vean de un solo vistazo.

 

Capítulo 6: Señales en la calle y migas de pan.

Diseño de la navegación

Comienza con un hombre intentando comprar una motosierra, para pasar a explicar las semejanzas y diferencias entre comprar en una tienda física y en la web.

La navegación web nos ayudará a encontrar lo que buscamos pero también nos indicará dónde nos hallamos. Evita que nos perdamos, nos dice lo que hay en cada lugar, nos enseña a usar el sitio (porque implícitamente nos muestra por dónde empezar y las opciones que hay) y nos permite confiar en las personas que la han creado.


Una navegación clara y bien desarrollada es una de las mejores oportunidades con las que cuenta un sitio para dar una buena impresión.

La navegación debe seguir las convenciones para localizarla con facilidad y distinguirla del resto del contenido. También ha de ser coherente y consistente a lo largo de las páginas, esto nos permite tenerla siempre a mano y aprenderla una única vez. Como excepción, en la home y en ciertos formularios (por ejemplo en la formalización de tu pedido) podemos tener una versión mínima de esta navegación coherente, pues en este caso la navegación puede ser una distracción innecesaria.

Otras claves que explica en este capítulo son:

  • Se debe identificar en todo momento en qué sitio nos encontramos, para ello debemos utilizar también la convención de incluir el logotipo en la esquina superior izquierda.
  • Las utilidades deben estar diferenciadas de las opciones principales de navegación y ser menos prominentes.
  • Se tiene que volver con facilidad a la página de inicio, tanto desde el logotipo como incluyendo la opción en las utilidades.
  • Se debe incluir una opción de búsqueda a no ser que el sitio sea muy pequeño. Repasa las buenas prácticas y las convenciones a seguir en el buscador, como por ejemplo no limitar el ámbito de la búsqueda.
  • Se debe resaltar la opción de menú en la que te encuentras.
  • Es importante incluir migas de pan y seguir unas buenas prácticas, como poner en negrita el último elemento o que este no sustituya al título de la página.
  • Los enlaces visitados deben cambiar de color.
  • Recalca la importancia del título de las páginas: su ubicación, su estilo o su texto.
  • El nombre de los enlaces, menús y títulos de las páginas han de ser coherentes entre sí.

    Si hay una mayor gran diferencia entre el nombre del vínculo y el nombre de la página o muchas discrepancias menores, mi confianza en el sitio (y en la competencia de las personas que lo han publicado) se verá disminuida.

     

Por último defiende su predilección por las pestañas de navegación. Indica que son claras y fáciles de entender, que es difícil perderlas de vista o confundirlas con algo que no sea la navegación, y que refuerzan que el contenido está dividido en secciones y que nos encontramos en una de ellas.

Las claves de las pestañas es que haya una seleccionada por defecto y que estén perfectamente dibujadas para que parezcan solapas de verdad: la pestaña activa debe pasar al frente.

Indica que es mejor que estén codificadas por color (un color diferente para cada sección) siempre y cuando no se confíe en que todos los usuarios perciban esta distinción, el color es genial como clave adicional, pero nunca debería basarse en él como clave única.

Capítulo 7. La teoría del Big Bang en el diseño de páginas web.

La importancia de situar a la gente en el camino correcto.

Este capítulo habla de todo lo que tiene que tener una página principal. Tiene que tener una identidad y decirnos para qué sirve.

  • Tiene que establecer una jerarquía del sitio, una visión global tanto del contenido como de sus características.
  • Disponer de un cuadro de búsqueda.
  • Debe ser sugerente, para convencer del buen contenido que tiene.
  • Debe tener promociones en las secciones.
  • Disponer de contenido actualizado y accesos directos
  • La página principal debe mostrar por dónde empezar y mostrar crediblidad y confianza.

 

El propio autor define que la teoría del Big Bang debe resumirse en cuatro preguntas, y comprender la web en unos segundos. Describir quién eres, qué haces y qué ofreces.

  • ¿Qué es esto?
  • ¿Qué tienen aquí?
  • ¿Qué puedo hacer aquí?
  • ¿Por qué debería yo estar aquí y no en otro lugar?
  • ¿Por dónde empiezo?

 

Para transmitir ese mensaje de quién eres, qué haces y qué ofreces debes hacerlo con unas pautas que son:

  • Escribe mensajes cortos, ir al grano. Establece las características importantes.
  • No uses una frase relativa a la misión de la empresa. Nadie las lee.
  • Usar líneas de etiquetas, que caractericen a la empresa. Deben ser claras, cortas (de seis a ocho palabras), y tener un beneficio claro.
  • A la hora de echar un vistazo rápido, deberíamos saber con confianza y claridad dónde podemos buscar y navegar.

Capítulo 8: El granjero y el ganadero deben ser amigos.

Por qué la mayoría de los argumentos de diseño web acerca de la usabilidad son una pérdida de tiempo y cómo evitarlos

La tendencia natural es a proyectar nuestros gustos o disgustos en los usuarios de la Web: creemos que a la mayoría de los usuarios les gustan las mismas cosas que a nosotros.

Para resolver el conflicto a menudo se intenta encontrar qué le gusta a la mayoría de los usuarios. El problema es que no hay un Usuario Medio. Sería estupendo saber si los desplegables son buenos o malos en función de si gustan o no a la mayoría, pero no hay una respuesta simple o correcta a esta pregunta.

La cuestión es que no es nada productivo preguntar cosas como “¿Gustan a la mayoría los menús desplegables?”. Lo más acertado es preguntar “¿Supone este desplegable con estos elementos y estos términos dentro de este contexto particular una buena experiencia para la mayoría de las personas que probablemente utilicen este sitio?”
Y solo hay una forma de contestar a este tipo de pregunta: probando.

Capítulo 9: Prueba de usabilidad por 10 céntimos al día.

Haz pruebas sencillas. Nunca es suficiente.

 

Las personas con frecuencia prueban para decidir qué color de cortinas es mejor, sólo para darse cuenta de que olvidaron poner ventanas en la habitación. Por ejemplo, podemos descubrir que no hay mucha diferencia si la barra de navegación es horizontal o existen menús verticales, si nadie entiende el valor del sitio.

Tristemente, así es como se hacen la mayoría de las pruebas de usabilidad: demasiado pequeñas, demasiado tarde y por razones equivocadas.

Dedica bastante tiempo a explicar la diferencia entre un grupo de discusión y un test con usuarios. No son lo mismo ni tienen el mismo objetivo.

Defiende la necesidad de realizar test con usuarios: es mejor probar con un usuario que con ninguno; y es mejor probar con un usuario al principio que con 50 al final.

Es bueno probar con personas que vayan a utilizar el sitio, pero más importante es probarlo pronto y con frecuencia. Si reclutar a los usuarios ideales para la prueba va a significar hacer menos pruebas, hazlas con cualquiera (a no ser que necesites un perfil muy concreto o la web sea de un campo muy específico)

Se pueden realizar las pruebas sin invertir mucho tiempo o dinero, y sin necesidad de muchos usuarios o de un laboratorio. Probar puede ser rápido, sencillo y barato.

A veces basta con pruebas tan sencillas como imprimir el formulario que has prototipado, enseñárselo a alguien y ver si tiene sentido para él.

Por ejemplo, realizar un test con solo tres usuarios te permite generar conclusiones más rápidas, agilizar las modificaciones y hacer otra ronda de testing. De esta manera, al final, más pruebas con menos usuarios detectan más problemas.

También es mejor exponer directamente en una reunión las conclusiones al equipo que redactar un extenso informe que al final nadie lee.

A continuación nos da consejos y pone ejemplos concretos basados en su experiencia. Por ejemplo recomienda proponer siempre tareas personalizadas. Es mejor “encuentra un libro que quieras comprar” que “encuentra tal libro”; o “inserta un anuncio de algo que quieras vender” que “insertar tal anuncio”. Cuando la gente realiza tareas ficticias no se implica emocionalmente y no puede usar todo su conocimiento personal.

Los problemas habituales que suelen encontrarse en los test con usuarios con:

  • no tienen claro el concepto
  • las palabras que buscan no están
  • lo que buscan está en la página pero no lo ven por el ruido o porque no destaca.

Tras las pruebas hay que resistir el impulso de añadir explicaciones a las páginas o añadir características que han propuesto los usuarios. Pero el mayor desafío suele ser reparar los problemas SIN estropear las partes que funcionan, pues todo cambio tiene consecuencias.

Capítulo 10. Mobile: No es una ciudad de Alabama

Bienvenido al siglo 21 – Puedes experimentar una ligera sensación de vértigo

 

¿Cuál es la diferencia en cuanto a la usabilidad de un dispositivo móvil?

Prácticamente la misma que para la web, los principios son los mismos. Con la diferencia de que la gente navega más rápido y lee menos en las pantallas pequeñas.

Una diferencia importante está en el diseño, que tiene una serie de limitaciones: decidir qué cosas tienen que hacerse y cuáles no pueden hacerse, por espacio. En cualquier cosa que se diseña, te estás enfrentando con limitaciones.

Al ser las pantallas más pequeñas, la gente tendrá que hacer clics más veces, pero eso está bien. Si tienes un sitio web, tendrás que hacerlo usable en pantallas de cualquier tamaño. Esto duplica el esfuerzo y es muy difícil de hacer bien.

Pero nos da tres sugerencias:

  • Permite hacer zoom para facilitar la lectura en el móvil.
  • No me dejes plantado en la puerta principal.
  • Proporciona simpre un link para el sitio Web completo.

 

También sostiene la idea de que las app tienen un problema: que deben ser comprensibles y fáciles de aprender, pero no lo son.

Para ello, habla del concepto de la memorabilidad, es decir: ¿recordarás cómo usarla la siguiente vez que pruebes, o tendrás que empezar de nuevo desde el principio? Para que sea fácil recordar su uso, tiene que ser fácil de aprender.

 

Capítulo 11. La usabilidad como cortesía común.

Por qué su sitio web debe ser mensch

¿Qué va minando la buena voluntad del usuario hasta llevarlo a abandonar?:

  • ocultar la información que quiere: el teléfono de soporte, los costes de envío, los precios, etc.
  • castigarle por no hacer las cosas a tu manera: obligarle a incluir los datos con un determinado patrón, como espacios en el número de la tarjeta
  • pedirle información que no necesitas
  • la falta de sinceridad, con mensajes como “su llamada es importante para nosotros” pero te tienen 20 minutos a la espera
  • los obstáculos en su camino, como tener que verse una introducción Flash a la fuerza
  • que el sitio parezca de aficionados: desorganizado, descuidado y poco profesional

 

Por el contrario, la buena voluntad del usuario aumenta cuando:

  • Conoces las principales cosas que las personas quieren hacer en tu sitio y estas son obvias y sencillas
  • Les dices lo que quieren saber
  • les ahorras pasos siempre que puedes
  • Te esfuerzas en dar la información que necesitan, precisa y de utilidad, organizada de forma que puedan encontrarla
  • Te anticipas a las preguntas probables y las respondes con franqueza
  • Les proporcionas comodidades como una impresión correcta de las páginas
  • Les facilitas la recuperación ante los errores
  • Te disculpas cuando es necesario si algo está causando un problema

 

Capítulo 12. La accesibilidad web y tú.

Cuando piensas que ya lo has hecho todo, aparece un gato con una tostada untada con mantequilla atada a la espalda

A los vigorosos desarrolladores de 25 años (son palabras del autor, no mías) les es difícil creer que un gran porcentaje de la población necesita ayuda para acceder a la web. Les parece exagerado. También les cuenta creer que hacer las cosas más accesibles nos beneficia a todos.

Temen además que supondrá más trabajo y que el resultado será menos atractivo.

El autor también habla de la tendencia a pensar que el validador de accesibilidad es como un corrector ortográfico. Además la mayoría descuida las advertencias pues no les parecen problemas reales. Sin embargo, las advertencias pueden hacer referencia a requisitos determinantes pero que simplemente no son evaluables automáticamente.

Da cinco consejos:

  • Soluciona los problemas de usabilidad que nos confunden a todos… seguro que también estarán confundiendo a los usuarios con alguna discapacidad.
  • Lee una página con un lector de pantalla.
  • Lee un libro sobre accesibilidad web.
  • Usa CSS.
  • Revisa tu código HTML para asegurar que:
    • incluyes texto alternativo a las imágenes
    • Usas los encabezados correctamente.
    • Usas label en los formularios
    • es accesible por teclado
    • no usas javascript sin una buena razón
    • no usas mapas de imagen del lado del servidor.

 

Capítulo 13. Guía para perplejos

Haga la usabilidad presente

 

¿Como puedo convencer a mi jefe para conseguir usuarios y me dejen el tiempo necesario para realizar las pruebas?

Hay que conocer el tema. Hace una pequeña introducción sobre cómo ha cambiado el campo de la usabilidad desde sus comienzos hasta ahora, así como los diferentes términos aplicados, que los califica como “que le han salido muchos hermanos”.

Da una serie de sugerencias para convencer a la gerencia de la empresa:

  • Haz una demostración ROI.
  • Habla sobre asuntos críticos, asuntos que interesen a la empresa
  • Consigue que tu jefe observe una prueba de usabilidad
  • Realiza una prueba de la competencia
  • Empatiza con la gerencia de la empresa

 

Al final  del libro, recomienda unos libros:

 

O algún libro de Susan Weinschenck:

Accesibilidad web: Cómo influye en el SEO

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

Accesibilidad web y SEO

Limitaciones personales y tecnológicas

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

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

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

Técnicas SEO para mejorar el posicionamiento

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

Google es un usuario ciego

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

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

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

Alternativas textuales para elementos no textuales

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

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

Título e idioma de las páginas

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

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

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

Enlaces

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

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

Encabezados y marcado semántico

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

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

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

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

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

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

Separación entre contenido y presentación

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

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

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

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

Mapa web y navegabilidad

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

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

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

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

Legibilidad

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

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

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

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

 

 

Usabilidad web: Introducción, principios y beneficios.

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

Usabilidad: Ibntroducción, principios y beneficios

¿Qué es la usabilidad?

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

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

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

ISO/IEC 9126

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

ISO/IEC 9241

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

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

 

Principios básicos de la usabilidad web

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

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

 

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

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

Escucha y conoce a los usuarios

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

Relación con el sistema

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

Optimiza las operaciones

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

Reduce la memorización

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

Diseño estético y minimalista

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

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

Gestiona los errores

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

Flexibilidad y eficiencia de uso

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

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

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

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

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

 

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

Beneficios de la usabilidad

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

 

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

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

 

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

 

 

 

 

Accesibilidad web con Roles ARIA.

Navegación accesible con roles WAI-ARIA

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

roles ARIA

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

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

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

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

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

¿Qué es un rol?

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

Landmark Roles

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

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

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

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

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

Landmarks roles o puntos de referencia

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

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

 

Roles en HTML

Role=”banner”.

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

Role=”complementary”

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

Role=”Contentinfo”

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

Role=”form”

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

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

Role=”main”

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

Role=”navigation”

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

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

Role=”search”

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

Role=”region”

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

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

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

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

aria-label

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

aria-label="Menú principal"

aria-labelledby

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

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

A tener en cuenta: Resumen

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

 

Criterios de conformidad de las WCAG 2.0 asociados

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

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

Accesibilidad web: Diversidad funcional auditiva.

 

diversidad funcional auditiva

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

Disposición adicional duodécima. Lenguas Oficiales.

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

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

En su artículo 14 establece lo siguiente:

Artículo 14

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

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

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

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

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

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

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

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

Las tareas cognitivas a tener en cuenta son las siguientes.

Tarea de búsqueda visual

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

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

Tareas de atención dividida

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

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

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

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

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

 

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

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

Tareas de navegación

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

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

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

Tareas de lectura y comprensión de textos

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

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

Tareas de manejo de ratón y escritura

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

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

Tecnicas SMIL

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

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

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

1.2.2 Subtítulos (grabados)

1.2.4 Subtítulos (en directo)

1.2.3 Audiodescripción o Medio Alternativo (grabado)

1.2.5 Audiodescripción (grabada)

1.2.7 Audiodescripción ampliada (grabada)

 

1.2.6 Lengua de señas (grabada)

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

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

Lengua de Signos

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

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

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

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

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

Subtítulos

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

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

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

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

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

Transcripciones

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

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

 

Entradas relacionadas:

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

 

Acccesibilidad web: ¿Cómo hacer formularios accesibles?

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

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

formularios accesibles

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

Campos de formulario

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

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

Campos de tipo Texto:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Formulario con texto adyacente

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

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

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

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

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

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

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

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

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

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

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

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

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

Es muy importante tener en cuenta los Roles ARIA.

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

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

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

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

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

 

Entradas relacionadas:

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

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

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.

 

Accesibilidad web: Para quién se hace y qué beneficios aporta

Después de ver qué es la accesibilidad web, por qué es importante y cómo cumplirla vamos a ver la última parte de las cuatro grandes preguntas: ¿Para quién se hace? y veremos los beneficios que aporta.

¿Para quién se hace?

La accesibilidad en las webs se hace para todas las personas porque todos usamos la web. Hay que tener en cuenta que en España según el INE (Instituto Nacional de Estadística), somos cerca de 4 millones de personas, así que si quieres ampliar las visitas de tu web tendrás que pensar en las personas con diversidad funcional. Para ello, vamos a enumerar los cuatro grandes grupos diferenciados:

Diversidad Funcional Motriz: Personas con dificultad en los movimientos y para usar las manos, personas con espasmos musculares, así como problemas de habla.

Algunas diversidades funcionales motrices son: la  atrofia muscular, la Parálisis Cerebral Infantil, Parkinson, Esclerosis Lateral Atrófica, Espina Bífida, Esclerosis Múltiple, etc.

A muchas de estas personas, entre las que me incluyo, les cuesta manejar el ratón y el teclado.

Diversidad Funcional Auditiva: Hay personas que tienen pérdida auditiva, por lo que para comunicarse y vivir en sociedad necesitan unos audífonos. Y también hay personas con sordera total que se comunican mediante la lengua de signos.

Diversidad Funcional Visual: Hay personas que tienen problemas de visión, que puede ser de múltiples formas:

  • Baja visión. Hay miles de problemas de visión, como la presbiscia, el daltonismo, visión nocturna, retinosis pigmentaria, degeneración macular…
  • Ceguera total. Personas con visión nula. Estas personas en su día a día para acceder a la web utilizan lectores de pantalla y/o magnificadores de pantalla para navegar por la web. Hay personas que usan estos dispositivos de apoyo y prefieren leer la web impresa, por tanto, tiene que haber una opción para poder imprimirla.

Diversidad Funcional Intelectual: Personas que presentan dificultades a nivel cognitivo, como las personas afectadas por dislexia, Sindrome de Down, afasia, autismo, etc.

Es por esto, que a la hora de diseñar siempre hay que pensar en las preguntas claves.

Preguntas claves para llevar a cabo la accesibilidad web

  • ¿Para quién vamos escribir?

Tienes que pensar que hay un porcentaje de usuarios que acceden a tu web, que tienen diversidad funcional y que son (somos) clientes potenciales para tu web, blog o negocio. Con lo cual es importante que escribas para tu público en función de los objetivos de tu empresa.

  • ¿Entenderá lo que escribo?

Es muy importante escribir de una manera sencilla y clara. Hay personas que tienen dificultades en la compresión de la lectura y es importante tenerles en cuenta. Hay que cuidar a las personas que nos leen.

  • ¿Tendrá problemas con el color?

Hay personas daltónicas, las cuales les cuesta distinguir los colores. Debido a su problema de visión, tienen más difícil poder percibir el contenido si no se usan los colores de la manera adecuada para ellos.

  • ¿Y el tamaño de la letra?

Esta pregunta tiene mucha relación con la pregunta anterior. Hay personas que sufren de un problema de ceguera grave, que si no lo tenemos en cuenta, es un problema. Es importante poner una tipografía legible y un tamaño de letra adecuado, de acuerdo a las WCAG 2.0.

  • ¿Escuchará los vídeos?

Este es uno de los problemas más graves que las personas con diversidad funcional auditiva tiene. En este grupo me incluyo. Pensemos que cuando se publica un vídeo sin subtítulos perdemos la información importante del vídeo. Y los audios si no tienen una transcripción, la persona que te esté visitando se va.

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

  • ¿Usará el ratón?

Hay muchas personas que debido a dificultades en sus manos o por problemas de visión no pueden llevan a cabo la interacción vista-mano. La solución para estos casos, es hacer las opciones accesibles mediante teclado.

Si sigues todas las pautas que te he contado, podrás llevar a cabo tu proyecto lo más accesible y usable posible, teniendo en cuenta las necesidades de las personas que visiten el sitio web.

Una vez establecidos los diferentes grupos y sus diferentes soluciones en accesibilidad web, vamos a ver qué beneficios nos aporta la accesibilidad web.

Una web accesible proporciona muchos beneficios:

  1. Mejora la usabilidad de la web para todo tipo de usuarios, porque si una web no es accesible no es usable, y por lo tanto, se originan problemas para un importante número de usuarios.
  2. Permite mejorar el acceso a los contenidos Web a las personas mayores, que se debe el deterioro de las condiciones físicas debido al envejecimiento y cuanto más fácil sea acceder para estas personas, mucho mejor. Y más, teniendo en cuenta que la población está envejeciendo.
  3. Mejora los resultados en los buscadores, es decir, mejora el posicionamiento SEO. (Search Engine Optimization).
  4. Incrementa el soporte para el mercado internacional. Se añaden subtítulos para los diferentes países, así como los contenidos, etc.).
  5. Ayuda a reducir la llamada brecha digital, permitiendo así que a un porcentaje de la población que no tengan conocimientos de las TIC (Tecnologías de la Información y de la Comunicación), puedan tener relación con ellas.
  6. Refuerza positivamente la imagen empresarial, lo que permite diferenciarse de la competencia dando acceso a tu web a un mayor número de personas (3,5 millones de personas en España demandan servicios y entornos accesibles). Y cada vez seremos más. Por ello es importante tenernos en consideración.
  7. Cumples con la legislación de accesibilidad:
    • Ley 34/2002, de 11 de julio de 2002, de servicios de la sociedad de la información y comercio electrónico (LSSICE).
    • RDL 1/2013 de 29 de noviembre de 29 de noviembre, por el que se aprueba el Texto Refundido de la Ley General de derechos de las personas con discapacidad y de su inclusión social.
    • Norma UNE 139803:2012 Requisitos de Accesibilidad para el Contenido Web
  8. Es mucho más fácil de usar y de actualizar, puesto que se disminuye el coste de desarrollo y mantenimiento, así como la carga de las páginas web: El coste de desarrollar y mantener una página web accesible es menor que frente a una no accesible, ya que una página web accesible es una página que no tiene errores, que está bien estructurada y que está bien hecha.

 

Ventaja importante de la accesibilidad web: la sonrisa de las personas

Una vez que te has parado a pensar en la felicidad de una persona al poder acceder a tu web, te pregunto:

¿Te hacen falta más razones para llevar a cabo la accesibilidad web en tu sitio?

Te animo a lo que hagas, porque es muy importante. La accesibilidad web nos beneficia a todos.