Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Accessibility
Webdesign

Básicos de Accesibilidad: Diseñando para Discapacidad Visual

by
Length:MediumLanguages:

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

Con el 4.5% de la población total experimentando daltonismo, 4% sufriendo de debilidad visual y otro 0.6% siendo ciegos, las dificultades visuales cuando se usa la web son más predominantes de lo que podrías estimar. Esta guía contemplará cómo diseñar para personas con discapacidades visuales puede mejorar la web para todos.

Accesibilidad para Todos

Hoy en día la web debe hacerse accesible para todos--independientemente de las habilidades o discapacidades de la persona.

"La accesibilidad grantiza que la gente con discapacidades pueden tener acceso a la misma información de un sistema que todos los demás, y también obtener algunos beneficios"

Como se planteó en un artículo anterior, existe un amplio rango de discapacidades de cinco áreas notables:

  • Auditiva
  • Cognitiva
  • Neurológica
  • Física
  • Del Habla
  • Visual

Esta guía se enfocatá en diseñar para discapacidades visuales, las cuáles pueden ser bastante comunes, variando desde discapacidades medias hasta extremas. De hecho, Cathy O'Conner (diseñadora y autora de Smashing Magazine) estima que por cada dos millones de clientes en línea, alrededor de 200,000 se beneficiarían de diseños que son más fáciles de ver.

Es una estimación justa, especialmente considerando cómo cualquiera puede desarrollar debilidad visual a medida que envejecen. Las discapacidades visuales comunes pueden incluír:

Daltonismo

El Daltonismo involucra la dificultad de percibir o distinguir entre colores, así como la sensibilidad al brillo de color. Afecta a aproximádamente 4.5% de la población mundial total.

From httpcolorvisiontestingcom

Debilidad Visual

La debilidad visual puede incluír vista parcial en uno o ambos ojos, agudeza pobre (visión borrosa), visión de tunel, pérdida del campo central y visión nublada. Afecta a 246 millones de personas o alrededor del 4% de la población mundial.

Low vision on googlecom

Ceguera

La ceguera es la pérdida sustancial de la visión en ambos ojos de una persona. Afecta a aproximádamente 39 millones de personas o el 0.6% de la gente.

Las Personas Perciben la Web de Manera Diferente

La naturaleza diversa de estas discapacidades puede crear una amplia variación de cómo las páginas web son percibidad por personas con habilidades capacidades visuales diferentes. Como se mencionó anteriormente, un gran número de personas sufre de discapacidades visuales, así que debemos asegurarnos de que pueden accesar e interpretar todas las características de la misma manera.

Viendo la Página de Inicio de Tumblr Con Discapacidades Visuales

Como ejemplo, considera la página de inicio de Tumblr, en donde el fondo de la página es una imagen grande (creada por sus usuarios):

the Tumblr Homepage
La Página de Inicio de Tumblr

Dependiendo del tipo y nivel de discapacidad visual que una persona pudiera tener, el sitio podría ser percibido en una cantidad de maneras(aquí simuladas con la extensión de Chrome NoCoffee):

Peripheral blocked vision eg glaucoma
1. Visión periférica bloqueada (e.g. glaucoma)
Large spots of blocked vision diabetic retinopathy
2. Grandes espacios de visión bloqueada (retinopatía diabética)
Loss of acuity blurred vision
3. Pérdida de agudeza (visión borrosa)
Ghosting issues
4. Problemas de espectros
Tritanopia color blindness
5. Daltonismo con Tritanopía

Los ejemplos de arriba muestran diferentes tipos de discapacidad de debilidad visual y también un par de ejemplos de daltonismo. Para recapitular:

  • La visión de tunel (ver imagen 1) es un tipo de bloqueo de visión periférica, la cuál recuce la cantidad elementos visibles en la pantalla. El usuario solo puede ver elementos centrales.
  • La pérdida de agudeza, o visión borrosa (ver imagen 3), hace al texto difícil de leer, ya que se vuelve borroso para el usuario.
  • El daltonismo (ver imagen 5) reduce el número de colores que un usuario puede ver, así que hay más probabilidad de que los elementos luzcan similares.

Variaciones en la Percepción Afecta a la Usabilidad

Debido a estas variaciones en la percepción, los elementos clave de un sitio web dado pueden volverse menos accesibles (y por lo tanto menos usables) dependiendo del grado de la discapacidad visual del usuario.

Características inaccesibles

Por ejemplo, una pérdida de agudeza (visión borrosa) puede hacer la barra de búsqueda del sitio web de Tumblr casi desaparecer en el fondo. Lo mismo puede decirse del botón de inicio de sesión:

Compara la barra de búsqueda en la imagen a la isquierda con la que está justo a la derecha, la barra de búsqueda se ha fusionado en el fondo y es apenas visible.

Los colores pierden significado

Alejándose del ejemplo de Tumblr, considera a una persona con daltonismo rojo/azul (protanopía). En una página de resultados de búsqueda de Google, el color usado para representar la página actual de resultados parece menos significativa para un usuario daltónico, haciéndola posiblemente un poco menos útil:

