Accessibility

What you learn

You are instantiating DIVA Player in your Roku application and relying on DIVA Back Office as the video streaming source.

The goal of this article is to build the simplest Roku app to stream a video from the DIVA Back Office with the available accessibility functionalities.

Before starting

Ensure the DIVA Back Office instance you rely on is up and running.
Ask your video engineers team the <video id> and <settings URL>.

Instantiation

Enrich the basic instantiation code with the accessibility properties:

Badges

Find details on badges — available from version 5.2 onward — in our Accessibility article (open Roku 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(ccBadge/adBadge) 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 Roku accordion and look for the Screen opacity paragraph). Use opaqueBackground to improve readability and contrast:

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

sub launchBOAdapter(divaLaunchParams as object)
    m.boAdapterNode = CreateObject("roSGNode", "DivaBOAdapter:DivaBOAdapter")

    m.boAdapterNode.initData = {
        "settingId": "<settings URL>"
        "videoId": "<video id>"
        "dictionaryId": "en_GB"
    }
    ...
    m.boAdapterNode.observeField("divaLaunchParams", "onBOAdapterDivaLaunchParamsHandler")
    ...
    m.dpUtilsNode = CreateObject("roSGNode", "DivaPlayerSDK:DPUtilsNode")
    ...
end sub

sub onBOAdapterDivaLaunchParamsHandler(evt as dynamic)
    data = evt.getData()

    'Increase background opacity: true - transparent background, false - not transparent background, high contrast
    data.opaqueBackground  = false

    ' Setup Diva Player launch parameters
    m.dpUtilsNode.callFunc("setLaunchParams", data)
end sub

Subtitles and Captioning enhancements

To provide better accessibility to the menu and user interfaces, DIVA provides functionalities:

Find details on closed captions enhancement, closed captions in high-contrast and enlarged, and transparency in our Accessibility article (open Roku 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 accessibilityUpdateEvent 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
`enlargedCc`	starting value for closed captions enlarged	boolean	false
`ccEnhancementsOptionEnabled`	Enable/disable cc enhancements (`darkerBackgroundCc`, `enlargedCc`) and enable/disable the possibility to have this accessibility feature to be updated by the user	boolean	false
`transparencyOptionEnabled`	Enable/disable `opaqueBackground` and disable the possibility to have this accessibility feature updated by the user	boolean	false
`accessibilityUpdateEvent`	Diva Player(`DPUtilsNode`) field. Observe and get the updates of the values of `darkerBackgroundCc`, `enlargedCc` and `opaqueBackground` each time one of these is updated by the user	callback	---

sub launchBOAdapter(divaLaunchParams as object)
    m.boAdapterNode = CreateObject("roSGNode", "DivaBOAdapter:DivaBOAdapter")

    m.boAdapterNode.initData = {
        "settingId": "<settings URL>"
        "videoId": "<video id>"
        "dictionaryId": "en_GB"
    }
    ...
    m.boAdapterNode.observeField("divaLaunchParams", "onBOAdapterDivaLaunchParamsHandler")
    ...
    m.dpUtilsNode = CreateObject("roSGNode", "DivaPlayerSDK:DPUtilsNode")
    m.dpUtilsNode.observeField("accessibilityUpdateEvent", "onAccessibilityUpdateEventHandler")
    ...
end sub

sub onBOAdapterDivaLaunchParamsHandler(evt as dynamic)
    data = evt.getData()

    data.darkerBackgroundCc = getDarkerBackgroundCc() 'true - turn on the darker Background, false - turn off the darker Background
    data.enlargedCc = getEnlargedCc() 'true - enlarged Cc, false - standard CC size

    data.ccEnhancementsOptionEnabled = getCcEnhancementsEnabled() 'Show/Hide the Caption style Btn in Subtitles menu: true - show, false - hide
    data.transparencyOptionEnabled = getTransparencyEnabled() 'Show/Hide the Transparency Btn (Increase contrast) in Settings menu: true - show, false - hide

    ' Setup Diva Player launch parameters
    m.dpUtilsNode.callFunc("setLaunchParams", data)
end sub

sub onAccessibilityUpdateEventHandler(evt as dynamic) 'DivaPlayer
    data = evt.getData()
    if (data <> invalid)
        if (data.darkerBackgroundCc <> invalid)
            setDarkerBackgroundCc(data.darkerBackgroundCc)
        end if

        if (data.enlargedCc <> invalid)
            setEnlargedCc(data.enlargedCc)
        end if

        if (data.opaqueBackground <> invalid)
            setOpaqueBackground(data.opaqueBackground)
        end if
    end if
end sub

Text-to-Speech (TTS)

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

The basic instantiation code automatically manages the text-to-speech feature.

Voice command support

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

The basic instantiation code automatically manages the voice command feature.

What you learn​

Before starting​

Instantiation​

Badges​

Screen opacity​

Subtitles and Captioning enhancements​

Text-to-Speech (TTS)​

Voice command support​