Accessibility

Text To Speech (Voice Over)

To help people with disabilities, each element that can be interacted with is announced. In addition a lot of other events are also announced.

Diva component provide this announces as text, TTS plugin can be used to convert this announces to speech.

Web TV

import { Tts, Platform } from '@deltatre-vxp/diva-plugin-tts';

const tts = new Tts(
    process.env.PLATFORM === 'TIZEN' ? 
        Platform.TIZEN : 
        process.env.PLATFORM === 'WEBOS' ? 
            Platform.WEBOS : 
            Platform.WEB
);

// ...

<DivaWebTV
    // ...
    onTtsMessage={tts.onTts}
    // ...
/>

Alternative Inputs

Diva has support for multiple inputs:

• remote (dafault)
• keyboard and keyboard shortcuts
• gamepad

they can be enabled and disabled by feature toggles in the Diva Interface

• remoteActive: remote is activated, default: true
• keyboardActive: keyboard is activated, default: true
• gamepadActive: gamepad is activated, default: true

Web TV

<DivaWebTV 
    // ...
    remoteActive={true}
    keyboardActive={true}
    gamepadActive={true}
    // ...
/>

Standard RC	Standard Keyboard	Gamepad	Comments
Navigation
Down	Navigation - Down key	D-pad Down
Left	Navigation - Left key	D-pad Left
Right	Navigation - Right key	D-pad Right
Back/Return	Backspace and Delete keys	B or Circle	For Gamepad, both XboX and PS specific controls are referenced.
Home	Home  key	XboX or PlayStation	The original functionality of this key will be preserved
OK / Action	Enter or Space keys	A or X	These keys will action/activate the currently focused UI element. Examples: Enter to jump to the selected Timeline Event Card Enter to select/apply the currently focused CC language (radio button)

Shortcuts

Function	Keyboard	Gamepad	Behaviour
Opens "Subtitles" Panel	C key	n/a	If "Subtitles" panel is not currently opened, pressing the assigned shortcut key would open "Subtitles" panel and behaviour defined for when this panel opens is maintained as per its original implementation. If "Subtitles" panel is already opened (is shown), then pressing the shortcut key will close the "Subtitles" panel and will return user to the previous position before opening this panel. It will behave exactly in the same way as performing a "Back" command.
Toggle PlayPause	Space or K keys	Right Trigger	Using this shortcut must be allowed only when controlling the player state is not prohibited by design (e.g.  K shortcut key is only allowed to toggle Play/Pause: user is in full-screen mode (UI hidden) user has focus anywhere within the main controls user has focus within video list mode Must be suppressed when: any of the side panels is opened user is in seekmode Space shortcut key is only allowed to toggle Play/Pause when user is in full-screen mode (UI is hidden).
Skip Backward (simple full-screen skip)	J key	Left - Left Stick	These shortcut keys are only allowed to function when user is in full-screen mode (UI is hidden).
Skip Forward (simple full-screen skip)	L key	Right - Left Stick	These shortcut keys are only allowed to function when user is in full-screen mode (UI is hidden).
Opens "Timeline Event List"	T key	n/a
Opens "Video List Mode"	V key	n/a
Opens "Audio" Panel	A key	n/a

Tab Navigation

In addition to the standard multi-directional navigation, which has been covered in the previous section, we also must provide a more simplified and linear way of navigating the UI.

Function	Keyboard	Gamepad	Comments
Move focus forward (next focusable item)	Tab key	Left Bumper	Should act more like using the "right" directional key on RC consecutively
Move focus backward (previous focusable item)	Shift+Tab keys	Right Bumper	Should act more like using the "left" directional key on RC consecutively

Custom Input Reactions

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

Available actions are:

• divaApi.play: () => void: play the video,

• divaApi.pause: () => void: pause the video;

• divaApi.seek: (value: number) => Promise<void>: seek relative to the video start;

• divaApi.seekAbsolute: (value: Date) => Promise<void>: Seek by absolute Date

• divaApi.seekPercentage: (value: number) => Promise<void>: Seek by percentage. Value should be a number [0-100].

• divaApi.skipForward: () => void: skip forward by the amount specified in videoMetadata.behaviour.seekInterval (10s by default);

• divaApi.skipBack(): skip back by the amount specified in videoMetadata.behaviour.seekInterval (10s by default);

• divaApi.openSubtitlePanel: () => void: open subtitle panel;

• divaApi.openAudioPanel: () => void: open audio panel;

• divaApi.openSettingsPanel: () => void: open settings panel;

• divaApi.openVideoList: () => void: open video list;

• divaApi.sendPlayerCommand: (command: DivaCommand) => void: send player command DIVA Player Command WebTV;

Web TV

const Player = ()=>{

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

    return (
        <DivaWebTV 
            // ...
            setAPI={onDivaAPI}
            // ...
        />
    )

}

Disable transparency & Closed Captions Enhancements

To provide better accessibility to menu and user interfaces, DIVA provide also other functionalities: closed captions enhacements (closed captions in high-contrast and enlarged) and transparency disabled.

The features enabled directly by the user unless thee feature is disable.

Diva provides also a callback that returns this parameters when updated by the user, so it is possible, for example, to store the value and use it on future videos.

Property	Description	Type	default
darkerBackgroundCc	starting value for closed captions high-contrast	boolean	false
enlargedCcs	starting value for closed captions enlarged	boolean	false
opaqueBackground	starting value for disable transparency on menu	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	---

Web TV

const Player = ()=>{

    const opaqueBackground = store.get("opaqueBackground");
    const enlargedCcs = store.get("enlargedCcs");
    const darkerBackgroundCc = store.get("darkerBackgroundCc");

    const onAccessibilityUpdate = useCallback((divaApi: AccessibilityData): void => {
        store.put("opaqueBackground", divaAPI.opaqueBackground)
        store.put("enlargedCcs", divaAPI.enlargedCcs)
        store.put("darkerBackgroundCc", divaAPI.darkerBackgroundCc)
    }, []);

    return (
        <DivaWebTV 
            // ...
            accessibility={{
                enlargedCcs,
                darkerBackgroundCc,
                opaqueBackground,
                onAccessibilityUpdate
            }}
            // ...
        />
    )

}