@capawesome/capacitor-screen-reader 0.0.1 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +65 -2
  2. package/package.json +9 -3
package/README.md CHANGED
@@ -22,9 +22,14 @@ Missing a feature? Just [open an issue](https://github.com/capawesome-team/capac
22
22
  > [!NOTE]
23
23
  > This plugin does **not** perform text-to-speech. The `announce(...)` method posts an accessibility announcement that is only read out when a screen reader is active. If you are looking for real text-to-speech, use the [Speech Synthesis](https://capawesome.io/docs/sdks/capacitor/speech-synthesis/) plugin instead.
24
24
 
25
- ## Newsletter
25
+ ## Use Cases
26
26
 
27
- Stay up to date with the latest news and updates about the Capawesome, Capacitor, and Ionic ecosystem by subscribing to our [Capawesome Newsletter](https://cloud.capawesome.io/newsletter/).
27
+ The Screen Reader plugin is typically used to make apps more accessible for users of VoiceOver and TalkBack, for example:
28
+
29
+ - **Accessible status updates**: Announce dynamic changes such as "The item was added to your cart." that would otherwise go unnoticed by screen reader users.
30
+ - **Adaptive user interfaces**: Check whether a screen reader is enabled and adapt your UI accordingly, for example by simplifying gestures or animations.
31
+ - **Reacting to state changes**: Listen for changes to the enabled state of the screen reader and adjust your app's behavior on the fly.
32
+ - **Localized announcements**: Provide the language of an announcement on Android so the screen reader pronounces it correctly.
28
33
 
29
34
  ## Compatibility
30
35
 
@@ -68,6 +73,12 @@ No configuration required for this plugin.
68
73
 
69
74
  ## Usage
70
75
 
76
+ The following examples show how to post an accessibility announcement, check whether a screen reader is enabled, and listen for screen reader state changes.
77
+
78
+ ### Post an accessibility announcement
79
+
80
+ Post an announcement that is read out by the active screen reader (VoiceOver/TalkBack). Note that this does not perform text-to-speech; the message is only read out if a screen reader is running:
81
+
71
82
  ```typescript
72
83
  import { ScreenReader } from '@capawesome/capacitor-screen-reader';
73
84
 
@@ -76,11 +87,27 @@ const announce = async () => {
76
87
  value: 'The item was added to your cart.',
77
88
  });
78
89
  };
90
+ ```
91
+
92
+ ### Check whether a screen reader is enabled
93
+
94
+ Check whether a screen reader is currently enabled. Only available on Android and iOS:
95
+
96
+ ```typescript
97
+ import { ScreenReader } from '@capawesome/capacitor-screen-reader';
79
98
 
80
99
  const isEnabled = async () => {
81
100
  const { enabled } = await ScreenReader.isEnabled();
82
101
  return enabled;
83
102
  };
103
+ ```
104
+
105
+ ### Listen for screen reader state changes
106
+
107
+ Get notified when the screen reader is enabled or disabled. Only available on Android and iOS:
108
+
109
+ ```typescript
110
+ import { ScreenReader } from '@capawesome/capacitor-screen-reader';
84
111
 
85
112
  const addStateChangeListener = async () => {
86
113
  await ScreenReader.addListener('stateChange', event => {
@@ -236,6 +263,42 @@ This plugin is a drop-in replacement for the official `@capacitor/screen-reader`
236
263
 
237
264
  The `speak(...)` method has been renamed to `announce(...)` to make it clear that it posts an accessibility announcement to the active screen reader and does **not** perform text-to-speech. For real text-to-speech, use the [Speech Synthesis](https://capawesome.io/docs/sdks/capacitor/speech-synthesis/) plugin instead.
238
265
 
266
+ ## FAQ
267
+
268
+ ### How is this plugin different from other similar plugins?
269
+
270
+ It focuses on real accessibility work with VoiceOver and TalkBack: you can post announcements, check whether a screen reader is enabled, and listen for state changes, with the device observed only while a listener is attached. Announcements work on Android, iOS, and the web, where they use a visually hidden `aria-live` region, and on Android you can provide the announcement language so it is pronounced correctly. The API is fully typed, is actively maintained against the latest Capacitor version, and pairs naturally with the Accessibility Preferences and Speech Synthesis plugins for a complete accessibility toolkit.
271
+
272
+ ### Does the announce method perform text-to-speech?
273
+
274
+ No. The `announce(...)` method posts an accessibility announcement that is only read out by the screen reader (VoiceOver/TalkBack) if one is active. If you are looking for real text-to-speech that always speaks, use the [Speech Synthesis](https://capawesome.io/docs/sdks/capacitor/speech-synthesis/) plugin instead.
275
+
276
+ ### Why is my announcement not read out?
277
+
278
+ Announcements are only read out when a screen reader is active. On Android and iOS, make sure TalkBack or VoiceOver is enabled. On the Web, the announcement is made through a visually hidden `aria-live` region, so it is only read out if the user has a screen reader running.
279
+
280
+ ### Can I check whether a screen reader is enabled on the Web?
281
+
282
+ No. The `isEnabled()` method and the `stateChange` listener are only available on Android and iOS. Browsers do not expose whether a screen reader is running. The `announce(...)` method, however, also works on the Web via an `aria-live` region.
283
+
284
+ ### How is this plugin different from the official @capacitor/screen-reader plugin?
285
+
286
+ This plugin is a drop-in replacement for the official `@capacitor/screen-reader` plugin with a few naming changes. Most notably, the `speak(...)` method has been renamed to `announce(...)` to make it clear that it posts an accessibility announcement and does not perform text-to-speech. See the [migration guide](#migrating-from-capacitorscreen-reader) above for a complete mapping.
287
+
288
+ ### Can I use this plugin with Ionic, React, Vue or Angular?
289
+
290
+ Yes, the plugin is framework-agnostic. It works in any Capacitor app regardless of the web framework, including Ionic with Angular, React, or Vue, as well as plain JavaScript projects.
291
+
292
+ ## Related Plugins
293
+
294
+ - [Accessibility Preferences](https://capawesome.io/docs/sdks/capacitor/accessibility-preferences/): Read the user's system accessibility preferences.
295
+ - [Speech Synthesis](https://capawesome.io/docs/sdks/capacitor/speech-synthesis/): Synthesize speech from text (text-to-speech) with voice selection, pitch, and rate control.
296
+ - [Text Zoom](https://capawesome.io/docs/sdks/capacitor/text-zoom/): Read and control the WebView text zoom.
297
+
298
+ ## Newsletter
299
+
300
+ Stay up to date with the latest news and updates about the Capawesome, Capacitor, and Ionic ecosystem by subscribing to our [Capawesome Newsletter](https://cloud.capawesome.io/newsletter/).
301
+
239
302
  ## Changelog
240
303
 
241
304
  See [CHANGELOG.md](https://github.com/capawesome-team/capacitor-plugins/blob/main/packages/screen-reader/CHANGELOG.md).
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@capawesome/capacitor-screen-reader",
3
- "version": "0.0.1",
4
- "description": "Capacitor plugin to interact with screen readers.",
3
+ "version": "0.1.0",
4
+ "description": "Capacitor plugin to interact with screen readers on Android, iOS, and Web.",
5
5
  "main": "dist/plugin.cjs.js",
6
6
  "module": "dist/esm/index.js",
7
7
  "types": "dist/esm/index.d.ts",
@@ -41,7 +41,13 @@
41
41
  "screen reader",
42
42
  "accessibility",
43
43
  "voiceover",
44
- "talkback"
44
+ "talkback",
45
+ "capacitor-plugin",
46
+ "a11y",
47
+ "accessibility announcement",
48
+ "screen reader detection",
49
+ "aria-live",
50
+ "assistive technology"
45
51
  ],
46
52
  "scripts": {
47
53
  "verify": "npm run verify:ios && npm run verify:android && npm run verify:web",