Google Protonopia example
Ejemplo de protonopía en Google

El contraste de rojo y azul, es menos obvio para un usuario daltónico y parece más un color verdoso claro contra un verde oscuro.

Presentación de Contenido

Ambos ejemplos anteriores muestran cómo las variaciones en la percepción pueden afectar la usabilidad de colores principales. Afortunadamente, la gente con dichos impedimentos visuales pueden alterar la representación del contenido de manera que los elementos se vuelvan más accesibles y usables para ellos. Esto se puede lograr por:

  • 🔍 Engrandeciendo el tamaño del texto
  • 🎨 Personalizando contrastes de color
  • 👁‍🗨 Usando lectores de pantalla (ceguera)
  • 🎞 Subtítulos o leyendas en videos
  • 📝 Texto de imagen alternativo para describir imagenes

Dichos ajustes pueden ser hechos mediante ajustes por defecto en un navegador web. Adicionalmente, alteraciones más avanzadas pueden ponerse a disposición a través de extensiones de accesibilidad para el navegador. Por ejemplo, Google ha construido varios complementos de accesibilidad para usuarios con impedimentos:

  • Herramientas de Desarrollador ExtensionAccessibility: agrega una revisión de Accesibilidad y un panel lateral de Accesibilidad en la pestaña de Elementos, para tus Herramientas de Desarrollador de Google.
  • High Contrast: navega la web con tu elección de varios filtros de alto contraste de color diseñados para hacer más fácil leer texto.
  • ChromeVox: trae la velocidad, versatilidad y seguridad a Chrome para usuarios con impedimentos visual.

High Contrast, por ejemplo, permite a las perosnas variar el contraste de un sitio web, haciendo el texto más claro de lectura. Aquí está en acción en la página de Spotify:

Example of an accessibility browser plugin being used to change the contrast of a web page
Ejemplo de un plugin de accesibilidad de navegador siendo usado para cambiar el contraste de una página web

Como se aprecia arriba, la extensión del navegador puede:

  • Incrementar contraste
  • Establecer a escala de grises
  • Invertir colores
  • Invertir escala de grises
  • Usar amarillo en negro

Con todos los diferentes impedimentos visuales, y la gran cantidad de herramientas que pueden ser usadas para alterar cómo aparece el contenido, se vuelve claro que no siempre podemos determinar cómo se mostrarán las páginas o cómo serán percibidas por la gente.

Ya que el contenido puede aparecer en una cantidad de formas, debemos entonces ser cuidadosos en cómo nuestro contenido es estructurado, incluso a nivel de código. Por eso se vuelve importante mantener una jerarquía clara de información, ya que la gente utiliza diferentes medios para presentar esa información. Echémos un vistazo a algunas mejores prácticas para asegurar que nuestro contenido es siempre accesible, sin importar cómo se muestre:

Mejores Prácticas

Aquí hay una lista de seis mejores prácticas para hacer tus diseños mejores para aquellos con impedimentos visuales.

1. Separa Contenido y Estructura

Es importante que aseguremos que el contenido web es independiente de su estructura subyacente. Cuando los cambios a la presentación pueden incluir tamaño de los elementos (tales como texto e imagenes), el espaciado entre elementos o si los elementos son visibles en absoluto (puede que los usuarios ciegos no vean imagenes), se vuelve más claro que el desarrollador no puede determinar cómo se verá el contenido en cualquier momento dado.

Como se plantea por la W3C, para hacer que funcionen distintos métodos de navegación (e.g. usar lectores de pantalla o navegación con teclado), los desarrolladores deben asegurar que su código provee una estructura que es independiente de la presentación:

"Los desarrolladores necesitan asegurar que la presentación de contenido web es independiente de su estructura subyacente" -- W3C

Una estructura sólida también proveerá etiquetas semánticas relevantes tales como enxabezados, párrafos y elementos de lista para asegurar qué, por ejemplo, un lector de pantalla puede interpretar la información y presentarla en una manera alternativa:

An example of a website layout model using correct semantic tags
Ejemplo de diseño de sitio web usando etiquetas semánticas correctas

2. Proporciona Alternativas de Texto

Como se explicó previamente, ciertos elementos estructurales, especialmente imagenes, no pueden ser percibidas por algunos usuarios. Por ejemplo, la gente ciega usando tecnologías asistentes (como lectores de pantalla) para interpretar sitios web escucharán la lectura del texto alternativo atribuído a la imagen, en vez en verdad ver la imagen. Si ese texto no está presente, fracasa en ser lo suficientemente descriptivo, ellos no serán capaces de percibir la información como deberían.

Aquí hay un ejemplo de la Universidad de Leicester, mostrando texto alternativo preciso, el cual proporciona más contexto al usuario:

Example of accurate alternative text usage on an image
Ejemplo de uso de texto alternativo preciso en una imagen

