Accesibilidad en los botones: una guía completa

Piensa en tu navegación online y en la frecuencia con la que haces clic en botones. Ya sea 'Comprar ahora' o 'Enviar', probablemente utilices botones con frecuencia mientras navegas por internet.

Ahora imagina que todos los botones estuvieran de repente deshabilitados o fueran imposibles de encontrar. Imagina lo disruptivo — y frustrante — que sería. En esta situación, tienes dos opciones: intentar encontrar una solución ingeniosa o abandonar tu tarea por completo.

Desafortunadamente, la situación anterior no es poco común para muchos usuarios. Para las personas con discapacidad, intentar hacer clic en los botones es una tarea innecesariamente complicada en la mayoría de los sitios web. Como es lógico, esto provoca que los usuarios abandonen un sitio en busca de algo más accesible.

Si tu sitio web no tiene botones accesibles, estás alejando a clientes — y posibles ventas. Entonces, ¿cómo se crean botones accesibles? ¿Y cómo estos elementos interactivos generan una experiencia más inclusiva para todos los usuarios? Hablaremos de todo esto y más a continuación.

Comprender la accesibilidad de los botones

Dado que los botones son una parte integral de la interfaz de usuario, deben diseñarse teniendo en cuenta la accesibilidad web. Esto significa que características como el contraste de color y el tamaño adecuados, etiquetas claras y un tamaño de fuente legible deben incluirse desde el principio. Así se garantiza que los botones sean utilizables por personas con diferentes discapacidades, incluyendo:

• Discapacidad visual: Las personas con discapacidades visuales, como ceguera, baja visión o cataratas, dependen de lectores de pantalla para acceder al contenido digital. Para que estas tecnologías puedan leer los botones, deben tener etiquetas claras y textos de enlace descriptivos.

• Diferencias cognitivas: Para usuarios con dislexia u otras discapacidades de procesamiento cognitivo, es importante mantener los botones simples y consistentes. Botones sencillos como “Comprar ahora” o “Más información” ayudan a estos usuarios a saber qué ocurre al hacer clic, reduciendo la ansiedad y la confusión.

• Limitaciones de motricidad: Las personas con movilidad reducida o temblores necesitan más flexibilidad en los botones. Esto incluye aumentar el área táctil de los botones y ofrecer opciones adicionales de navegación por teclado.

Requisitos de accesibilidad para los botones

La accesibilidad de los botones no es solo un buen diseño web: también es un requisito legal. Las Pautas de Accesibilidad para el Contenido Web (WCAG)(opens in a new tab) se consideran el estándar para la accesibilidad digital y se mencionan en la Equality Act 2010 y en las Public Sector Bodies (Websites and Mobile Applications) Accessibility Regulations 2018.

Según la última versión de las WCAG (WCAG 2.2), los botones deben ser perceptibles, operables y comprensibles. En otras palabras, los botones deben ser fácilmente visibles y los usuarios deben entender de inmediato cómo usarlos y qué acción ocurrirá al hacer clic en ellos.

Aquí tienes algunas de las pautas incluidas en las WCAG que aclaran qué características deben tener los botones para ser accesibles:

• El contraste de color entre un botón y su texto debe ser al menos de 4,5:1 y la relación entre el botón y el fondo debe ser de al menos 3:1.

• Los botones deben tener un tamaño mínimo de área de 24 x 24 píxeles CSS para que sean más fáciles de pulsar.

• Los usuarios deben poder determinar la finalidad del botón solo con el texto del botón.

• Los botones deben poder usarse de más de una manera, es decir, los usuarios deben poder navegar hasta ellos y hacer clic usando solo el teclado o tecnologías de asistencia.

Estas son solo algunas de las recomendaciones de las WCAG para los botones. Para una lista más completa, consulta aquí las directrices del World Wide Web Consortium (W3C)(opens in a new tab).

Un símbolo de accesibilidad dentro de un corazón con un degradado arcoíris.

Cómo diseñar para la inclusión

Teniendo en cuenta los requisitos legales y éticos, veamos cómo diseñar botones accesibles.

Forma y estructura

Los botones están hechos para interactuar, por lo que los botones grandes y sencillos siempre son mejores. Recuerda que no todo el mundo puede hacer clic fácilmente en un botón, así que es importante que tengan un área táctil grande y puedan activarse con comandos de teclado. También es recomendable evitar diseños demasiado complejos al crear botones, ya que pueden pasar desapercibidos en la página y afectar negativamente a la experiencia del usuario.

Color y contraste

