Accessibility Guide for Titan SDK

​

Core Accessibility Features in Titan SDK

​

Getting Started: Quick Implementations

​

Basic TTS and TM Setup

• Checking Support & User Settings:
  Copy

  Ask AI

  async function checkAccessibilitySupport() {
      try {
          const { accessibility } = TitanSDK;
  
          const ttsSupported = await accessibility.isTTSSupported();
          const tmSupported = await accessibility.isTextMagnificationSupported();
  
          console.log(`Text-to-Speech Supported: ${ttsSupported}`);
          console.log(`Text Magnification Supported: ${tmSupported}`);
  
          if (ttsSupported) {
              const ttsSettings = await accessibility.getTTSSettings();
              console.log(`TTS is enabled by user: ${ttsSettings.enabled}`);
              // ttsSettings will return an object like: {"enabled": false} if disabled
          }
  
          if (tmSupported) {
              const tmSettings = await accessibility.getTMSettings();
              console.log(`Text Magnification is enabled by user: ${tmSettings.enabled}, scale: ${tmSettings.scale}`);
          }
      } catch (error) {
          console.error("Error checking accessibility support:", error);
      }
  }
  
  // Call this function early in your app's lifecycle
  checkAccessibilitySupport();
  

​

Direct Text-to-Speech Control

• Initiating Speech:
  Copy

  Ask AI

  const speakElementText = asyn elementId => {
      try {
          const { accessibility } = TitanSDK;
  
          // Ensure TTS is supported and enabled before attempting to speak
          const ttsSupported = await accessibility.isTTSSupported();
          const ttsSettings = await accessibility.getTTSSettings();
  
          if (!ttsSupported || !ttsSettings.enabled) {
              console.warn("TTS is not supported or not enabled by the user.");
              return;
          }
  
          const element = document.getElementById(elementId);
          if (element) {
              // Example: Prioritize aria-label, fallback to textContent
              const textToSpeak = element.getAttribute('aria-label') || element.textContent || element.innerText;
              if (textToSpeak) {
                  await accessibility.startSpeaking(textToSpeak);
                  console.log(`Speaking: "${textToSpeak}"`);
              } else {
                  console.warn("No text found to speak for element:", elementId);
              }
          }
      } catch (error) {
          console.error("Error speaking text:", error);
      }
  }
  
  // Example usage (assuming an HTML element with id="myButton" or similar)
  // document.getElementById('myButton').addEventListener('focus', () => speakElementText('myButton'));
  

  Your GitHub examples provide more complete implementations:
  • Example: Text-to-Speech: Basic demonstration of calling startSpeaking.
  • Example: Text-to-Speech with Navigation: Shows extracting text from aria-label and using it with navigation.
• Stopping Speech:
  Copy

  Ask AI

  import { accessibility } from '@titanos/sdk'; // Assuming 'sdk' instance is available
  
  // Call this to immediately stop any ongoing speech
  accessibility.stopSpeaking();
  

​

Enabling/Disabling the Accessibility Reader

• Managing Reader Lifecycle:
  Copy

  Ask AI

  // Configure and enable the accessibility reader when your app starts or becomes active. Or consider doing it only if TTS is enabled at the app launching and by listening `onTTSSettingsChange`. 
  const { accessibility } = TitanSDK;
  
  async function enableTitanSDKReader() {
      const config = {
          verbosity: 'standard', // 'concise' | 'standard' | 'detailed'
          tvOptimized: true,   // Use TV-specific patterns for announcements
          announceUpdates: true, // Announce dynamic content changes
          focusDelay: 500      // Delay in ms before announcing focused elements
      };
      const success = await accessibility.enableReader(config);
      if (success) {
          console.log('TitanSDK Accessibility reader is now active.');
      } else {
          console.warn('Failed to enable accessibility reader.');
      }
  }
  
  // Disable the reader when your app closes or exits the foreground
  async function disableTitanSDKReader() {
      const success = await accessibility.disableReader();
      if (success) {
          console.log('TitanSDK Accessibility reader has been disabled.');
      } else {
          console.warn('Failed to disable accessibility reader.');
      }
  }
  
  // Example: Call on app load (consider user settings first)
  // enableTitanSDKReader();
  

​

Responding to User Preferences

• Monitoring Accessibility Settings:
  Copy

  Ask AI

  const { accessibility } = TitanSDK;
  
  // Listen for TTS setting changes
  const unsubscribeTTS = accessibility.onTTSSettingsChange((settings) => {
      console.log('TTS settings changed:', settings);
      if (settings.enabled) {
          console.log('TTS was enabled by the user in OS settings.');
          // Optionally enable your accessibility reader here
          // accessibility.enableReader({ verbosity: 'standard' });
      } else {
          console.log('TTS was disabled by the user in OS settings.');
          // Optionally disable your accessibility reader here
          // accessibility.disableReader();
      }
  });
  
  // Listen for Text Magnification setting changes
  const unsubscribeTM = accessibility.onTMSettingsChange((settings) => {
      console.log('Text Magnification settings changed:', settings);
      if (settings.enabled) {
          console.log(`Text Magnification enabled: Scale ${settings.scale}x.`);
          // Apply UI changes for larger text (e.g., adjust document.documentElement.style.fontSize)
          document.documentElement.style.fontSize = `${settings.scale}em`;
      } else {
          console.log('Text Magnification disabled.');
          // Reset text size
          document.documentElement.style.fontSize = '';
      }
  });
  
  // Remember to unsubscribe from listeners when they are no longer needed
  // unsubscribeTTS();
  // unsubscribeTM();
  

​

Testing Your Accessible App

• Manual Testing with Remote Control:
  • Navigate your entire application using only the TV remote’s D-Pad (directional buttons) and the OK/Enter button.
  • Ensure every interactive element (buttons, links, inputs) is reachable and highlightable.
  • Verify that when the Accessibility Reader is enabled, all relevant elements are announced correctly as focus moves.
  • Test dynamic content updates (e.g., loading messages, form errors) to ensure they are spoken.
• Live Testing on TV:
  • Test directly on Philips 2025 and JVC 2025 TV models with Accessibility settings (TTS, Text Magnification) enabled/disabled via the OS home screen. This provides the most accurate user experience.

​

Real-World Examples & Resources

• Example: Text-to-Speech: A fundamental example of using startSpeaking.
• Example: Text-to-Speech with text content: Shows TTS with a text extracted from the text content.
• Example: Text-to-Speech with Navigation: A fake carousel of movies with TTS speaking the values from the ‘aria-label’.
• Example: Text Magnification: Applies text magnification to labels`.

​

Next steps