Ability.net proporciona cinco reglas de oro para usar etiquetas alt (textos alternativos) correctamente para poder hacer un sitio web más accesible:

  1. Cada <img> debe tener un atributo alt=""
  2. Describe la información, no la imagen
  3. Las imagenes activas requieres un texto alt descriptivo
  4. Las imagenes que contienen información requieren text alt descriptivo
  5. Las imagenes decorativas deberían tener texto alt vacío

3. Evita Usar Color para Transmitir Información

Los colores no son la mejor manera de transmitir información, como se muestra en el siguiente ejemplo. Abajo, un borde rojo es usado para resltar campos que no han sido llenados correctamente. Consecuentemente, si un usuario es daltónico, no será capaz de ver esta indicación, así que se vuelve difícil entender cuáles campos tienen errores:

form input with red outline

El uso de iconos y etiquetas para mostrar qué campos son invalidos comunica mejor la información a un usuario daltónico:

inputs with icons and messages
Ejemplo de Bootstrap v4

Este ejemplo muestra que el color no debería ser usado por sí mismo para transmitir información, solamente como adición a información existente.

4. Usa Texturas En Vez de Color

Los usarios daltónicos también podrían encontrar difícil identificar la diferencia entre ciertos colores. Por ejemplo, verde, rojo y café pueden verse similares.

How color blind users perceive green brown and red
Cómo perciben los usuarios daltónicos el verde, cafe y rojo

Por lo tanto, cuando los colores son usados en tablas y gráficas, puede ser útil aplicar superposiciones con patrones a colores sólidos para poder dar a los usuarios una manera más clara de distinguir entre elementos. Esto no solo ayuda a quellos que son daltónicos, sino también lo hace más fácil para todos. Considera las etiquetas de Trello como ejemplo de aplicar texturas:

Without texture with texture color blind friendly labels on Trello
A la derecha, las etiquetas amigables con los daltónicos de Trello

5. Prueba Esquemas de Color Monocromáticos

Los esquemas de color monocromáticos hacen uso solo de colores con un solo matíz. Aquí hay un ejemplo, creado con paletton.com:

monochromatic palette created with palettoncom
Paleta monocromática creada con paletton.com

Usando solo sombras de un solo matíz, cualquier significado extra pudiera ser introducido por diferentes matices de color desaparece.

Las variaciones en contraste y tonos pueden ser usadas para proveer significado o importancia a los elementos y atrae la atención del usuario a diferentes áreas. El significado aquí también puede ser más fácilmente transportado a usuarios daltónicos como se muestra en el siguiente ejemplo de un sitio monocromático.

BIGSOUND Buzz es un sitio web que hace un gran uso de esquema de color monocromático:

Monochrome on BIGSOUND Buzz
Monocromía en BIGSOUND Buzz
Monochrome on BIGSOUND Buzz
Texturas en todos lados

Un usuario daltónico podrá ver todos los mismos tonos y contrastes, pero en un matíz diferente:

BIGSOUND Buzz for color blind
BIGSOUND Buzz para daltónicos

6. Usa Colores Contrastantes para Mejor Legibilidad

El contraste es la diferencia entre el color más claro (e.g. ek fondo) y el color más oscuro (e.g. el texto). Por ejemplo, considera esta tabla de sensibilidad de contraste:

contrast sensitivity chart

El superior izquierdo (letra A) tiene el mayor contraste, conforme nos movemos a la derecha, el contraste disminuye, mientras que la diferencia en luminosidad entre el fondo y el primer plano se reduce. Eventualmente, dependiendo de la sensibilidad de contraste de una persona, no serán capaces de distinguir el siguiente texto del fondo.

Por lo tanto, para segurar que el texto es legible por personas con impedimentos visuales, la WCAG ha provisto una directriz de proporción de contraste. Ellos sugieren que una proporción de contraste de al menos 4.5:1 debe existir entre el texto y su fondo. Esta proporción baja a 3:1 para texto más grande (24px o 29px negrita)

Un ejemplo de esta proporción es mostrado en los ejemplos de abajo, de accessebility.psu.edu:

example of contrast ratios from from accessebilitypsuedu

Los Diseños Inclusivos Mejoran el Producto para Todos

En general, diseñando siendo einclusivo de las discapacidades más extremas, siempre mejora el producto final para todos los demás.

Por ejemplo, diseñar para personas sin vista puede establecer una gran base para aquellos que pueden ver. Esto es debido a que nos pone en una posición para asegurar que la estructura del sitio web es independiente de su presentación y puede ser interpretado tanto por tecnologías asistentes como personas. Por lo tanto, si ocurren cambios en la presentación por cualquier otra razón, la estructura del sitio web seguirá siendo accesible.

Adicionalmente, asegurar que el color solo es usado para resaltar lo que ya es visible es otro gran paso para construir un sitio altamente accesible y por lo tanto usable. Un útil proceso de diseño puede entonces ser implementado en iteraciones tempranas de un producto en escala de grises y después aplicar color al final.

Otras Lecturas y Recursos

No necesitas reeinvetar la rueda cuando creas diseños accesibles; hay muchos sistemas de diseño y directrices que pueden ayudarte.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.