Using On-Screen Navigation

Open Beta Documentation Amazon offers this technical documentation as part of a pre-release, open beta. The features described might change as Amazon receives feedback and iterates on the features. For the most current feature information, see the Release Notes.

Vega provides on-screen voice navigation through the UIController API. To access the API, you can set the ariaPosInSet, aria-label, keplerAltLabels, alexaEntityType, and alexaExternalID props on the Button, Pressable, Text, TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback, and View components.

The ariaPosInSet and aria-label props implement Accessible Rich Internet Applications (ARIA) features:

ariaPosInSet - Short for "position in set." Defines an element’s number or position in the current set of list items or tree items.
aria-label - A string value that specifies a voice selectable name for an interactive component.

For apps that currently use ariaLabel to provide a voice selectable name, backward compatibility is provided. However, it's preferrable to migrate your app to aria-label.

In addition to the aria-label, Vega supports alternate labels on a component:

keplerAltLabels - A list of additional voice selectable names for the component.

Important: keplerAltLabels replaces keplerAtlLabels. keplerAtlLabels will be removed in a future release. It is recommended that you migrate to keplerAltLabels as soon as possible.

The following property defines an Alexa specific property:

alexaEntityType - Specifies the Alexa entity type. For additional information, see Enum<EntityTypes> in Alexa.UIController Interface (VSK Fire TV).

To enable on-screen navigation in the app, you must declare the kva-category in the manifest.toml.

In the components section, add the following declaration:

Copied to clipboard.

categories = ["com.amazon.category.kva"]

For additional information about the manifest.toml file, see Vega App Manifest File.

When sideloading an app that uses voice features, including the UIController API, you must reboot your device to enable to the features.

The following code example shows how to render a button like component with on-screen navigation enabled.

Copied to clipboard.

<TouchableOpacity
    testID={"touchable opacity testid"}
    aria-label={'The Marvelous Iron Man'}
    ariaPosInSet={1}
    alexaEntityType={'VideoObject'}
    keplerAltLabels={["Iron Man", "Marvelous Iron Man"]}
>
    <View>
        <Text
            testID='vn_touchable_opacity_text'
            style={styles.buttonText}>
                {"1. " + "The Marvelous Iron Man"}
        </Text>
    </View>
</TouchableOpacity>

Focus Management

Last updated: Sep 30, 2025

Using On-Screen Navigation

Related topics