Notes:
While Turtl takes steps to assist you in complying with ADA and WCAG 2.1 AA, you will need to take steps to ensure your use of our software complies with ADA and WCAG 2.1 AA guidelines.
The screen readers that have been tested for compatibility with Turtl are:
JAWS
NVDA
VoiceFlow
We recommend:
Using H1, H2 headings in an appropriate hierarchy.
Checking colour contrast (we recommend this free resource).
We do not track any analytics for accessible Turtl Docs.
What are Turtl’s default features that help with accessibility?
Accessible Doc version.
Navigating with keyboard (instead of just a mouse).
Editing with keyboard shortcuts.
Viewing Turtl Docs in the accessible version
This accessible version is mainly used by screen readers. When a screen reader arrives on a Turtl Doc, the first thing it reads is "Press enter to view the accessible version of this page". You can view this accessible version as well by adding "?accessible" to the end of the Doc URL. For example:
https://team.turtl.co/story/content-psychology-101
Becomes:
https://team.turtl.co/story/content-psychology-101?accessible
There is one exception to this rule. If the Doc is personalized, the URL structure changes, which adds a "?" into the URL. This means adding another one will not work; instead, you will need to add "&".
So:
https://team.turtl.co/story/content-psychology-101/page/1?pid=6001bb70ffe67c189a10ef46
Becomes:
https://team.turtl.co/story/content-psychology-101/page/1?pid=6001bb70ffe67c189a10ef46&accessible
To sum it up:
If there is already "?" in the URL, you will need to add "&accessible" at the end of the Doc. If there is no "?" in the URL, you will need to add "?accessible" at the end of the Doc.
Check out this guide to accessibility on Turtl.
Navigation
Turtl Docs are navigable using only the tab and enter keys. Try this yourself by opening a Doc and pressing tab, you'll be able to see the different buttons highlighted as you tab through the page, and pressing enter will work the same as clicking on them. See an example below of navigating through the Doc.
Editing Docs
When editing Docs, you can also use keyboard shortcuts to aid accessibility. Here's a list of all the shortcuts available:
Content editing keystrokes
Insert a hard break (a new paragraph)
Enter
Insert a soft break
Shift+Enter
Copy selected content
Ctrl+C/⌘+C
Paste content
Ctrl+V/⌘+V
Paste content as plain text
Ctrl+Shift+V/⌘+Shift+V
Undo
Control/⌘+Z
Redo
Ctrl+Y, Ctrl+Shift+Z/⌘+Y, ⌘+⇧+Z
Bold
Ctrl+B/⌘+B
Italic
Control/⌘+I
Change text case
Shift+F3/⇧+F3 (may require Fn)
Underline
Ctrl+U/⌘+U
Select all
Ctrl+A/⌘+A
Find in the document
Ctrl+F/⌘+F
Strikethrough text
Ctrl+Shift+X/⌘+⇧+X
Accessibility Help
Alt+0
Paste as plain text
Shift+Command/Control+V
Revert autoformatting action
Backspace
Keystrokes that can be used when a widget is selected
Move the caret to allow typing directly before a widget
↑, ←
Move the caret to allow typing directly after a widget
↓, →
Keystrokes that can be used in a list
Increase list item indent
⇥
Decrease list item indent
⇧⇥
Keystrokes that can be used in a table cell
Move the selection to the next cell
⇥
Move the selection to the previous cell
⇧⇥
Insert a new table row (when in the last cell of a table)
⇥
Navigate through the table
↑, →, ↓, ←
User interface and content navigation keystrokes
Close contextual balloons, dropdowns, and dialogs
Esc
Move focus between form fields (inputs, buttons, etc.)
⇥, ⇧⇥
Move focus to the toolbar, navigate between toolbars
Alt+F10/⌥F10 (may require Fn)
Navigate through the toolbar or menu bar
↑, →, ↓, ←
Navigate to the next focusable field or an element outside the editor
Tab, Shift+Tab
Navigate to the next focusable field or an element outside the editor
Tab, Shift+Tab
Execute the currently focused button. Executing buttons that interact with the editor content moves the focus back to the content.
Enter, Space
Creating Accessible Docs
Alternative text for audio widget
The audio widget does not have an in-built alt text option, so we recommend layering a Text box widget with a transcript text of the audio underneath the audio widget. On mobile, it's possible to hide it under the "Mobile" tab in the Text box widget settings.
Alternative text for media accessibility
Alt text is text added within a webpage to describe the appearance and function of media such as images, charts, and videos. It is important to add alt text for a few reasons, one being that if the media fails to load then this text will be displayed instead, and another being that this will be the text read out to visually impaired or other readers using screen-readers.
To add alt text to your Title page image or video, hover over the image underneath the "Media" section and click "ALT".
This will open the "Media settings" box, where you can enter your description of the image or video.
To add alt text to media in the Content page sections of your Turtl Doc, open the media settings and navigate to the "Misc" tab.
Here are some key tips for writing alternative text in your Turtl Docs:
Make sure your text is sufficiently descriptive. If you couldn’t see the image, what description would be helpful to you to get an accurate idea of what the media is trying to portray?
Make sure the alt text is no longer than 125 characters to make sure it doesn’t get cut off by screen readers.
Don’t start your alt text with "image of", "photo of" etc. There’s no need since screen readers can see what type of media it is from the source code of the webpage.
Decorative Media
When you add an image or media element in the editor, the platform automatically includes alt and data-alt attributes in the underlying HTML. By default, if no alt text is provided by the user, the media is treated as decorative. This is implemented using an empty alt attribute (alt=""), which aligns with WCAG accessibility standards and ensures screen readers ignore purely decorative content.
Because media without alt text is handled as decorative by default, you don’t need to add alt text to every media element in order to create accessible documents.
Alternative text video walkthrough
We cover:
What is alternative text?
How alternative text works with screen readers.
How to add alternate text to the Title and Content page images on a Doc.
Tips for what type of alternative text you should add.
Watch time: 4 minutes
Order of Content page content for accessibility
It’s important to keep in mind the order of your Content page content in the editor to ensure it flows correctly for screen readers and when using the keyboard tab button for navigation. The easiest way to see how your Content page content flows is by checking your Turtl Doc in mobile view. The order reflected in the mobile view is the same order that will be used for accessibility purposes.
You can see how your Turtl Doc looks on mobile by clicking the mobile preview button in the top right of the Editor.
Learn more about how to edit the mobile view of your Turtl Doc here.





