Skip to main content
All CollectionsCreatingAccessibility
Accessibility - ADA and WCAG
Accessibility - ADA and WCAG

A guide to accessibility in Turtl

Radovan avatar
Written by Radovan
Updated over 2 months ago

Turtl Docs are by default compliant with ADA and WCAG 2.1 AA regulations, however, all Turtl Docs also have an accessible version, which is also compliant with ADA and WCAG 2.1 AA.

The screen readers that have been tested for compatibility with Turtl are:

  • JAWS

  • NVDA

  • Voiceflow

Note: We do not track any analytics for accessible Turtl Docs.

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 a 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.


Accessibility features in default Turtl format

Navigation

Turtl Docs are also 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. Remind yourself of these shortcuts at any time by pressing Alt+0 while in the Doc editor. 

Here's a list of all the shortcuts available:

General

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 the right arrow or left arrow. Press the 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.

Commands

Undo
Control/Command+Z

Redo
Control/Command+Y

Bold
Control/Command+B

Italic
Control/Command+I

Underline
Control/Command+U

Accessibility Help
Alt+0

Paste as plain text
Shift+Command/Control+V


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:

  1. 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?

  2. Make sure the alt text is no longer than 125 characters to make sure it doesn’t get cut off by screen-readers.

  3. 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.

Alternative text video walkthrough

We cover:

  • What alternate text is.

  • 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.

Did this answer your question?