Keyboard accessibility

Edited

Navigating Flodesk with just your keyboard.

In this article:

  • Overview

  • Keyboard shortcuts

  • Mac OS note

  • Form accessibility

  • Focus states

  • How to make your inline form keyboard accessible

  • FAQ

Overview

Keyboard accessibility lets you navigate and take action in Flodesk without a mouse or touch screen. Whether you prefer your keyboard or rely on one, most features in Flodesk are fully navigable with just keystrokes.

It's also a great way to move through repetitive tasks faster, like scheduling sends, publishing workflows, or editing emails from the right sidebar.

Note: Keyboard navigation isn't supported for inserting or moving blocks in the email builder.

If you use a screen reader alongside keyboard navigation, check out our Screen reader support guide, too.

Keyboard shortcuts

Use these shortcuts to navigate Flodesk with your keyboard:

Action

Shortcut

Move focus forward

Tab

Move focus backward

Shift + Tab

Click, select, or open

Enter or Space

Close menus, submenus, or popups

Esc

Navigate dropdown options

Arrow keys

Navigate date/time picker

Tab or Shift + Tab

Mac OS note

If you're on a Mac, here's what to know before you get started:

  • Chrome supports full keyboard navigation of all interactive elements (including links) by default.

  • Firefox and Safari don't focus on links by default. To enable this, you'll need to turn on full keyboard support in your Mac OS system preferences.

Follow the steps in our How to enable full keyboard support for Firefox and Safari guide to get set up.

Form accessibility

Your subscribers can also benefit from keyboard accessibility. With form accessibility enabled, visitors can tab through your form fields and complete your forms using only key commands, with clear visual highlights to guide them along the way.

Focus states

As you navigate with your keyboard, a visible focus indicator shows exactly where you are on the page. All interactive elements, including buttons, links, and inputs, are highlighted so you always know what's selected.

How to make your inline form keyboard accessible

To let your website visitors tab through your embedded inline form, follow these steps:

  1. Open your form in Flodesk and go to Advanced options.

  2. Select the Raw HTML version.

  3. Copy the raw HTML code and paste it into your website builder.

  4. Search the code for tabindex.

  5. Change the value from -1 to 1.

  6. Save your changes.

That's it. Your visitors can now tab through and complete your form using only their keyboard.

FAQ

What can I do with keyboard navigation in Flodesk?
You can navigate most of Flodesk using only your keyboard, including editing emails via the right sidebar, scheduling sends, and publishing workflows. The one exception is inserting or moving blocks inside the email builder, which isn't currently supported with keyboard navigation.

Can I use keyboard accessibility on a Mac?
Yes, with a couple of things to keep in mind. Chrome supports full keyboard navigation by default. Firefox and Safari require you to enable full keyboard support in your Mac OS system preferences first. This guide How to enable full keyboard support for Firefox and Safari walks you through it.

What are focus states?
Focus states are the visual highlights that appear around buttons, links, inputs, and other interactive elements as you tab through them. They show you exactly where your keyboard focus is at any point on the page.

Can my subscribers use keyboard navigation to fill out my forms?
Yes. Flodesk's form accessibility feature lets your subscribers tab through form fields and complete forms using only key commands, with visual highlights to guide them.

How do I make my embedded inline form keyboard accessible for website visitors?
You'll need to use the Raw HTML version of your form. In Advanced options, copy the raw HTML, paste it into your website builder, find tabindex in the code, and change the value from -1 to 1. Save, and you're done.

Does keyboard accessibility work with screen readers?
Keyboard navigation and screen reader support work well together in Flodesk. For screen reader-specific guidance, check out our Screen reader support article.

Was this article helpful?

Sorry about that! Care to tell us more?

Thanks for the feedback!

There was an issue submitting your feedback
Please check your connection and try again.