🌐 Ensuring Accessibility When Customizing Your WebKiosk or App with Custom CSS
✅ As a Premium customer of YUMPU, you have the option to fully adapt your WebKiosk or App to your corporate identity (CI). This includes the ability to upload custom CSS to style fonts, colors, spacing, buttons, navigation, and more.
To ensure that your customizations not only reflect your brand but also remain accessible to all users, we strongly encourage you to follow accessibility best practices. Below you'll find useful guidelines and testing tools to help ensure that your design choices meet current accessibility standards.
❗ Why Accessibility Matters When Using Custom CSS
While custom styling helps express your brand, certain CSS changes may unintentionally introduce barriers for users with disabilities, such as:
Insufficient color contrast
Difficult-to-read fonts or very small text sizes
Hidden or unreachable elements when using keyboard navigation
Inaccessible hover-only functions
Layout issues when zoomed in or on mobile devices
⚖️ We recommend that all customizations be evaluated for accessibility based on the WCAG 2.1 Level AA standards.
📄 Key Recommendations for Accessible Styling
Here are important elements to consider when creating your custom design:
Element | Best Practice |
Colors | Ensure sufficient contrast between text and background (at least 4.5:1). |
Fonts | Use legible typefaces and avoid font sizes smaller than 14px. |
Focus States | All interactive elements must be keyboard-accessible and clearly focusable. |
Hover effects | Make sure critical functions are accessible without a mouse. |
🧪 Recommended Tools for Accessibility Testing
You can use the following free tools to check if your custom CSS meets accessibility standards:
✅ WAVE Web Accessibility Evaluation Tool → https://wave.webaim.org/
Tests contrast, structure, alt text, and more.✅ Accessible Colors Checker → https://accessible-colors.com/
Easily evaluate text/background color combinations.✅ WebAIM Contrast Checker → https://webaim.org/resources/contrastchecker/
Simple and effective for verifying contrast ratios.✅ Lighthouse (Chrome DevTools) → Right-click > “Inspect” > “Lighthouse” tab
Generates automated accessibility reports.✅ axe DevTools (by Deque Systems) → https://www.deque.com/axe/devtools/
Browser extension for comprehensive accessibility testing.
🧰 What YUMPU Provides by Default
YUMPU ensures that the default structure of your WebKiosk and App is developed with accessibility in mind.
This includes keyboard navigation, semantic markup, and scalable layouts.
⚠️ However, when uploading custom CSS, you take over responsibility for any additional styling-related accessibility aspects.
📌 Note: We strongly recommend that you test your design regularly, especially after launching new content, adjusting colors, or applying major layout changes.
📘 More Resources