Skip to content

Commit ddc8fdd

Browse files
surishubhamsurishubham
authored
Merge pull request #2846 from akshayverma28/stage
Stage
2 parents f62ce7b + 375d019 commit ddc8fdd

6 files changed

Lines changed: 165 additions & 12 deletions

‎assets/images/real-device-app-testing/voiceover.png‎

57.2 KB
Loading

‎docs/screen-reader-on-real-devices-app.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
id: screen-reader-on-real-devices-app
3-
title: Screen Reader (TalkBack) for Android Application
4-
sidebar_label: Screen Reader
3+
title: Screen Reader (TalkBack) on Android Devices
4+
sidebar_label: TalkBack (Android)
55
description: Test your app's accessibility with TestMu AI's Screen Reader. Navigate through app elements with spoken descriptions on real Android devices, ensuring compliance with WCAG standards.
66
keywords:
77
- image injection

‎docs/screen-reader-on-real-devices-browser.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
id: screen-reader-on-real-devices-browser
3-
title: Screen Reader (TalkBack) for Android - Web Browser
4-
sidebar_label: Screen Reader
3+
title: Screen Reader (TalkBack) on Android Devices
4+
sidebar_label: TalkBack (Android)
55
description: Test the accessibility of your website with the Screen Reader from TestMu AI. Using actual Android devices, navigate through elements with spoken descriptions to make sure they adhere to WCAG standards.
66
keywords:
77
- image injection

‎docs/screen-reader-voiceover-real-devices-app.md‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
id: screen-reader-voiceover-real-devices-app
33
title: Screen Reader (VoiceOver) on iOS Devices
4-
sidebar_label: Screen Reader (VoiceOver)
4+
sidebar_label: VoiceOver (iOS)
55
description: Test your app's and website's accessibility with TestMu AI's Screen Reader (VoiceOver) on iOS devices across multiple browsers. Navigate through app elements with spoken descriptions, ensuring compliance with WCAG standards.
66
keywords:
77
- screen reader
@@ -51,18 +51,24 @@ Manual accessibility testing ensures that your app or website is fully accessibl
5151

5252
Ensuring accessibility with VoiceOver is essential for creating inclusive digital experiences that accommodate users with visual impairments. VoiceOver provides spoken feedback, allowing users to navigate, interact, and understand UI elements without relying on visual cues.
5353

