Accessibility WebTV

Alternate input methods

Enable/disable alternate input methods with the following variables in the instantiation configuration:

remoteActive: remote is activated, default: true
gamepadActive: gamepad is activated, default: true

const props = {
  settingsUrl: "<settings URL>",
  languageCode: "en-US",
  onDivaBoAdapterError: console.error,
  config: config,
  remoteActive: true,
  gamepadActive: false
}

export const App = () => {
  return <DivaWebTvBoAdapter { ...props } />;
};



import { DivaWebTV } from "@deltatre-vxp/diva-sdk/diva-webtv-sdk";
import type { 
  DivaWebTVInitType, 
  DivaWebTVProps, 
  VideoMetadata, 
  VideoMetadataClean
} from "@deltatre-vxp/diva-sdk/diva-webtv-sdk";

// Import SDK style
import "@deltatre-vxp/diva-sdk/diva-webtv-sdk/index.min.css";

const init: DivaWebTVInitType = {
  setting: {
    general: {
      culture: "en-GB",
    }
  },
  videoId: "<video id>"
};

const libs = {
  mux: "https://cdnjs.cloudflare.com/ajax/libs/mux.js/6.2.0/mux.min.js",
  shaka: "https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.11.2/shaka-player.compiled.js",
  hlsJs: "https://cdn.jsdelivr.net/npm/hls.js@1.5.7",
  googleIMA: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js',
  googleDAI: 'https://imasdk.googleapis.com/js/sdkloader/ima3_dai.js',
};

const props: DivaWebTVProps = {
  init,
  libs,
  dictionary: {
    messages: {},
  },
  videoMetadataProvider: async (
    videoId: string,
    currentVideoMetadata?: VideoMetadataClean,
    playbackState?: {
      chromecast?: boolean | undefined;
    }): Promise<VideoMetadata> => {
    return {
      "title": "Video Title",
      "sources": [
      {
      "uri": "<stream URL>",
      "format": "HLS"
      }
      ],
      "videoId": "<video id>",
   };
  },
  /**
   * flag to enable/disable keyboard navigation support
   */
  keyboardActive: true;
  /**
   * flag to enable/disable navigation through remote
   */
  remoteActive: true;
  /**
   * flag to enable/disable gamepadNavigation support
   */
  gamepadActive: true;
  accessibility: {
    /**
     * disable cc enhancements (darkerBackgroundCc, enlargedCcs) and disable the possibility to have this accessibility feature to be updated by the user
     */
    ccEnhancementsDisabled: false,
    /**
     * disable opaqueBackground and disable the possibility to have this accessibility feature to be updated by the user
     */
    hideTransparencyDisabled: false,
    /**
     * callback each time the values of darkerBackgroundCc, enlargedCcs and opaqueBackground are updated by the user
     */
    onAccessibilityUpdate?: (data: AccessibilityData) => {
      console.log(`{data.darkerBackgroundCc} - {data.enlargedCcs} - {data.opaqueBackground}`);
    },
  }
};

export const App = () => {
  return <DivaWebTV {...props} />;
}

Users can choose to use alternative devices other than the default platform remote control, check the Alternate input methods

On-screen navigational movement follows the order in which the UI elements display on the screen, check the Tab navigation order.

Shortcuts

Find details on keyboard and gamepad navigation in our Accessibility article (open Web TV accordion and look for the Shortcuts paragraph).

Badges

Find details on badges — available from version 5.2 onward — in our Accessibility article (open Web TV accordion and look for the Badges paragraph).

Use video list endpoint parameters ccBadge and adBadge to display/add closed captions and audio description badges.
You can find a sample endpoint response inside Video List documentation or Recommendations.

If parameter is present and set as true, the badge will be displayed, otherwise badge is hidden.

Screen opacity

Find details on screen opacity in our Accessibility article (open Web TV accordion and look for the Screen opacity paragraph).
Use opaqueBackground to improve readability and contrast:

