Como cliente Premium de YUMPU, tienes la opción de adaptar completamente tu WebKiosk o App a tu identidad corporativa (CI). Esto incluye la posibilidad de subir CSS personalizado para dar estilo a fuentes, colores, espaciado, botones, navegación y más.
Para garantizar que tus personalizaciones no solo reflejen tu marca, sino que también sigan siendo accesibles para todos los usuarios, te recomendamos encarecidamente que sigas las mejores prácticas de accesibilidad. A continuación encontrarás guías útiles y herramientas de prueba para ayudarte a asegurar que tus decisiones de diseño cumplan con los estándares de accesibilidad actuales.
Por qué es importante la accesibilidad al usar CSS personalizado
Aunque el estilo personalizado ayuda a expresar tu marca, ciertos cambios de CSS pueden introducir barreras involuntariamente para usuarios con discapacidades, como:
Contraste de color insuficiente
Fuentes difíciles de leer o tamaños de texto muy pequeños
Elementos ocultos o inaccesibles al usar la navegación por teclado
Funciones accesibles solo al pasar el cursor
Problemas de diseño al hacer zoom o en dispositivos móviles
Recomendamos que todas las personalizaciones se evalúen en cuanto a accesibilidad según los estándares WCAG 2.1 Nivel AA.
Recomendaciones clave para un estilo accesible
A continuación se presentan elementos importantes a considerar al crear tu diseño personalizado:
Elemento | Mejor práctica |
Colores | Asegúrate de que haya un contraste suficiente entre el texto y el fondo (al menos 4.5:1). |
Fuentes | Utiliza tipografías legibles y evita tamaños de fuente menores de 14px. |
Estados de enfoque | Todos los elementos interactivos deben ser accesibles por teclado y tener un estado de enfoque claramente visible. |
Efectos al pasar el cursor | Asegúrate de que las funciones críticas sean accesibles sin usar el ratón. |
Herramientas recomendadas para probar la accesibilidad
Puedes utilizar las siguientes herramientas gratuitas para comprobar si tu CSS personalizado cumple con los estándares de accesibilidad:
WAVE Web Accessibility Evaluation Tool → https://wave.webaim.org/
Prueba el contraste, la estructura, el texto alternativo y más.Accessible Colors Checker → https://accessible-colors.com/
Evalúa fácilmente las combinaciones de colores de texto/fondo.WebAIM Contrast Checker → https://webaim.org/resources/contrastchecker/
Simple y eficaz para verificar las proporciones de contraste.Lighthouse (Chrome DevTools) → Haz clic con el botón derecho > “Inspeccionar” > pestaña “Lighthouse”
Genera informes de accesibilidad automatizados.axe DevTools (by Deque Systems) → https://www.deque.com/axe/devtools/
Extensión del navegador para pruebas exhaustivas de accesibilidad.
Lo que YUMPU proporciona de forma predeterminada
YUMPU garantiza que la estructura predeterminada de tu WebKiosk y App se desarrolla teniendo en cuenta la accesibilidad. Esto incluye la navegación por teclado, el marcado semántico y los diseños escalables.
Sin embargo, al subir CSS personalizado, tú asumes la responsabilidad de cualquier aspecto de accesibilidad relacionado con el estilo.
Nota: Te recomendamos encarecidamente que pruebes tu diseño regularmente, especialmente después de publicar nuevo contenido, ajustar colores o aplicar cambios importantes en el diseño.
Más recursos