Creating accessible content

Creating accessible content ensures that all users can fully engage with and benefit from digital media. As a platform for creating interactive images, videos, and 360° media, ThingLink offers various tools to enhance accessibility. This article explores key features and best practices for using ThingLink to create content that is accessible to everyone.

Alt text is a text alternative for images and other media content. The alt text normally is not displayed but can be used by screen readers and in the Accessibility player.

Background media

The alt text for background images, videos, and 3D models is generated automatically using the scene's title. To customize the alt text, open your project, click the three dots ('More actions') button in the top right corner and select 'Rename':

Next, check the 'Add alternative text' box and enter your desired alt text:

In-tag media

To add an alt text to an image or a 3D model inside a 'Text & media' tag, open the tag in the editor and hover over the image/model thumbnail. Click the three dots ('...') button in the upper-left corner of the thumbnail:

This will bring up a new pop-up window. Use the 'Alt text' field to enter the alt text and click Done. You can always update the alt text later.

There is no character limit but we recommend providing concise descriptions.

Closed Captions

You can add closed captions to your base videos. The captions are off by default, but the viewer can enable them by clicking or tapping the 'Closed captions' button. Check out the example below:

To add close captions,

1. Start editing your ThingLink video
2. Click 'Settings'
3. Scroll down and click 'Upload captions'
4. Select a supported captions file from your hard drive. ThingLink currently supports SubRip (.srt) and WebVTT (.vtt) file formats for captions.

If the captions were uploaded successfully, you'll see a closed captions button ('CC') next to the full-screen button in the bottom-right corner. Click the CC button and start the video. 

If you encounter an error when uploading a captions file or the file uploads but the captions do not appear, please share the link to your project and the captions file with our support team here.

If you would like to update or replace the captions you've already uploaded, simply use the 'Remove captions' button under in-editor settings and upload a new file.

Closed captions: limitations & considerations

• The captions file must be encoded in UTF-8 (usually the default encoding for text files).
• ThingLink will ignore styling or position instructions included in the caption files.
• The file cannot contain more than 65000 characters. 
• Closed captions can be uploaded for base videos only. However, if you need to add close captions to a video inside a tag, upload the video as a separate project, add closed captions to it and then embed it into a hotspot in your main project.
• Closed captions can be uploaded to 2D videos only. It is not possible to upload captions for 360-degree videos yet. 
• Mobile & responsiveness considerations: captions take up a significant portion of the screenspace, so they may obstruct hotspots or significant parts of the video on mobile. Instruct your viewers to view the videos in fullscreen if they'd like to use closed captions.

Tag sequence & Keyboard controls

By default, the tags are shown in the order they were added to the scene, with the oldest tags shown first. In the editor, go to Settings and click Tag sequence to view and change the order.

You will see a list of all tags with icons and titles. Drag and drop the tags to change their order in the accessibility player.

Basic keyboard accessibility for viewing content created in the editor is available for all content, including 360° images & videos.

Keyboard Controls:

• 'Tab' selects interface elements. This includes tags, full-screen button, link buttons inside tags, and all other elements of the interface. 
• 'Enter' interacts with an interface element, i.e. open a tag.
• 'Esc' closes a tag. Alternatively, you can select the cross button using 'Tab' and press 'Enter'.
• 'Space' button for stopping.
• View direction in 360° is centered on the currently selected tag.
• The currently selected tag is enlarged so it is easier to identify.

Microsoft's Immersive Reader

Microsoft's Immersive Reader is an integrated reading tool that can read aloud all text contents of a tag. It can also be used to translate the tag into 50+ languages.

The Immersive Reader will automatically appear on all supported tags. To use the Immersive Reader,

1. Open a tag and click the Immersive Reader button (icon with a speaker) next to the 'Close tag' button
2. Click the Reading Preferences button (book icon) in the upper-right corner
3. Select the language you'd like to use, then toggle the 'Document' setting to 'On'

The Immersive Reader button cannot be removed from your tags.

Tips for creating accessible content

• Use High Contrast Tag Icons: Ensure that tag icons stand out clearly against the background image or video by using high-contrast colors.
• Make information larger in size: In the Settings enable 'Large pop-up window' for the 'Text and media' tags to appear larger 
• Provide Descriptive Text: Add detailed descriptions for images, videos, and tags to make the content understandable for users relying on screen readers.
• Use Alt Text for Images: Include alternative text descriptions for images to provide context for users who cannot see them.
• Include Captions and Transcripts: Provide captions for videos and transcripts for audio content to support users with hearing impairments.
• Avoid Information Overload: Break down information into manageable chunks and avoid presenting too much content at once. Use tags to reveal additional details progressively, allowing users to absorb information at their own pace. 
• Use Simple Language: Write content in clear and simple language to make it accessible to a wider audience, including those with cognitive disabilities.
• Ensure Logical Tag Placement: Place tags in a logical order that follows the natural flow of information, making it easier for users to understand the content.
• Use Similar Tag Icons For Similar Tag Content: Maintain consistency by using the same tag icons for similar types of content, making it easier for users to understand and navigate the tags.
• Ensure the icon accurately represents the content of the tag: Choose from a variety of icons or create and upload your own to best match the tag's content.
• Include Pause / Play Controls: Enable 'Disable video looping' to ensure that auto-played content inside the tags can be easily paused by the viewer.
• Optimize for Different Devices: See how your content looks on various devices, including desktops, tablets, and smartphones by clicking 'Preview on devices' button. 
• Provide Multiple Ways to Access Content: You can present the same information as visual, auditory and textual options to cater to different accessibility needs.
• Inform viewers about the Immersive Reader functionality: Putting extra information about the accessibility options available can encourage your audience to explore and benefit from these features.