The Accessibility API makes it easy to know when a user has a screen reader enabled, as well as programmatically speaking labels through the connected screen reader.
import { Plugins } from '@capacitor/core';
const { Accessibility, Modals } = Plugins;
Accessibility.addListener('accessibilityScreenReaderStateChange', (state) => {
console.log(state.value);
});
async isVoiceOverEnabled() {
var vo = await Accessibility.isScreenReaderEnabled();
alert('Voice over enabled? ' + vo.value);
}
async speak() {
var value = await Modals.prompt({
title: "Value to speak",
message: "Enter the value to speak"
});
Accessibility.speak({value: value.value});
}
isScreenReaderEnabled() => Promise<ScreenReaderEnabledResult>
Check if a screen reader is enabled on the device
Returns: Promise<ScreenReaderEnabledResult>
speak(options: AccessibilitySpeakOptions) => Promise<void>
Speak a string with a connected screen reader.
Param | Type |
---|---|
options |
AccessibilitySpeakOptions |
addListener(eventName: 'accessibilityScreenReaderStateChange', listenerFunc: ScreenReaderStateChangeCallback) => PluginListenerHandle
Listen for screen reader state change (on/off)
Param | Type |
---|---|
eventName |
"accessibilityScreenReaderStateChange" |
listenerFunc |
(state: ScreenReaderEnabledResult) => void |
Returns:
PluginListenerHandle
removeAllListeners() => void
Remove all native listeners for this plugin
Prop | Type |
---|---|
value |
boolean |
Prop | Type | Description |
---|---|---|
value |
string |
The string to speak |
language |
string |
The language to speak the string in, as its ISO 639-1 Code (ex: “en”). Currently only supported on Android. |
Prop | Type |
---|---|
remove |
() => void |