Digital accessibility isn’t just for people with disabilities — it benefits everyone. From someone with low vision to a person using their phone under bright sunlight, designing with accessibility in mind means designing with empathy and responsibility.
This guide is based on the WCAG (Web Content Accessibility Guidelines), Bubble’s platform capabilities, and practical tests conducted within the editor. The goal is to show how you can start making your apps more accessible today — no external tools required.
What is WCAG and why does it matter?
WCAG is a set of international guidelines created by the W3C to make digital content accessible to all. It’s based on four core principles:
1. Perceivable – Content must be presented in ways users can perceive.
2. Operable – Users must be able to operate all interface components.
3. Understandable – Content must be clear, predictable, and easy to understand.
4. Robust – The content must be compatible with assistive technologies and various devices.
What can be implemented in Bubble
- Keyboard navigation
Why it matters:
Users with reduced mobility, visual impairments, or those who prefer keyboard shortcuts need to navigate without a mouse.
How it works in Bubble:
Tab navigation follows the element tree structure in the editor, not the visual layout. Group related fields and organize groups logically to ensure smooth navigation.
- Alt text for images
Why it matters:
Blind or visually impaired users rely on screen readers to understand images. If you place a meaningful image as a background, it won’t be read — excluding some users from understanding that information.
Best practice:
Use the image element and fill in the “Alt text” field with a concise, meaningful description.
Decorative images (e.g. visual textures or patterns) can be placed as backgrounds.
- Heading hierarchy (headings)
How to apply:
Go to Settings > SEO/metatags and enable heading tags (H1, H2…). Then assign proper semantic tags to text elements.
Why it matters:
Screen readers use this structure to navigate between sections. It also helps all users scan content more easily.
- Set the application language
By default, Bubble sets the app language to English (en_us). Go to Settings > General > Application primary language and change it to match your app’s language.
Why it matters:
Screen readers interpret the page’s language from this setting. If it’s incorrect, it can cause mispronunciations or misinterpretation.
- Contrast and legibility
Why it matters:
Users with low vision, color blindness, dyslexia, or who use the app outdoors need proper contrast for readability.
About AA and AAA levels:
WCAG defines contrast compliance levels:
- AA: At least 4.5:1 contrast for normal text, 3:1 for large text (18px+ or 14px bold)
- AAA: At least 7:1 for normal text, 4.5:1 for large text — used in stricter accessibility cases (e.g. government or education platforms).
Practical tip:
Use tools like Coolors Contrast Checker or the Stark plugin in Figma to validate your color choices.
In Bubble:
You can create custom styles using colors that already meet contrast requirements. This ensures consistency and lets you reuse these styles across elements.
- Proper use of zoom and font sizes
Avoid disabling the “Prevent user from zooming” option
Why it matters:
Disabling this option blocks users from zooming in — a feature often used by people with low vision.
On iOS: If an input field’s font size is below 16px, the browser may auto-zoom when that field is focused. This is not a bug — it’s expected behavior.
Solution:
Use at least 16px font size for input fields to prevent this auto-zoom while preserving accessibility.