Property	Description	Type	default
`opaqueBackground`	starting value for disable transparency on menu	boolean	false

Subtitles and Captioning enhancements

To provide better accessibility to menu and user interfaces, DIVA provide also other functionalities:

Find details on closed captions enhancement, closed captions in high-contrast and enlarged, and transparency in our Accessibility article (open Web TV accordion and look for the Subtitles and Captioning enhancements paragraph).

Note: Video player users can enable/disable subtitles and captioning enhancements from the UI.

When video player users change subtitles and captioning enhancements settings, the callback onAccessibilityUpdate returns changes. The front-end can store and use them to start new video player instances. The following table lists those settings:

Property	Description	Type	default
`darkerBackgroundCc`	starting value for closed captions high-contrast	boolean	false
`enlargedCcs`	starting value for closed captions enlarged	boolean	false
`ccEnhancementsDisabled`	disable cc enhancements (`darkerBackgroundCc`, `enlargedCcs`) and disable the possibility to have this accessibility feature to be updated by the user	boolean	false
`hideTransparencyDisabled`	disable `opaqueBackground` and disable the possibility to have this accessibility feature to be updated by the user	boolean	false
`onAccessibilityUpdate`	return the values of `darkerBackgroundCc`, `enlargedCcs` and `opaqueBackground` each time on of this are updated by the user	callback	---

Text-to-Speech (TTS)

Find details on text-to-speech in our Accessibility article (open Web TV accordion and look for the Text-to-Speech (TTS) paragraph).

When users interact with the video player elements, use the TTS plugin to convert raised text announces to speech.

Custom input reactions (voice command support)

Find details on custom input reactions in our Accessibility article (open Web TV accordion and look for the Custom input reactions (voice command support) paragraph).

Instead of providing voice controls that could require custom integration, we provide apis to interact with diva and launch commands like they were asked by voice.

Input voice control isn't included in DIVA Player SDK. Instead, it provides an API to execute commands as if users were asking them by voice. Find below the supported actions (to be checked if others can be added):

Action		Description
play	`divaApi.play: () => void`	Play the video
pause	`divaApi.pause: () => void`	Pause the video
seek	`divaApi.seek: (value: number) => Promise<void>`	Seek relative to the video start
seekAbsolute	`divaApi.seekAbsolute: (value: Date) => Promise<void>`	Seek by absolute Date
seekPercentage	`divaApi.seekPercentage: (value: number) => Promise<void>`	Seek by percentage. Value should be a number [0-100]
skipForward	`divaApi.skipForward: () => void`	Skip forward by the amount specified in `videoMetadata.behaviour.seekInterval` (10s by default)
skipBack	`divaApi.skipBack: () => void`	Skip back by the amount specified in `videoMetadata.behaviour.seekInterval` (10s by default)
openSubtitlePanel	`divaApi.openSubtitlePanel: () => void`	Open subtitle panel
openAudioPanel	`divaApi.openAudioPanel: () => void`	Open audio panel
openSettingsPanel	`divaApi.openSettingsPanel: () => void`	Open settings panel
openVideoList	`divaApi.openVideoList: () => void`	Open video list
sendPlayerCommand	`divaApi.sendPlayerCommand: (command: DivaCommand) => void`	Send player command

const Player = ()=>{

    const onDivaAPI = useCallback((divaApi: DivaAPI): void => {
        voiceRecognition.onCommandReceived("play", ()=>{
            divaAPI.play();
        });
        voiceRecognition.onCommandReceived("pause", ()=>{
            divaAPI.pause();
        });
    }, [voiceRecognition]);

    const props = {
        videoId: videoId,
        libs: libs,
        setAPI: onDivaAPI,
        ...
    };

    return (
        return <DivaWebTV { ...props } />;
    )

}

Alternate input methods​

Shortcuts​

Badges​

Screen opacity​

Subtitles and Captioning enhancements​

Text-to-Speech (TTS)​

Custom input reactions (voice command support)​