54-
> This feature is currently in **Closed Beta**
54+
:::note
55+
This feature is currently in **Beta**. Please reach out to our [Support](https://www.testmuai.com/support/) team for access.
56+
:::
5557

5658

5759
## Accessing Screen Reader in Real Device App Testing
5860

59-
**Step 1:** Click on the **Real Devices** > **App Testing/Browser Testing**
61+
VoiceOver-enabled devices are available in a separate device pool. To access them, you need to enable the VoiceOver toggle from Advanced Settings before selecting a device.
62+
63+
**Step 1:** Click on **Real Devices** > **App Testing/Browser Testing**.
64+
65+
**Step 2:** Click on **Advanced Settings** and navigate to the **Device Control** section.
6066

61-
**Step 2:** Select a supported **iOS device** from the list. Supported devices will have an `Accessibility` icon next to them as shown below.
67+
**Step 3:** Enable the **VoiceOver** toggle. This filters the device list to show only VoiceOver-enabled devices from the dedicated pool.
6268

63-
<img loading="lazy" src={require('../assets/images/real-device-app-testing/step_one_voiceover.png').default} className="doc_img"/>
69+
<img loading="lazy" src={require('../assets/images/real-device-app-testing/voiceover.png').default} className="doc_img"/>
6470

65-
**Step 3:** Click on the **screen reader** option from toolbar and use toggle to enable and disable voiceover feature on your device. Once enabled this will take around 10-15 seconds to start the feature on your device.
71+
**Step 4:** Select an iOS device from the filtered list and click **Start** to launch your session. Once the session starts, the VoiceOver feature will be active on the device.
6672

6773
<img loading="lazy" src={require('../assets/images/real-device-app-testing/step_two_voiceover.png').default} className="doc_img"/>
6874

@@ -76,6 +82,7 @@ The VoiceOver feature is currently supported on selected iOS devices, allowing a
7682
|--------|--------------|
7783
| iPhone 15 | iOS 17 |
7884
| iPhone 16 | iOS 18 |
85+
| iPhone 17 | iOS 26 |
7986

8087
---
8188
## How to Navigate using Keyboard Shortcuts

‎docs/screen-reader-voiceover-real-devices-browser.md‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
---
2+
id: screen-reader-voiceover-real-devices-browser
3+
title: Screen Reader (VoiceOver) on iOS Devices
4+
sidebar_label: VoiceOver (iOS)
5+
description: Test your website's accessibility with TestMu AI's Screen Reader (VoiceOver) on iOS devices. Navigate through web elements with spoken descriptions, ensuring compliance with WCAG standards.
6+
keywords:
7+
- screen reader
8+
- voiceover
9+
- accessibility
10+
- browser testing
11+
- real devices
12+
url: https://www.testmuai.com/support/docs/screen-reader-voiceover-real-devices-browser/
13+
site_name: TestMu AI
14+
slug: screen-reader-voiceover-real-devices-browser/
15+
canonical: https://www.testmuai.com/support/docs/screen-reader-voiceover-real-devices-browser/
16+
---
17+
18+
import CodeBlock from '@theme/CodeBlock';
19+
import {YOUR_LAMBDATEST_USERNAME, YOUR_LAMBDATEST_ACCESS_KEY} from "@site/src/component/keys";
20+
21+
import Tabs from '@theme/Tabs';
22+
import TabItem from '@theme/TabItem';
23+
import BrandName, { BRAND_URL } from '@site/src/component/BrandName';
24+
25+
26+
<script type="application/ld+json"
27+
dangerouslySetInnerHTML={{ __html: JSON.stringify({
28+
"@context": "https://schema.org",
29+
"@type": "BreadcrumbList",
30+
"itemListElement": [{
31+
"@type": "ListItem",
32+
"position": 1,
33+
"name": "Home",
34+
"item": BRAND_URL
35+
},{
36+
"@type": "ListItem",
37+
"position": 2,
38+
"name": "Support",
39+
"item": `${BRAND_URL}/support/docs/`
40+
},{
41+
"@type": "ListItem",
42+
"position": 3,
43+
"name": "Screen Reader on Real Devices Browser",
44+
"item": `${BRAND_URL}/support/docs/screen-reader-voiceover-real-devices-browser/`
45+
}]
46+
})
47+
}}
48+
></script>
49+
50+
Manual accessibility testing ensures that your website is fully accessible and compliant with Web Content Accessibility Guidelines (WCAG). With iOS VoiceOver feature on <BrandName />, you can test the accessibility of your website on supported real iOS devices.
51+
52+
Ensuring accessibility with VoiceOver is essential for creating inclusive digital experiences that accommodate users with visual impairments. VoiceOver provides spoken feedback, allowing users to navigate, interact, and understand UI elements without relying on visual cues.
53+
54+
:::note
55+
This feature is currently in **Beta**. Please reach out to our [Support](https://www.testmuai.com/support/) team for access.
56+
:::
57+
58+
59+
## Accessing Screen Reader in Real Device Browser Testing
60+
61+
VoiceOver-enabled devices are available in a separate device pool. To access them, you need to enable the VoiceOver toggle from Advanced Settings before selecting a device.
62+
63+
**Step 1:** Click on **Real Devices** > **Browser Testing**.
64+
65+
**Step 2:** Click on **Advanced Settings** and navigate to the **Device Control** section.
66+
67+
**Step 3:** Enable the **VoiceOver** toggle. This filters the device list to show only VoiceOver-enabled devices from the dedicated pool.
68+
69+
70+
71+
**Step 4:** Select an iOS device from the filtered list, enter your URL, and click **Start** to launch your session. Once the session starts, the VoiceOver feature will be active on the device.
72+
73+
> Make sure your system's audio is turned on to hear the spoken descriptions provided by VoiceOver.
74+
75+
## Supported Devices
76+
77+
The VoiceOver feature is currently supported on selected iOS devices, allowing accurate accessibility testing. Below is the list of supported devices, with more being added over time to enhance accessibility coverage:
78+
79+
| Device | iOS Version |
80+
|--------|--------------|
81+
| iPhone 15 | iOS 17 |
82+
| iPhone 16 | iOS 18 |
83+
| iPhone 17 | iOS 26 |
84+
85+
---
86+
## How to Navigate using Keyboard Shortcuts
87+
88+
The navigation behavior on iOS—such as moving to the next or previous element, auto-reading from the start of the page, and interacting with UI elements—can be performed using keyboard shortcuts when **VoiceOver** is enabled.
89+
90+
On a real iOS device, VoiceOver navigation can be executed via keyboard shortcuts and touch gestures as well. However, when performing accessibility testing, using keyboard shortcuts is the most efficient way to validate VoiceOver interactions.
91+
92+
Ensuring that your website or application is accessible using **keyboard shortcuts** guarantees that it will also be accessible through touch gestures. If a site is fully navigable and interactable using VoiceOver keyboard commands, it will be equally accessible through swipe gestures and VoiceOver touch commands.
93+
94+
To navigate and interact using VoiceOver on iOS in a Manual test session, use the following keyboard shortcuts:
95+
96+
## VoiceOver Keyboard Shortcuts
97+
98+
Below is a list of VoiceOver keyboard shortcuts, using `Control+Option` on macOS and `Ctrl+Alt` on Windows. These commands allow seamless navigation and interaction with UI elements.
99+
100+
| Action | macOS (Control+Option) | Windows (Ctrl+Alt) |
101+
|------------------------------------------------------|------------------------------------------------------|------------------------------------------------------|
102+
| Turn on VoiceOver Help | Control+Option+K | Ctrl+Alt+K |
103+
| Turn off VoiceOver Help | Option+Esc | Windows+Esc |
104+
| Select the next or previous item | Control+Option+Right Arrow / Control+Option+Left Arrow | Ctrl+Alt+Right Arrow / Ctrl+Alt+Left Arrow |
105+
| Activate the selected item | Control+Option+Space bar | Ctrl+Alt+Space bar |
106+
| Touch and hold the selected item | Control+Option+Shift+M | Ctrl+Alt+Shift+M |
107+
| Read from the current position | Control+Option+A | Ctrl+Alt+A |
108+
| Read from the top | Control+Option+B | Ctrl+Alt+B |
109+
| Pause reading | Control+Option+Hyphen | Ctrl+Alt+Hyphen |
110+
| Copy the last spoken text to the clipboard | Control+Option+Shift+C | Ctrl+Alt+Shift+C |
111+
| Search for text | Control+Option+F | Ctrl+Alt+F |
112+
| Mute or unmute VoiceOver | Control+Option+S | Ctrl+Alt+S |
113+
| Go to the Home Screen | Control+Option+H | Ctrl+Alt+H |
114+
| Move to the status bar | Control+Option+M, then Option+Up Arrow | Ctrl+Alt+M, then Alt+Up Arrow |
115+
| Open Control centre | (Control+Option+M), then Option+Down Arrow | (Ctrl+Alt+M), then Alt+Down Arrow |
116+
| Open the App Switcher | Control+Option+H+H | Ctrl+Alt+H+H |
117+
| Open the Item Chooser | Control+Option+I | Ctrl+Alt+I |
118+
| Change the label of the selected item | Control+Option+Slash | Ctrl+Alt+Slash |
119+
| Swipe up or down | Control+Option+Up Arrow / Control+Option+Down Arrow | Ctrl+Alt+Up Arrow / Ctrl+Alt+Down Arrow |
120+
| Turn the rotor left or right | Control+Option+Command+Left Arrow / Right Arrow | Ctrl+Alt+Command+Left Arrow / Right Arrow |
121+
| Adjust the setting specified by the rotor | Control+Option+Command+Up Arrow / Down Arrow | Ctrl+Alt+Command+Up Arrow / Down Arrow |
122+
| Return to the previous screen | Option+Esc | Windows+Esc+EscEsc |
123+
124+
By incorporating **VoiceOver** keyboard navigation into your accessibility testing workflow, you can identify usability barriers early, ensuring compliance with WCAG standards and delivering an **inclusive digital experience for all users**.
125+
126+
127+
:::tip
128+
129+
If the keyboard shortcuts do not work initially, click on the device screen in your test session to ensure that it is in focus.
130+
:::

‎sidebars.js‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2363,7 +2363,15 @@ module.exports = {
23632363
"contacts-on-real-devices",
23642364
"real-device-adb-shell",
23652365
"ui-inspector",
2366-
"screen-reader-on-real-devices-app",
2366+
{
2367+
type: "category",
2368+
collapsed: true,
2369+
label: "Screen Reader",
2370+
items: [
2371+
"screen-reader-on-real-devices-app",
2372+
"screen-reader-voiceover-real-devices-app",
2373+
],
2374+
},
23672375
"accessibility-settings-ios",
23682376
"devtools-on-real-devices-app",
23692377
"set-date-time-hour-format-real-devices",
@@ -2392,7 +2400,15 @@ module.exports = {
23922400
collapsed: true,
23932401
label: "Features",
23942402
items: [
2395-
"screen-reader-on-real-devices-browser",
2403+
{
2404+
type: "category",
2405+
collapsed: true,
2406+
label: "Screen Reader",
2407+
items: [
2408+
"screen-reader-on-real-devices-browser",
2409+
"screen-reader-voiceover-real-devices-browser",
2410+
],
2411+
},
23962412
"ip-geolocation-on-real-devices-browser",
23972413
"assistive-touch-on-real-ios-browser",
23982414
"dark-mode-on-browser",

0 commit comments

Comments
 (0)