Categorías
Diseño

Checklist de accesibilidad para diseñadores

El diseño accesible es un buen diseño: una interfaz de usuario accesible (UI) abre experiencias a una gama más amplia de usuarios y mejora las experiencias para los usuarios existentes. Esa es la belleza de diseñar con todas las habilidades en mente: beneficia a todos, no solo a aquellos con visión, audición o movilidad limitadas.

Al diseñar para discapacidades, estás resolviendo para unos pocos, pero extendiéndose a muchos. Tomemos por ejemplo, una tecnología como los subtítulos. Aunque fue diseñado para usuarios con audición limitada, muchas personas usan subtítulos para ver películas o programas de televisión hoy en día. La navegación con teclado es otro gran ejemplo: los usuarios con movilidad limitada usan el teclado para navegar por las pantallas, pero muchos otros usuarios también usan teclados para navegar rápidamente por las páginas. Claramente, todos los usuarios pueden beneficiarse de características más accesibles, y el diseño de la interfaz de usuario accesible no es diferente.

Jerarquía y orden ✓

¿Pueden los usuarios navegar visualmente una página? Al escanear una página para obtener información, los usuarios confían en la jerarquía visual: elementos importantes en la parte superior, elementos relacionados agrupados y encabezados que resumen el contenido. Los usuarios deberían poder recopilar información clave rápidamente y en un orden lógico. Los elementos esenciales incluyen:

  • Un título de página que describe el propósito de la página.
  • Encabezados que transmiten la estructura de la página.
  • Labels correspondientes por cada elemento de formulario.

Referencias:

Estructura de Jerarquía y orden
Ilustración de jerarquía y orden

Orientación (Vertical/Horizontal) ✓

Las aplicaciones o sitio web deben garantizar que el contenido se muestre en la orientación vertical u horizontal que prefiera el usuario. Algunos usuarios tienen sus dispositivos montados en una orientación fija (por ejemplo, en el brazo de una silla de ruedas eléctrica). Por lo tanto se debe pensar en un diseño que soporte ambas orientaciones. Los elementos esenciales incluyen:

  • Distintas resoluciones para cada caso de uso.
  • Coherencia en la estructura del contenido.
  • Zoom para secciones completas o aumento/disminución de texto.

Referencias:

Diseño responsive
Ilustración de diseño responsive

Uso del color y contraste ✓

El color es un elemento importante en el diseño, ya que mejora su atractivo estético, usabilidad y accesibilidad. Sin embargo, algunas personas tienen dificultades para percibir el color. Las personas con visión parcial a menudo experimentan una visión limitada del color, y muchos usuarios mayores no ven bien. Las deficiencias de color pueden afectar un poco el contraste. Por lo tanto, se recomienda tener un contraste adecuado entre el texto y el fondo. Algunas características esenciales son:

  • La relación (ratio) mínima de contraste de texto a fondo debe ser 4.5:1.
  • La relación (ratio) mínima de contraste de componentes (ej: Botón) a fondo debe ser 3:1.
  • El color no debe ser usado como un único indicador.

Referencias:

Ejemplo de buen y mal uso de contraste de colores
Ejemplo de buen y mal uso de contraste de colores

Navegación a través del teclado ✓

Cuando el contenido puede ser operado a través de un teclado o un teclado alternativo de asistencia, es operable por personas sin visión (que no pueden usar dispositivos como el mouse que requieren coordinación ojo-mano), así como por personas que deben usar teclados alternativos o dispositivos de entrada que actúan como emuladores de teclado. Los emuladores de teclado incluyen software de entrada de voz, software de sorber y soplar, teclados en pantalla, software de escaneo y una variedad de tecnologías de asistencia y teclados alternativos. Las personas con baja visión también pueden tener problemas para rastrear un puntero y encontrar el uso de software mucho más fácil (o solo posible) si pueden controlarlo desde el teclado. Para usar el teclado con un control (también componente), el control debe tener foco, y para recibir el foco (sin usar un puntero), el control debe ser accesible en un diseño de interfaz de usuario a través de la navegación por tab. Algunas de sus características principales:

  • Establece un orden de tabulación lógico a través de enlaces, controles de formulario y objetos interactivos.
  • Ajustar el foco de una manera intuitiva en una secuencia de forma coherente.
  • Proporcionar un mecanismo para descartar fácilmente el contenido adicional, como presionar Escape.

Referencias:

Ejemplo de foco activo en navegación por tab del teclado
Ejemplo de foco activo en navegación por tab del teclado

Recursos

10 Reviews

Edythe Eger - edythe.eger@gmail.com
1

To the accesibilidadwebchile.cl Administrator!

Are you frustrated by the high prices for simple web work and website updates? Why pay $50+ per hour for web development work, when you can get higher quality results AT LESS THAN HALF THE COST? We are a FULL SERVICE, USA managed web development agency with wholesale pricing. No job too big or small. Test us out to see our value. Use the link in my signature, for a quick turn around quote. Kristine Avocet Senior Web Specialist Fusion Web Experts 186 Daniel Island Drive Daniel Island, SC 29492 www.fusionwebexperts.tech

Regan Yun - regan.yun@yahoo.com
1

Dear accesibilidadwebchile.cl Admin!

Are you looking for a capable financial company to fund your business project? we are here to provide you with the best solution for your business growth. we provide the most suitable business loan package to meet your need. email me here. info@financeworldwidehk.com Best regards, Laura Cha. Customer Service Representative

August Appleroth - august.appleroth@yahoo.com
1

To the accesibilidadwebchile.cl Owner!

WANTED: Partnerships & Agents for Global E-commerce Firm 4U2 Inc., a premier E-commerce , Sourcing Brokerage firm, is actively seeking partnerships and collaboration with manufacturers and wholesalers for agricultural, commercial, and residential products. We offer a diverse marketplace for both new and used items, including vehicles and equipment. Why Choose 4U2 Inc.? (see https.//www.4u2inc.com) Global reach for your products Immediate requirements for a wide range of items Opportunity to expand your business network Join Our Team We’re also looking for Independent Contractor Agents (Account Executives) to help us discover new business opportunities. Whether you’re seeking a full-time or part-time role, you can earn up to $60,000 based on performance. Get in Touch Don’t miss out on this opportunity. Contact us at 4u2inc123@gmail.com to learn more or to start our partnership today! This version is more direct and easier to read, highlighting the key points and call to action for potential partners and agents. If you need further refinements or have specific requirements, feel free to let me know!

Phil Stewart - noreplyhere@aol.com
http://aol.com
1

??

Hi, I was wondering if you could benefit from me blasting your ad to millions of contact forms just like I blasted my message to yours just now? Check out my site below for details on how it works. http://ks9sjw.blast-to-forms.xyz

Phil Stewart - noreplyhere@aol.com
http://aol.com
1

??

Want Your Ad Everywhere? Reach Millions Instantly! For less than $100 I can blast your message to website contact forms globally. Contact me via skype or email below for info Phil Stewart Email: lknqdk@mail-to-form.xyz Skype: form-blasting

Colin Flegg - flegg.colin@gmail.com
1

To the accesibilidadwebchile.cl Webmaster!

hi!

Write a Review

Agregar un comentario

Su dirección de correo no se hará público.