Aprenda a crear sitios web accesibles con los principios del diseño universal
La productividad nunca es un accidente. Siempre es el resultado de un compromiso con la excelencia, una planificación inteligente y un esfuerzo centrado ”.
– Paul J. Meyer, principal autoridad internacional en el establecimiento de metas, motivación , administración del tiempo y desarrollo personal y profesional.
La accesibilidad no es el primer elemento que consideramos cuando comenzamos a diseñar un sitio web. A menudo es una necesidad oculta en la que no pensamos hasta que algo sale mal. Por ejemplo, digamos que está en medio de un proyecto de diseño y uno de sus usuarios de prueba le dice que no puede leer el texto en la pantalla. A continuación, empezar a analizar lo que pasó, y resulta que él es uno de los 8% de los hombres en el mundo que tiene color de la ceguera, y que no podía diferenciar la fuente verde del fondo rojo. Bien, admitiremos que a menudo no vemos texto verde sobre fondo rojo, pero entiendes el punto, ¿no?
Los problemas de accesibilidad pueden infiltrarse a lo largo del ciclo de vida del proyecto. De hecho, los problemas de accesibilidad más costosos a menudo surgen después de la finalización de un proyecto. En países con fuertes legislaciones de accesibilidad, las empresas pueden verse envueltas en costosas demandas. En general, las empresas y las agencias federales son responsables de proporcionar igualdad de acceso a todos los usuarios. Además de los asuntos legales, la accesibilidad puede beneficiar a sus usuarios y también mejorar la marca de su producto. Por eso, aquí, le enseñaremos a planificar y centrar sus esfuerzos en diseñar para la accesibilidad en primer lugar.
Aprenda a aplicar los 7 principios del diseño universal
Los Principios del Diseño Universal fueron creados por Ron Mace y un grupo de investigadores y profesionales del diseño en los Estados Unidos. Fue publicado en 1997 por NC State University, The Center for Visual Design . Los Principios del Diseño Universal son un recurso invaluable que puede utilizar para planificar y guiar su proceso de diseño de manera inteligente. Esto beneficiará a la empresa para la que trabaja y a las personas que finalmente utilizarán sus diseños.
© Centro de Diseño Universal, Estado de Carolina del Norte. 2011, Todos los derechos reservados.
Los Principios del Diseño Universal son una base para los diseñadores que se propusieron crear productos de Diseño Universal. Los principios se crearon para guiar una amplia gama de disciplinas de diseño, incluidos entornos, productos y comunicaciones. Puede aplicar estos principios a cualquier estilo o tendencia de diseño; son atemporales y adaptables. Asumirá proactivamente la accesibilidad incorporando estos principios al comienzo de un proyecto.
Hay siete principios y todos incluyen pautas con enfoques prácticos para el diseño universal. Cada principio captura un concepto clave. Siempre que utilice las pautas para planificar y evaluar su diseño, una cosa importante a tener en cuenta es que a veces solo algunos de los siete principios serán relevantes para su diseño actual. En la siguiente sección, aprenderá sobre cada uno de los siete principios y sus pautas. Además, veremos ejemplos de diseño para cada principio para que pueda aplicarlos inmediatamente a sus proyectos.
Principio 1: Uso equitativo
“El diseño es útil y comercializable para personas con diversas habilidades”.
El uso equitativo es el primer principio porque es el motor de la accesibilidad. El principio lo promueve a pensar en usuarios con diferentes habilidades. Cuando utiliza este principio, debe considerar a todos los usuarios, en lugar de solo a los usuarios objetivo. Cuando diseñe para todos los usuarios, también mejorará la experiencia de sus usuarios objetivo y aumentará el valor de marca de su empresa.
Directrices para un uso equitativo
- 1a. Proporcionar los mismos medios de uso para todos los usuarios: idénticos siempre que sea posible, equivalentes cuando no.
- 1b. Evite segregar o estigmatizar a los usuarios.
- 1c. Las disposiciones sobre privacidad, seguridad y protección deben estar igualmente disponibles para todos los usuarios.
- 1d. Haga que el diseño sea atractivo para todos los usuarios.
Ejemplo de diseño: use un contraste de color fuerte para evitar estigmatizar a los usuarios con daltonismo
El daltonismo afecta aproximadamente a 1 de cada 12 hombres (8%) y 1 de cada 200 mujeres (0,5%) en el mundo. Puede evitar segregar o estigmatizar a sus usuarios diseñando paletas de colores con un fuerte contraste. Uno de los mitos comunes sobre la accesibilidad es que si diseñas pensando en la accesibilidad, estarías sacrificando el diseño visual. Esto es incorrecto. Un diseño con un fuerte contraste de color puede resultar estéticamente atractivo para todos los usuarios.
A la izquierda hay dos imágenes vistas por una persona con visión “normal”.
A la derecha, las mismas imágenes se simulan como las ve una persona con deuteranomalía.
Cuando elija colores para su diseño, asegúrese de evitar combinaciones de rojo / verde.
Principio 2: Flexibilidad en el uso
“El diseño se adapta a una amplia gama de preferencias y habilidades individuales”.
Ninguna persona es igual a otra. Un diseño estático e inflexible nunca podrá adaptarse a todos los usuarios. El principio de flexibilidad en el uso fomenta el diseño flexible, adaptable y / o personalizable. Tiene en cuenta las preferencias individuales y permite a los usuarios elegir cómo utilizarán un producto. Cuando ofrezca opciones a sus usuarios, se sentirán más libres y tendrán más control de su experiencia en su sitio web.
Directrices para la flexibilidad en el uso
- 2a. Proporcionar opciones en los métodos de uso.
- 2b. Se adapta al acceso y uso de diestros o zurdos.
- 2c. Facilitar la exactitud y precisión del usuario.
- 2d. Proporcionar adaptabilidad al ritmo del usuario.
Ejemplo de diseño: proporcionar personalización para paneles
La personalización es una técnica para adaptarse a una amplia gama de preferencias y habilidades individuales. Permite a los usuarios elegir y organizar lo que ven en un sitio web y cómo lo utilizarán. Los paneles son buenos ejemplos de personalización. Muchos sistemas empresariales y aplicaciones de gestión de proyectos tienen paneles de control personalizables. Dependiendo de sus diversas tareas y necesidades laborales, los usuarios pueden seleccionar lo que quieren ver en el panel y cómo quieren usarlo.
Utiliza tableros,
listas y tarjetas para ayudar a los usuarios a organizar y priorizar sus proyectos con flexibilidad.
Ofrece una variedad de opciones de tablero personalizables.
Aquí, el usuario puede elegir el color de las cartas para mostrar en un tablero.
Principio 3: uso sencillo e intuitivo
“El uso del diseño es fácil de entender, independientemente de la experiencia, el conocimiento, las habilidades lingüísticas o el nivel de concentración actual del usuario”.
El uso simple e intuitivo es uno de los objetivos del diseño de la experiencia del usuario . No es de extrañar que este sea también uno de los principios de diseño universales . Este principio tiene como objetivo reducir la complejidad y las cargas mentales o cognitivas. De acuerdo con la teoría de la carga cognitiva , los seres humanos solo pueden manejar de 3 a 9 elementos en un corto período de tiempo cuando procesan información. Para reducir la complejidad y las cargas cognitivas, siempre debe intentar presentar información entre 3 y 9 ítems.
Directrices para un uso sencillo e intuitivo
- 3a. Elimina la complejidad innecesaria.
- 3b. Sea coherente con las expectativas y la intuición del usuario.
- 3c. Acomodar una amplia gama de habilidades de alfabetización y lenguaje.
- 3d. Organice la información para que sea coherente con su importancia.
- 3e. Proporcione indicaciones y comentarios efectivos durante y después de la finalización de la tarea.
Ejemplo de diseño: reduzca el desorden visual con la divulgación progresiva
La divulgación progresiva es una técnica de diseño de interacción . Reduce el desorden visual y elimina la información irrelevante en la pantalla. Prioriza la información para mostrar en la pantalla según las necesidades e interacciones del usuario . Además de eso, permite al usuario profundizar para obtener más información, generalmente sin cargar la página. La divulgación progresiva reduce las cargas cognitivas de los usuarios y les ayuda a concentrarse en las tareas que tienen entre manos.
marketing por correo electrónico basado en la web
.
En su página de precios, utiliza la divulgación progresiva para mostrar los planes de servicio.
Un usuario puede interactuar con el control deslizante para comunicar la cantidad de suscriptores a los que se comunicará con MailChimp.
Según la entrada, MailChimp muestra un subconjunto de tres planes de servicio en la pantalla y recomienda uno de ellos al usuario.
Principio 4: Información perceptible
“El diseño comunica la información necesaria de manera efectiva al usuario, independientemente de las condiciones ambientales o las capacidades sensoriales del usuario”.
La información es fundamental para los usuarios. Ya sea que se comunique a través de texto, imágenes, audio o videos, asegúrese de que la información sea fácil de digerir y acceder. Cuando incorpore este principio en su diseño, comience con sus usuarios. Puede averiguar cuál es la mejor manera de presentar la información si considera a los usuarios con discapacidades, como los que tienen problemas de visión o audición.
Directrices para la información perceptible
- 4a. Utilice diferentes modos (pictórico, verbal, táctil) para una presentación redundante de información esencial.
- 4b. Proporcione un contraste adecuado entre la información esencial y su entorno.
- 4c. Maximice la “legibilidad” de la información esencial.
- 4d. Diferenciar los elementos de manera que se puedan describir (es decir, que sea fácil dar instrucciones o direcciones).
- 4e. Proporcionar compatibilidad con una variedad de técnicas o dispositivos que usan las personas con limitaciones sensoriales.
Ejemplo de diseño: Permita que los usuarios con discapacidad auditiva vean videos con la transcripción de video
La multimedia requiere experiencias multisensoriales, especialmente videos. Las personas con problemas de audición o barreras idiomáticas tienen dificultades para consumir información de los videos. Puede eliminar estas barreras proporcionando transcripciones de video y / o subtítulos. Las transcripciones de video y los subtítulos agregan un canal alternativo. Permiten a los usuarios consumir palabras e información del video sin depender de la audición. Diseñar teniendo en cuenta la accesibilidad puede ser una situación en la que todos salgan ganando tanto para la empresa como para los usuarios, al igual que para TED.
Las charlas suelen durar 18 minutos o menos y, a menudo, se cargan como videos en sus sitios web.
Con el fin de llegar y ayudar a tantos usuarios como sea posible, el sitio web de TED proporciona subtítulos y transcripciones para sus videos en línea.
También ofrece la opción de seleccionar un idioma.
Es un gran servicio para el usuario con discapacidad auditiva, y es un gran servicio para todos los que prefieren leer en lugar de ver y escuchar videos.
A su vez, también es bueno para TED, ya que llegan a más usuarios y aumentan su popularidad.
Al diseñar para la accesibilidad, este suele ser el caso.
Es una situación en la que todos ganan, tanto para los usuarios como para las empresas u organizaciones para las que diseñamos.
Principio 5: Tolerancia al error
“El diseño minimiza los peligros y las consecuencias adversas de acciones accidentales o no intencionales”.
“Los seres humanos solo deben usar tecnología que, si ocurre el peor de los casos, conduce a un daño aceptable. Definitivamente la energía nuclear no está en esa categoría. Quiero un mundo industrial donde las personas puedan cometer errores. Porque la creatividad humana tiene que ver con que se nos permita cometer errores. Queremos un entorno amigable con los errores “.
– Hans-Peter Durr, físico alemán
Los errores son inevitables entre los humanos, de ahí el adagio “errar es humano”. Si bien no estamos diseñando para tecnología nuclear, deberíamos diseñar para un entorno amigable con los errores . El diseño universal tiene como objetivo diseñar para todos los usuarios, así como diseñar con anticipación para diferentes entornos y acciones de los usuarios; este principio lo empuja a pensar más allá de la pantalla y cómo el sistema y el usuario interactuarán entre sí.
Pautas para la tolerancia al error
- 5a. Disponga los elementos de manera que se minimicen los peligros y errores: elementos más usados, más accesibles, con elementos peligrosos eliminados, aislados o blindados.
- 5b. Proporcione advertencias sobre peligros y errores.
- 5c. Proporcione características a prueba de fallas.
- 5d. Desaliente la acción inconsciente en tareas que requieran vigilancia.
Ejemplo de diseño: reduzca el error de envío con la validación de formularios
La validación de formularios minimiza y evita los errores del usuario. Hay tres formas de validar las entradas del formulario.
1. Validación del formato de entrada : asegúrese de que el usuario haya utilizado el formato correcto para un campo de entrada. Por ejemplo, el campo de entrada de la dirección de correo electrónico debe tener un formato que comience con una cadena de alfabetos y / o letras, seguido de ‘@’ y un nombre de dominio de correo electrónico.
2. Validación de datos : verifique que los datos que ingresó el usuario estén en el contexto correcto. Por ejemplo, muchos sistemas de reserva de hoteles necesitan que las fechas de entrada no sean anteriores al día “actual”.
3. Validación del servidor: la validación del formato de entrada y la validación de datos se aplican a un campo de entrada específico. La validación del servidor envía todos los datos de un formulario al servidor y comprueba que la relación de datos sea correcta. Por ejemplo, un formulario de inicio de sesión simple usaría la validación del servidor para verificar si el nombre de usuario y la contraseña son correctos.
Aquí está el formulario de registro de Twitter con mensajes de error para errores de validación del formato de entrada.
Comprueba el formato correcto de correo electrónico y contraseña.
Principio 6: Esfuerzo físico bajo
“El diseño se puede utilizar de manera eficiente y cómoda y con un mínimo de fatiga”.
Es posible que no asociemos primero los esfuerzos físicos con el uso de la web. Cualquiera puede sentarse fácilmente y usar un mouse, pero la tecnología ahora está integrada y es omnipresente en los lugares de trabajo. Muchas personas usan sus computadoras durante ocho horas o más para realizar tareas en el trabajo. La cantidad de tiempo que pasamos en nuestras computadoras es una carga para nuestros cuerpos. De hecho, las personas con discapacidad física tienen aún más dificultades para usar la web que los usuarios normales. Por ejemplo, aquellos con problemas de movilidad pueden tener dificultades para mover el mouse hacia el objetivo deseado. Es por eso que diseñar para un esfuerzo físico bajo es vital a tener en cuenta cada vez que trabajamos.
Directrices para un esfuerzo físico reducido
- 6a. Permita que el usuario mantenga una posición corporal neutra.
- 6b. Utilice fuerzas operativas razonables.
- 6c. Minimiza las acciones repetitivas.
- 6d. Minimice el esfuerzo físico sostenido.
Ejemplo de diseño: minimice el uso del mouse con atajos de teclado
Los atajos de teclado reducen la necesidad de pasar del teclado al mouse para tareas simples. La mayoría de los navegadores como Chrome, Firefox y Safari proporcionan atajos de teclado para realizar tareas como copiar (Ctrl + C) y pegar (Ctrl + V). Puede diseñar experiencias interactivas excelentes agregando los atajos de teclado apropiados. Mejorarán la navegación y harán que los sitios web sean más fáciles de usar para todos los usuarios.
Permite a los equipos realizar un seguimiento y gestionar elementos de trabajo.
Asana tiene un amplio conjunto de atajos de teclado.
Estos atajos reducen el uso del mouse y minimizan las acciones repetitivas.
Principio 7: Tamaño y espacio de aproximación y uso
“Se proporciona el tamaño y el espacio adecuados para el acercamiento, el alcance, la manipulación y el uso, independientemente del tamaño del cuerpo, la postura o la movilidad del usuario”.
Para los diseñadores de productos, su enfoque está en factores de forma como el tamaño y el espacio involucrado con el producto. Como diseñadores digitales, nuestro enfoque está menos en los factores de forma, sino más en lo que hay en la pantalla . Esta es una mentalidad miope porque es importante pensar fuera de la pantalla y considerar también el entorno de nuestros usuarios, especialmente porque los usuarios ven sitios web no solo en computadoras de escritorio, sino también, cada vez más, en dispositivos móviles. Como puede ver, la mayoría de las pautas para este principio se aplican más al diseño ambiental y de productos. Sin embargo, todavía podemos mirar el principio y sus pautas para crear un sitio web de diseño universal, uno para dispositivos móviles y de escritorio.
Directrices de tamaño y espacio de aproximación y uso
- 7a. Proporcione una línea de visión clara de los elementos importantes para cualquier usuario sentado o de pie.
- 7b. Haga que el alcance de todos los componentes sea cómodo para cualquier usuario sentado o de pie.
- 7c. Se adapta a las variaciones en el tamaño de la mano y el agarre.
- 7d. Proporcione un espacio adecuado para el uso de dispositivos de asistencia o asistencia personal.
Ejemplo de diseño: considere el área objetivo de su sitio web cuando esté en dispositivos móviles.
En un escritorio, un usuario interactúa con un sitio web a través de un pequeño puntero en la pantalla. En un dispositivo móvil, un usuario interactúa con un sitio web usando su dedo índice o pulgar. Un área objetivo pequeña puede ser un problema en los dispositivos móviles porque es más difícil de seleccionar con precisión. Según un estudio del MIT Touch Lab en 2003, el tamaño medio de un dedo índice de un adulto humano es de 1,6 a 2 cm. Al convertir eso, tenemos aproximadamente entre 60 y 76 píxeles en una pantalla digital. Por lo tanto, la próxima vez que diseñe para dispositivos móviles, asegúrese de que las áreas de destino táctil tengan en cuenta los factores físicos humanos.
Si convertimos eso a píxeles, entonces es aproximadamente de 60px a 76px en una pantalla digital.
Puede mejorar la accesibilidad de su producto si proporciona áreas de destino adecuadas para sus usuarios.
La importancia del diseño universal
El trabajo internacional más importante sobre accesibilidad es la Convención sobre los Derechos de las Personas con Discapacidad (CRPD). Nos referimos a ella como la Convención por parte de los legisladores y la comunidad de personas con discapacidad. Es el primer tratado importante de derechos humanos del siglo XXI y protege los derechos y la dignidad de las personas con discapacidad. Exige la eliminación de las barreras ambientales y de actitud en los espacios físicos y digitales. Las Naciones Unidas (ONU) adoptaron la CDPD en 2007. En julio de 2015, 157 países habían ratificado la Convención y 159 países la habían firmado.
La Convención enumeró el Diseño Universal como una de las obligaciones generales de proteger los derechos de las personas con discapacidad. “Emprender o promover la investigación y el desarrollo de bienes, servicios, equipos e instalaciones de diseño universal, tal como se definen en el artículo 2 de la presente Convención, que deben requerir la mínima adaptación posible y el menor costo posible para satisfacer las necesidades específicas de una persona con discapacidad , para promover su disponibilidad y uso, y para promover el diseño universal en el desarrollo de estándares y directrices ”;
– Convención de la ONU sobre los derechos de las personas con discapacidad, artículo 4, 2006
