Accesstive Extension for TYPO3 - Complete Installation Guide

Learn how to install and configure the Accesstive extension for TYPO3 to make your website accessible with AI-powered accessibility tools!
 

Install Now

Image Alt

Overview

The Accesstive TYPO3 extension provides a seamless way to integrate powerful accessibility tools into your TYPO3 website. This comprehensive guide covers installation, configuration, and usage of the extension to help you create a more inclusive web experience.

What is Accesstive?

Accesstive is an all-in-one accessibility platform that helps websites become inclusive, compliant, and user-friendly. It combines powerful tools like an accessibility assistant widget, AI-based live audits, monitoring, and an intelligent assistant. Designed for businesses, developers, and agencies, Accesstive makes accessibility simple, scalable, and smart.

Key Features

  • AI-Powered Accessibility Widget: Over 40 accessibility features including screen reader optimization, keyboard navigation, and visual adjustments
  • Backend Management: Full-screen Accesstive dashboard integration within TYPO3 backend
  • Automatic Script Injection: Seamless integration without code modifications
  • WCAG Compliance Support: Helps meet accessibility guidelines and standards

Installation

Method 1: Extension Manager (Recommended)

  1. Log in to your TYPO3 backend
  2. Navigate to Admin Tools > Extensions
  3. Click on Get Extensions tab
  4. Search for "Accesstive"
  5. Click Import and Install next to the Accesstive extension
  6. Activate the extension if not automatically activated

Method 2: Manual Installation

  1. Download the extension from the TYPO3 Extension Repository
  2. Extract the files to typo3conf/ext/accesstive/
  3. Go to Admin Tools > Extensions
  4. Find "Accesstive" in the list and click the activation icon

Method 3: Composer Installation

For TYPO3 installations using Composer:

 

composer require accesstive/typo3-accesstive

 

Accesstive App

Once installed, you'll find a new "Accesstive" module in your TYPO3 backend under the main navigation. This module provides:

  • Dashboard Access: Full-screen iframe integration with the Accesstive dashboard
  • Account Management: Direct access to your Accesstive account settings
  • Analytics & Monitoring: Real-time accessibility analytics and reports
  • Configuration Options: Customize widget settings and accessibility profiles

Accessing the Accesstive App

  1. Log in to your TYPO3 backend
  2. Look for the "Accesstive" module in the left navigation menu
  3. Click on "Accesstive" to open the dashboard
  4. If prompted, log in with your Accesstive credentials

Preview

After installation, the Accesstive widget will automatically appear on all frontend pages of your TYPO3 website. The widget provides:

  • Accessibility Toolbar: Floating widget with accessibility controls
  • Customizable Position: Widget can be positioned according to your site's design
  • Responsive Design: Works seamlessly across all devices
  • Brand Integration: Customizable colors and styling to match your brand

Testing the Integration

  1. Visit your website's frontend
  2. Look for the Accesstive widget icon (usually in the bottom corner)
  3. Click the widget to open the accessibility toolbar
  4. Test various accessibility features like font size, contrast, and navigation options

Alternative Installation: Manual Script Integration

If you prefer not to use the extension, you can manually add the Accesstive script to your TYPO3 website:

Using TypoScript

  1. Go to Web > Template
  2. Select your root page
  3. Click Edit the whole template record
  4. Add the following TypoScript to the Setup field:
page.footerData.10 = TEXT
page.footerData.10.value = <script async src="https://cdn.accesstive.com/assistance.js" type="module"></script>

 

Using Fluid Templates

Add the following script before the closing </body> tag in your main Fluid template:

 

<script async src="https://cdn.accesstive.com/assistance.js" type="module"></script>

 

Uninstallation

To remove the Accesstive extension:

  1. Navigate to Admin Tools > Extensions
  2. Find "Accesstive" in the installed extensions list
  3. Click the deactivation icon to disable the extension
  4. Optionally, click the uninstall icon to completely remove the extension

Note:

Uninstalling the extension will remove the Accesstive widget from your frontend and the backend module. Make sure to backup any custom configurations before uninstalling.

Troubleshooting

Common Issues

IssueSolution
Widget not appearing on frontendCheck if extension is activated and clear TYPO3 cache
Backend module not visibleEnsure user has proper permissions and extension is installed correctly
Script conflictsCheck for JavaScript errors in browser console
Styling issuesReview CSS conflicts and adjust z-index if necessary

Cache Management

After installation or configuration changes, clear the TYPO3 cache:

  1. Go to Admin Tools > Maintenance
  2. Select Flush Cache
  3. Click Flush all caches

Support

For technical support and questions:

Changelog

Version 1.0.0

  • Initial release
  • Backend module integration
  • Automatic script injection
  • TYPO3 v10+ compatibility

Ready to make your TYPO3 website more accessible? Get started with Accesstive today and join thousands of websites providing inclusive experiences for all users.

Frequently Asked Questions

You can install the Accesstive extension through the TYPO3 Extension Manager by searching for 'Accesstive' and clicking 'Import and Install', or manually by downloading from the repository and extracting to typo3conf/ext/accesstive/.

The Accesstive extension is compatible with TYPO3 v10 and later versions. It follows TYPO3 development best practices for maximum compatibility.

Yes, the Accesstive widget is fully customizable. You can adjust colors, position, language options, and accessibility profiles through the backend module.

No, the Accesstive script loads asynchronously and is optimized for performance. It won't impact your website's loading speed or functionality.

After installing the extension, you'll find an 'Accesstive' module in your TYPO3 backend navigation. Click on it to access the full Accesstive dashboard within an iframe.