Skip to content
← All guides
Best Practices6 min read

Accessible by default

By The Vorx Team

Accessible by default

Accessibility isn't a mode you switch on at the end — it's a set of habits that make an app clearer for everyone. People navigate with keyboards, read on small screens, use screen readers, or simply work in bright sunlight. Building with them in mind costs little and improves the app for all users.

Ask for it from the start

The easiest time to get accessibility right is at the beginning, in the prompt that sets up the app rather than in a retrofit later:

Build this with accessibility in mind — proper labels, keyboard navigation and strong colour contrast throughout.

Set the expectation once and new screens inherit it. Vorx generates the app in a single coherent pass, so a constraint stated up front lands across the whole thing rather than on the one page you were looking at.

Design for contrast and colour

Text that's hard to read shuts people out. Aim for strong contrast between text and background, and never rely on colour alone to carry meaning.

  • "Make sure body text has strong contrast against its background."
  • "Don't use colour alone for status — add a label or icon so it reads without colour."
  • "Support both light and dark themes with good contrast in each."

These choices help people with low vision or colour blindness, and they make the app easier to read for everyone in poor light.

Make everything keyboard friendly

Many people navigate with a keyboard, for speed or by necessity. Every interactive element should be reachable and usable with Tab and Enter, with a visible focus outline so people can see where they are.

Ensure all forms, buttons and menus work by keyboard, with a clear visible focus state.

Keyboard support also underpins screen reader use, so it's one of the highest-value things to get right.

Label for screen readers

Screen readers rely on text. Icon-only buttons, images and form fields need accessible labels so they're announced correctly, and images need alt text that describes their meaning rather than their file name.

Give every icon button an accessible label and every image meaningful alt text.

Clear labels make the interface easier to understand for everyone, not only for assistive-technology users.

Keep forms clear and forgiving

Forms are where accessibility problems bite hardest:

  • Visible labels above fields, not placeholder text that vanishes as you type
  • Error messages that say what went wrong and how to fix it, tied to the field that failed
  • Generous tap targets so buttons are easy to hit on a phone

Use visible labels on every field and show clear, specific error messages next to the field that failed.

Check your work

This is easy to verify as you build. Tab through each new screen in the preview and watch where focus goes. Narrow the window to phone width. Read your labels aloud and ask whether they still make sense with no screen in front of you.

When you find a gap, fix it where you found it — point at the control in visual mode, or describe it:

The filter dropdown can't be reached by keyboard — make it fully keyboard accessible.

An accessible app is simply a well-built one: clearer, sturdier and open to more people. Make it a habit from the first prompt, and pair it with naming and tone for interfaces that read well too.

In the docs: Components and design.

Ready to build something?

Turn your next idea into a working app. Your first app is free, no card required.