Los botones deben ser fácilmente visibles para todos los usuarios, no solo para quienes tienen discapacidad. Y el color juega un papel fundamental en esto. Debes asegurarte de que tanto el color del botón como el del texto tengan suficiente contraste. Como mencionamos antes, el texto debe tener una relación de contraste mínima de 4,5:1 y una relación de 3:1 entre el botón y el fondo. Usar un comprobador de contraste de color puede ayudarte a tomar mejores decisiones de color accesibles.

Etiquetado claro

Piensa en tus botones como puertas de acceso a otras partes de tu sitio web. Es probable que los usuarios duden en atravesar una puerta misteriosa sin etiqueta; esa misma duda se aplica a los botones poco claros o ambiguos. Da a cada botón una etiqueta clara, distinta y directa. Puede que necesites usar WAI-ARIA (también conocido como roles ARIA) para ayudarte con esto. Incluir etiquetas ARIA en tu HTML semántico elimina la confusión o ansiedad en torno a los botones y establece expectativas claras sobre la acción que se producirá. Más importante aún, las etiquetas claras fomentan la inclusión en tu sitio, ya que las instrucciones simples y directas ayudan a que todos los usuarios —incluidos los que no tienen discapacidad— puedan usar tu web.

Comprender los estados de los botones

Quizá no sepas que los botones tienen diferentes estados además del predeterminado. Esto incluye hover, clic, activo, etc. Cada uno de estos estados debe tener señales visuales distintas para que las personas con discapacidad y las tecnologías de asistencia puedan usarlos. Esto ayuda a los usuarios de tecnología de asistencia a entender fácilmente con qué botón están interactuando. Implementar 'tabindex' en tu HTML es una forma sencilla de resaltar los widgets de botón o los cuadros de diálogo.

Garantizar la navegabilidad por teclado

No todos los usuarios pueden usar un ratón para navegar por la web, lo que significa que deben poder navegar y hacer clic en los botones solo con el teclado. Al crear y diseñar botones, asegúrate de que respondan a los atajos de teclado. Los elementos de botón también deben diseñarse con un estado de enfoque, es decir, cuando un botón recibe el foco (por ejemplo, al tabular o pasar el cursor por encima), debe mostrar una señal visual clara al usuario.

Compatibilidad con lectores de pantalla

Un gran porcentaje de personas con discapacidad visual (el 87,6% según una encuesta de WebAIM(opens in a new tab)) depende de los lectores de pantalla para usar la web. Estos dispositivos leen en voz alta el contenido de una página web, por lo que deberías probar cómo vocalizan tus botones. Considera si el texto tiene sentido o transmite una acción clara a los usuarios. También recomendamos probar con varios tipos de lectores de pantalla, como NVDA, Voiceover o JAWS, para aumentar la compatibilidad y la usabilidad.

El papel de AudioEye en la mejora de la accesibilidad de los botones

Los botones actúan como puerta de entrada a tu contenido, productos y servicios. Si no son accesibles, impides que un gran porcentaje de tus usuarios acceda a tu sitio web.

Mantén abiertas las entradas a las distintas partes de tu web con AudioEye. Nuestra Plataforma de Accesibilidad Automatizada y el conjunto de herramientas de accesibilidad ofrecen todo lo necesario para evaluar y mejorar la accesibilidad de los botones. Así es como lo hacemos:

• Las auditorías de expertos de AudioEye analizan tus páginas web en busca de errores comunes de accesibilidad, incluidos los botones inaccesibles, y ofrecen soluciones en tiempo real para errores simples.

• Las pruebas personalizadas de nuestro equipo de expertos examinan tu sitio en profundidad para detectar problemas de accesibilidad más complejos, como descripciones de botones deficientes, y ofrecen recomendaciones para su corrección.

• Formación en accesibilidad y recursos proporcionan a tu equipo los conocimientos y habilidades necesarios para crear y desarrollar contenido web accesible.

• Las herramientas de personalización de AudioEye permiten a los usuarios personalizar el aspecto y la sensación de los botones según sus preferencias individuales, incluyendo el cambio de tamaño o fuente de los botones.

• Supervisión activa monitoriza tus páginas web en tiempo real para detectar nuevos problemas de accesibilidad, asegurando que los errores se detecten y solucionen antes de que afecten a tus clientes.

Con AudioEye, comprometerse y diseñar para la inclusión digital es fácil. Nuestra plataforma proporciona todo lo necesario para priorizar la accesibilidad web en tus prácticas de diseño y es tu socio de confianza para lograr la accesibilidad e inclusión digital.