Commonly asked questions

Accessible editing and design in Turtl

Are there any key shortcuts for editing?

Editor Toolbar
Press Alt+F10 to navigate to the toolbar. Move to the next and previous toolbar group with tab and shift+tab. Move to the next and previous toolbar button with right arrow or left arrow. Press space or enter to activate the toolbar button.Editor Dialog
Inside a dialog, press tab to navigate to the next dialog element, press shift+tab to move to the previous dialog element, press enter to submit the dialog, press ESC to cancel the dialog. When a dialog has multiple tabs, the tab list can be reached either with alt+F10 or with tab as part of the dialog tabbing order. With tab list focused, move to the next and previous tab with right and left arrow, respectively.

Editor Context Menu

Press Shift+F10 or application key to open context-menu. Then move to the next menu option with tab or down arrow. Move to previous option with shift+tab or up arrow. Press space or enter to select the menu option. Open sub-menu of current option with space or enter or right arrow. Go back to the parent menu item with ESC or left arrow. Close context menu with ESC.

Editor List Box

Inside a list-box, move to the next list item with tab or down arrow. Move to previous list item with shift+tab or up arrow. Press space or enter to select the list option. Press ESC to close the list-box.

You can remind yourself of our keyboard shortcuts at any time by pressing Alt+0 while in the Turtl editor.

Bold: Control/Command+B
Italic: Control/Command+I
Underline: Control/Command+U
Emojis: Function (on Macbooks only)
Copy: Control/Command+C
Paste: Control/Command+V
Paste as plain text: Shift+Control/Command+V
Undo: Control/Command+Z
Redo: Control/Command+Y

What is alt text and do I need to include it?

Alternative text, also known as "alt tags", "alt text" or "alt descriptions", is the copy that appears in an email or a webpage if an image fails to load for some reason. Alt text is great for improving SEO, but it's also the copy that screen readers speak to visually impaired users. So how can you add alt text in Turtl?

Adding alt text to Surf imagesOnce you've uploaded your Surf image, click the three dots next to the "Crop" button. This will open a dialog box where you can enter your description of the image.

Adding alt text to Immerse imagesFor images in the Immerse sections of your documents, you can find the alt text field under the "misc" tab in Image settings

Pro tips for alt text descriptors

1) Describe the image using specific details relevant to the context you're using it in. Remember: the description needs to benefit the visually impaired reader's understanding of your content. You decide, for instance, whether the person pointing at a screen in your image is a marketer or a salesperson.
2) Limit the length of your description to fewer than 125 characters, as anything longer than this is likely to get cut off by screen-readers (making a lot less sense to your visually impaired readers).
3) Good news for those wanting to write lengthier descriptions: There's no need to start your alt text with "image of", "photo of" or the likes. Screen-reading tools identify that it's an image from the source code.

What does it mean to be color conscious?

Beware of low color contrast

People with low vision can struggle to read text on a background color if there's low contrast. Bear this in mind when choosing Surf images and if you're layering quotes over images in immerse sections. It's also something to bear in mind if you're creating forms in your CRM. Placeholder text used as labels is typically grey font on a light background, which can be hard to read. Make sure you have a label outside of the input field for clarity.

Don't use color alone as a signifier

Avoid using color as the only visual cue to communicate something important, like the difference between elements on a graph, as people with visual impairments including color blindness will have a hard time making sense of it. Try other distinctions like text labels or patterns.

Did you know ...

There are approximately 300 million people with color blindness worldwide. It affects almost 1 in 12 men and 1 in 200 women!

Clarity is key.

Choose the clearest option to look professional AND be accessible!

How can I pay attention to text clarity?

This is fairly similar to our notes on color contrast in that anyone looking at your content should clearly understand what they are reading.

On Surf pages, pay close attention to the legibility of your titles on busy background images if your theme style choice doesn't provide a solid background behind the text. If in doubt, make it clearer.

As shown above, don't forget to check the mobile version of your pages before publishing to make sure the copy is legible and crop images in the mobile preview as needed.