Screen Reader Support
Screen readers are accessibility tools that read aloud the content on a screen, helping users with visual impairments navigate and interact with apps. Our platform is designed to support this feature in all platforms.
UI elements—such as player controls, navigation bars, and buttons—use localization keys from the Localization section in Zapp.
Content elements—including titles, summaries, and image labels—rely on accessibility extensions in the data source. If no specific accessibility label is provided, the system will automatically fall back to using the title.
To ensure screen reader support works as expected, follow these guidelines:
1. Add accessibility extensions to your data feeds: Make sure your data source includes custom accessibility fields. You can find the required structure and property guidelines here. By default, if no accessibility extension is provided, the screen reader will use the title field.
For example:
{
"entry": [ // array of entries
{
"id": "93adae53-8b45-4847-8c7c-75b93d9048a2", // the unique id of the entry
"title": "My Episode title",
"summary": "My content description",
"media_group": [
{
"type": "image",
"media_item": [
{
"src": "https://example.com/images/big-brother-thumb.png",
"key": "thumbnail-16x9",
}
]
},
],
"content": {
"type": "video/hls",
"src": "https://example.com/big-brother-s1-e1.m3u8",
},
"extensions": {
"accessibility": {
"label": "Go back", // accessibilityLabel
"hint": "Navigates to the previous screen" // accessibilityHint
}
}
}
]
}
2. Populate localization keys in the CMS: Ensure that all relevant text is added to the Localization section so it can be used by UI elements like buttons and navigation items. For
3. Add labels to all images and visual elements: Provide meaningful accessibility labels so screen readers can describe visuals accurately to users.