05/03/2014

Diseñando sitios web para discapacitados visuales

Diseñando sitios web para discapacitados visuales

La accesibilidad es el grado en el que un producto, dispositivo, servicio o ambiente está disponible a la mayor cantidad de gente posible. Pensar en la accesibilidad incluye diseñar modos de uso o acceso aptos para todas aquellas personas con algún tipo de discapacidad. La accesibilidad web total es quizás la meta más importante del W3C; sin embargo, son muy pocos los desarrolladores que preparan sus sitios web para usuarios con limitaciones físicas, intelectuales, cognitivas o visuales. Para asistir a la inclusión de este último grupo, hoy ofrecemos los siguientes consejos:

  • No utilizar colores como único indicador. El daltonismo es un defecto genético que ocasiona problemas para distinguir entre el verde y el rojo (en algunos casos, el problema se extiende a otros colores). Estos colores suelen representar, respectivamente, el éxito y el fracaso en una transacción (por ejemplo, el envío de datos a través de un formulario). Pero a una persona daltónica le costará entender esa diferencia, por lo que debemos representar cada estado con íconos adicionales (por ejemplo, el «tilde» y la cruz).
  • Probar las imágenes en blanco y negro. ¿Cómo vería las imágenes de nuestro sitio web una persona incapaz de diferenciar colores? Debemos confirmar que nuestras imágenes se verían bien incluso en blanco y negro (aunque los daltónicos no vean exactamente así).
  • Cuidar la codificación. Los usuarios no videntes utilizan screen readers, que traducen el texto a voz para poder consumir el contenido de los sitios web. Estas aplicaciones organizan la locución de acuerdo con la estructura del código fuente. Por ejemplo, una palabra se verá en negrita tanto con la etiqueta <b> como con la etiqueta <strong>, pero con <strong> el programa la pronunciará más fuerte. También describirá las imágenes usando la etiqueta <alt>, o brindará un índice del texto utilizando los encabezados que encuentre.
  • Brindar ayuda. Podemos colocar botones para agrandar el texto o bien enseñar las combinaciones de teclas que permiten hacerlo en la mayoría de los browsers.

Por último, cabe recordar que todos los consejos sobre legibilidad que brindamos en un artículo previo contribuyen a una mayor accesibilidad para discapacitados visuales.

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