19/05/2016

Diseñando sitios web para usuarios disléxicos

Diseñando sitios web para usuarios disléxicos

Cuando se habla de accesibilidad web —el grado en que un sitio web puede ser aprovechado por usuarios discapacitados—, casi siempre se pone el foco en dificultades visuales o auditivas, y, en menor medida, en problemas motrices o propios de la tercera edad. Poco se piensa en los usuarios con dislexia, un trastorno caracterizado por dificultades en la lectura. Las personas disléxicas presentan una inteligencia normal, pero pueden tener problemas para deletrear palabras, leer con rapidez, escribir palabras, «recitar» mentalmente, leer en voz alta y comprender lo que leen. Existen distintos niveles de dislexia. Por eso, algunos usuarios disléxicos recorrerán nuestro sitio web como lo haría la mayoría de las personas, mientras que otros necesitarán lectores de pantalla (screen readers). Estos son programas que convierten el texto a voz, y, a la hora de «leer» una página web, analizan su código fuente para conocer el tipo, la importancia y la ubicación de cada sección de contenido, con el fin de organizar la locución adecuadamente. Para contribuir a este proceso, nuestro código debe ser lo más semántico posible. Adaptar el contenido de nuestro sitio web a usuarios disléxicos puede ser algo limitante si el público al que nos dirigimos no es específicamente ese. Sin embargo, es bueno saber que este grupo (que representa entre un 3% y un 7% de la población mundial) agradecerá que exista un mapa del sitio y un índice de contenido en cada página, y que los párrafos sean breves. En cuanto al diseño, podemos tener en cuenta las siguientes pautas:

  • Tipografías. Ciertas tipografías pueden resultar especialmente difíciles de leer para una persona disléxica. Si la fuente tiene aplicado un efecto de sombra o blur (difuminado), peor todavía. La investigadora española Luz Rello descubrió que las itálicas son problemáticas, recomendando en su lugar las fuentes sin serif, monoespaciadas y romanas. Incluso existen fuentes especialmente diseñadas para disléxicos, como OpenDyslexic, que se puede utilizar gratuitamente.
  • Colores. Muchos disléxicos son especialmente sensibles al contraste alto: ven los caracteres borrosos o entremezclados. Por eso, no se recomienda utilizar texto negro puro (#000000) sobre fondo blanco puro (#FFFFFF). El texto negro puro sobre un fondo gris claro es mejor opción.
  • Separación de caracteres. La existencia de grandes espacios en blanco entre caracteres o palabras representa un problema para los usuarios disléxicos. Se recomienda alinear el texto a la izquierda y usar un espaciado de caracteres normal.
  • Columnas. Dividir el texto de un artículo en varias columnas es una práctica necesaria en los diarios y las revistas en papel, ya que el alto de la página es limitado. En la Web, esta limitación no existe (la página puede ser tan alta como deseemos), y por eso casi siempre vemos el texto en una sola columna. En la Red, la separación en columnas resulta molesta para la mayoría de los usuarios, pero puede ser bien recibida por quienes tienen dislexia, ya que las líneas serán más angostas y les resultarán más fáciles de seguir.
  • Imágenes. Usar imágenes como complemento del texto ayuda a una rápida comprensión por parte de los usuarios disléxicos, ya que reduce el esfuerzo de leer. Por ejemplo, en un sitio web de comercio electrónico, los enlaces a las categorías («Deportes», «Entretenimiento», «Hogar», etc.) pueden estar ilustrados con una fotografía descriptiva. Además, podemos usar imágenes para dividir el texto y así alivianar la lectura.
  • Distracciones. Debemos evitar tanto como sea posible el uso de elementos que puedan distraer al usuario, como animaciones, música, fondos con textura o publicidades.

Si aplicar estas pautas a nuestro diseño es demasiado difícil, podemos crear una versión alternativa exclusivamente para personas disléxicas; o bien ofrecerle al usuario la posibilidad de modificar la fuente, los colores y otras características de cada página.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce