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 } />;
};

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

const props = {
  settingsUrl: "<settings URL>",
  languageCode: "en-US",
  onDivaBoAdapterError: console.error,
  config: config,
  //...
  accessibility: {
    opaqueBackground: false
  }
}

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

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

import { useCallback } from 'react';
import { AccessibilityData } from 'diva-web-types';

const [accessibility, setAccessibility] = useState<AccessibilityData>({
		enlargedCcs: false,
		darkerBackgroundCc: false,
		opaqueBackground: false,
	});

const onAccessibilityUpdate = useCallback((data: AccessibilityData) => {
		setAccessibility(data);
	}, []);

const props = {
  settingsUrl: "<settings URL>",
  languageCode: "en-US",
  onDivaBoAdapterError: console.error,
  config: config,
  //...
  accessibility: {
    ccEnhancementsDisabled: true,
    hideTransparencyDisabled: true,
    darkerBackgroundCc: true,
    enlargedCcs: true,
    opaqueBackground: true,
    onAccessibilityUpdate
  }
}

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

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 config = {
        videoId: videoId,
        libs: libs,
        setAPI: onDivaAPI
    };

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

}