Merge pull request #1678 from Ishavyas9/main

accessibility app testing manual

Author: Ishavyas9

assets/images/accessibility-testing/app-automation/1.png

@@ -0,0 +1,206 @@
+---
+id: accessibility-android-automation-test
+title: Automation Tests with Accessibility Tool using Android
+sidebar_label: Automation
+description: Use LambdaTest Accessibility DevTools to detect and report accessibility issues with automation, following WCAG guidelines.
+keywords:
+    - LambdaTest
+    - Accessibility
+    - Testing
+    - Automation
+    - Accessibility Testing Settings
+url: https://www.lambdatest.com/support/docs/accessibility-android-automation-test/
+site_name: LambdaTest
+slug: accessibility-android-automation-test/
+---
+ 
+import CodeBlock from '@theme/CodeBlock';
+import {YOUR_LAMBDATEST_USERNAME, YOUR_LAMBDATEST_ACCESS_KEY} from "@site/src/component/keys";
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<script type="application/ld+json"
+      dangerouslySetInnerHTML={{ __html: JSON.stringify({
+       "@context": "https://schema.org",
+        "@type": "BreadcrumbList",
+        "itemListElement": [{
+          "@type": "ListItem",
+          "position": 1,
+          "name": "Home",
+          "item": "https://www.lambdatest.com"
+        },{
+          "@type": "ListItem",
+          "position": 2,
+          "name": "Support",
+          "item": "https://www.lambdatest.com/support/docs/"
+        },{
+          "@type": "ListItem",
+          "position": 3,
+          "name": "Accessibility Android Test",
+          "item": "https://www.lambdatest.com/support/docs/accessibility-android-automation-test/"
+        }]
+      })
+    }}
+></script>
+LambdaTest now enables native Accessibility Automation Testing for Android apps using HyperExecute and Appium. This feature helps developers and QA teams to validate the accessibility of their mobile apps programmatically by leveraging LambdaTest's device cloud.
+
+With built-in support for `lambda-accessibility-scan`, this integration ensures that your apps are tested for compliance with accessibility standards and best practices like WCAG (Web Content Accessibility Guidelines).
+
+## Prerequisites
+Before getting started, ensure the following:
+
+- You have a LambdaTest account.
+- LambdaTest credentials (username & access key).
+- Android app uploaded to LambdaTest App Storage (lt://APP_ID).
+- Python 3 installed locally.
+- Appium-Python-Client installed
+- Access to a valid Android device on LambdaTest (real or virtual).
+
+> This will work for both Android and iOS applications.
+
+## Step 1: Setup the Environment Variables
+
+You need to export your environment variables *LT_USERNAME* and *LT_ACCESS_KEY* that are available in your [LambdaTest Profile page](https://accounts.lambdatest.com/security). Run the below mentioned commands in your terminal to setup the environment variables.
+
+<Tabs className="docs__val">
+<TabItem value="bash" label="Linux / MacOS" default>
+  <div className="lambdatest__codeblock">
+    <CodeBlock className="language-bash">
+  {`export LT_USERNAME="${ YOUR_LAMBDATEST_USERNAME()}"
+export LT_ACCESS_KEY="${ YOUR_LAMBDATEST_ACCESS_KEY()}"`}
+  </CodeBlock>
+</div>
+</TabItem>
+<TabItem value="powershell" label="Windows" default>
+  <div className="lambdatest__codeblock">
+    <CodeBlock className="language-powershell">
+  {`set LT_USERNAME="${ YOUR_LAMBDATEST_USERNAME()}"
+set LT_ACCESS_KEY="${ YOUR_LAMBDATEST_ACCESS_KEY()}"`}
+  </CodeBlock>
+</div>
+</TabItem>
+</Tabs>
+
+## Step 2: Upload your Application
+Upload your **_iOS_** application (.ipa file) or **_android_** application (.apk or .aab file) to the LambdaTest servers using our **REST API**. You need to provide your **Username** and **AccessKey** in the format `Username:AccessKey` in the **cURL** command for authentication.
+
+Make sure to add the path of the **appFile** in the cURL request. Below is an example cURL request to upload your app using our REST API:
+
+<Tabs className="docs__val">
+
+<TabItem value="bash" label="App File" default>
+  <div className="lambdatest__codeblock">
+    <CodeBlock className="language-bash">
+      {`curl -u "${ YOUR_LAMBDATEST_USERNAME()}:${ YOUR_LAMBDATEST_ACCESS_KEY()}" -X POST "https://manual-api.lambdatest.com/app/upload/realDevice" -F "appFile=@"/Users/macuser/Downloads/proverbial_android.apk"" -F "name="proverbial_app""`}
+    </CodeBlock>
+  </div>
+</TabItem>
+
+<TabItem value="powershell" label="App URL" default>
+  <div className="lambdatest__codeblock">
+    <CodeBlock className="language-bash">
+      {`curl -u "${ YOUR_LAMBDATEST_USERNAME()}:${ YOUR_LAMBDATEST_ACCESS_KEY()}" -X POST "https://manual-api.lambdatest.com/app/upload/realDevice" -F "url=:https://prod-mobile-artefacts.lambdatest.com/assets/docs/proverbial_android.apk" -F "name=Proverbial_App"`}
+    </CodeBlock>
+  </div>
+</TabItem>
+
+</Tabs>
+
+:::tip
+
+- If you do not have any **.apk** or **.ipa** file, you can run your sample tests on LambdaTest by using our sample apps, :link: [Android app](https://prod-mobile-artefacts.lambdatest.com/assets/docs/proverbial_android.apk) or :link: [iOS app](https://prod-mobile-artefacts.lambdatest.com/assets/docs/proverbial_ios.ipa).
+
+- Response of above cURL will be a **JSON** object containing the `APP_URL` of the format - `lt://APP123456789123456789` and will be used in the next step
+
+:::
+
+## Step 3: Configure required Capabilities
+To enable accessibility testing, the following two configurations are mandatory:
+
+- Enable accessibility in capabilities:
+```python
+"accessibility": True
+```
+
+- Invoke scan via script:
+```python
+driver.execute_script("lambda-accessibility-scan")
+```
+
+You may call `lambda-accessibility-scan` multiple times to scan different app screens or flows.
+
+
+:::info
+
+- You must add the generated **APP_URL** to the `app` capability in the config file.
+- You can generate capabilities for your test requirements with the help of our inbuilt [**Capabilities Generator tool**](https://www.lambdatest.com/capabilities-generator/).For more details, please refer to our guide on [**Desired Capabilities in Appium**](https://www.lambdatest.com/support/docs/desired-capabilities-in-appium/).
+
+:::
+
+### Sample Script
+
+```python
+from curses import flash
+import time
+# import requests
+from appium import webdriver
+from selenium.webdriver.support.ui import WebDriverWait
+from selenium.webdriver.support import expected_conditions as EC
+import unittest
+import os
+from appium import webdriver
+from appium.options.android import UiAutomator2Options
+import sys
+from selenium.webdriver.common.by import By
+from appium.webdriver.client_config import AppiumClientConfig
+
+
+options = UiAutomator2Options()
+options.load_capabilities({
+    "platform": "android",
+    "platformVersion": "14",
+    "deviceName": "Galaxy S23 Ultra",
+    "isRealMobile": True,
+    "app" : "lt://YOUR_APP_ID",
+    "accessibility": True,
+    "buildName": "Accessibility-lambda",
+    "idleTimeout": 1800,
+    "build": "Accessibility Native App",
+    "name": "Android App Accessibility",
+    "devicelog": True,
+    "visual": True,
+})
+url = "https://YOUR_LT_USERNAME:[email protected]/wd/hub" 
+
+client_config = AppiumClientConfig(
+    remote_server_addr=url,
+    ignore_certificates=True,
+    direct_connection=True
+)
+
+driver = webdriver.Remote(client_config.remote_server_addr, options = options, client_config=client_config)
+driver.implicitly_wait(2)
+
+time.sleep(10)
+
+time.sleep(10)
+driver.execute_script("lambda-accessibility-scan")
+time.sleep(10)
+driver.find_element(By.CSS_SELECTOR, '#username').send_keys("Pbtest1") # Example CSS selector
+driver.execute_script("lambda-accessibility-scan")
+
+driver.quit()
+```
+
+## Step 4: Execute and Monitor your Tests
+Run the following command in the directory where your project has been saved to execute your build.
+
+```bash
+python3 test.py
+```
+
+## Accessibility Dashboard and Reporting
+You can check the complete detailed report on the [Accessibility Dashboard](https://accessibility.lambdatest.com/automation)
+
+<img loading="lazy" src={require('../assets/images/accessibility-testing/app-automation/6.png').default} alt="automation-dashboard" className="doc_img"/>
+

assets/images/accessibility-testing/app-automation/2.png

@@ -0,0 +1,64 @@
+---
+id: accessibility-android-rules
+title: Android Accessibility Rules - Quick Reference
+sidebar_label: Android
+description: Use LambdaTest Accessibility DevTools to detect and report accessibility issues with automation, following WCAG guidelines.
+keywords:
+    - LambdaTest
+    - Accessibility
+    - Testing
+    - Manual
+    - Accessibility Testing Settings
+url: https://www.lambdatest.com/support/docs/accessibility-android-rules/
+site_name: LambdaTest
+slug: accessibility-android-rules/
+---
+ 
+import CodeBlock from '@theme/CodeBlock';
+import {YOUR_LAMBDATEST_USERNAME, YOUR_LAMBDATEST_ACCESS_KEY} from "@site/src/component/keys";
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<script type="application/ld+json"
+      dangerouslySetInnerHTML={{ __html: JSON.stringify({
+       "@context": "https://schema.org",
+        "@type": "BreadcrumbList",
+        "itemListElement": [{
+          "@type": "ListItem",
+          "position": 1,
+          "name": "Home",
+          "item": "https://www.lambdatest.com"
+        },{
+          "@type": "ListItem",
+          "position": 2,
+          "name": "Support",
+          "item": "https://www.lambdatest.com/support/docs/"
+        },{
+          "@type": "ListItem",
+          "position": 3,
+          "name": "Accessibility Android Rules",
+          "item": "https://www.lambdatest.com/support/docs/accessibility-android-rules/"
+        }]
+      })
+    }}
+></script>
+
+| Rule Name | WCAG | Level | Impact | Description |
+|-----------|------|-------|--------|-------------|
+| Missing Image Alt | 1.1.1 | A | Critical | Images lack alternative text descriptions that screen readers can announce to users. Add `android:contentDescription` to meaningful images or set to empty string for decorative images to ensure proper accessibility support. |
+| Missing View Accessibility | 4.1.2 | A | Serious | Interactive elements like buttons, clickable views, or custom controls lack proper accessibility labels that describe their purpose. Ensure all interactive Views have clear `android:contentDescription` or associated labels for screen readers. |
+| Unlabeled Checkbox Element | 4.1.2 | A | Serious | Checkbox controls are missing accessible names that describe their purpose or current state. Provide descriptive labels using `android:text`, `android:contentDescription`, or associated TextView labels so users understand what they're selecting. |
+| Insufficient Color Ratio | 1.4.3 | AA | Serious | Text elements don't meet minimum contrast ratio requirements making them difficult to read for users with visual impairments. Maintain 4.5:1 ratio for normal text and 3:1 for large text by adjusting colors or background. |
+| Missing Field Label | 3.3.2 | A | Serious | Input fields like EditText lack descriptive labels that identify their purpose to users. Provide clear labels using `android:hint`, associated TextView with `android:labelFor`, or TextInputLayout to describe expected input. |
+| Non-accessible Interaction | 4.1.2 | A | Serious | Custom interactive elements, buttons, or gesture-based controls cannot be accessed or activated through assistive technology. Ensure all interactive elements have proper focus handling, role definition, and descriptive labels. |
+| Missing Screen Title | 2.4.2 | A | Serious | Activities or screens lack descriptive titles that help users understand their current location in the app. Set meaningful titles using `setTitle()` or `supportActionBar?.title` for proper navigation context. |
+| Unlabeled Toggle Control | 4.1.2 | A | Serious | Switch, toggle, or similar controls are missing accessible names that explain what they control and their current state. Provide descriptive labels that clearly indicate what the toggle affects (e.g., "Wi-Fi enabled"). |
+| Mismatched Label Text | 2.5.3 | A | Serious | The visible text label on a control differs from the programmatically accessible name, causing confusion for screen reader users. Ensure the accessible name includes or matches the visible text exactly. |
+| Missing Input Value | 4.1.2 | A | Moderate | Text fields are missing programmatic values that assistive technology can read, making it difficult for users to understand current input state. Ensure EditText values are properly exposed and announced by screen readers. |
+| Inaccessible Text Focus | 4.1.2 | A | Moderate | Text elements that receive focus lack proper accessibility properties, confusing screen reader users about their purpose. Either provide clear interactive roles and descriptions or remove focus capability for non-interactive text. |
+| Misplaced Field Label | 3.3.2 | A | Moderate | Form labels are not positioned correctly relative to their controls or lack proper programmatic association. Ensure labels appear visually before controls and use `android:labelFor` for proper screen reader announcement order. |
+| Nested Control Issues | 4.1.2 | A | Moderate | Interactive elements are incorrectly nested inside other interactive elements, creating focus traps and navigation confusion. Separate interactive elements into distinct, non-nested components to ensure proper accessibility navigation. |
+| Unnamed Nested Element | 4.1.2 | A | Moderate | Elements within containers lack their own accessible names when they should be independently accessible. Provide distinct labels for nested interactive elements or mark decorative elements as non-focusable. |
+| Fixed Orientation Lock | 1.3.4 | AA | Moderate | App restricts viewing to only portrait or landscape orientation without accessibility justification. Support both orientations or provide alternative access methods for users who cannot rotate their devices due to physical constraints. |
+| Undersized Touch Target | 2.5.5 | AAA | Moderate | Interactive elements are smaller than the recommended minimum touch target size, making them difficult to activate for users with motor impairments. Ensure all touch targets are at least 48dp x 48dp. |
+| Insufficient Target Spacing | 2.5.5 | AAA | Moderate | Interactive elements are placed too close together without adequate spacing, increasing risk of accidental activation. Provide sufficient spacing between adjacent touch targets to prevent targeting errors for users with limited dexterity. |

assets/images/accessibility-testing/app-automation/3.png

@@ -0,0 +1,94 @@
+---
+id: accessibility-android-test
+title: Accessibility Testing Using App Manual Testing
+sidebar_label: Manual
+description: Use LambdaTest Accessibility DevTools to detect and report accessibility issues with automation, following WCAG guidelines.
+keywords:
+    - LambdaTest
+    - Accessibility
+    - Testing
+    - Manual
+    - Accessibility Testing Settings
+url: https://www.lambdatest.com/support/docs/accessibility-android-test/
+site_name: LambdaTest
+slug: accessibility-android-test/
+---
+ 
+import CodeBlock from '@theme/CodeBlock';
+import {YOUR_LAMBDATEST_USERNAME, YOUR_LAMBDATEST_ACCESS_KEY} from "@site/src/component/keys";
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<script type="application/ld+json"
+      dangerouslySetInnerHTML={{ __html: JSON.stringify({
+       "@context": "https://schema.org",
+        "@type": "BreadcrumbList",
+        "itemListElement": [{
+          "@type": "ListItem",
+          "position": 1,
+          "name": "Home",
+          "item": "https://www.lambdatest.com"
+        },{
+          "@type": "ListItem",
+          "position": 2,
+          "name": "Support",
+          "item": "https://www.lambdatest.com/support/docs/"
+        },{
+          "@type": "ListItem",
+          "position": 3,
+          "name": "Accessibility Android Test",
+          "item": "https://www.lambdatest.com/support/docs/accessibility-android-test/"
+        }]
+      })
+    }}
+></script>
+LambdaTest offers a powerful Accessibility Scanner for native Android apps, integrated seamlessly with our manual app testing environment. This helps QA teams and developers identify accessibility issues directly during real-time testing sessions. Follow this guide to understand how to perform accessibility scans manually.
+
+## Prerequisites
+- You must have access to the LambdaTest Real Device Cloud.
+- Your Android app (.apk or .aab) should be uploaded to the platform.
+- Ensure you have enabled the Accessibility feature from your account or project settings, if applicable.
+
+## Steps to perform Accessibility Testing using the App Scanner
+### Step 1: Navigate to the Accessibility Section
+- Log in to your LambdaTest dashboard.
+- From the left-hand menu, click on Accessibility.
+- Select the **App Scanner** tab under the Accessibility tab.
+
+### Step 2: Upload your Application
+- To start accessibility testing, you need to upload your application first.
+- Click on the **Upload** button to upload it from your local system.
+- You can also install via Playstore or Firebase or upload via URL.
+
+<img loading="lazy" src={require('../assets/images/accessibility-testing/app-automation/app-upload.png').default} alt="Image" className="doc_img img_center"/>
+
+### Step 3: Launch Manual App Testing
+- Choose the target Android device and select your application.
+- Click on the **Start** button to launch the manual testing session on the selected device.
+
+### Step 4: Scan the App Screens
+- Once the session is started and your app is launched on the device, click on the **Start Scanning** button to start the scanning of current page.
+<img loading="lazy" src={require('../assets/images/accessibility-testing/app-automation/1.png').default} alt="Image" className="doc_img img_center"/>
+<br />
+- Interact with your app just like a real user — navigate through different screens, buttons, and views.
+- The scanner will analyze the current screen and return a list of detected accessibility issues.
+
+<img loading="lazy" src={require('../assets/images/accessibility-testing/app-automation/2.png').default} alt="Image" className="doc_img img_center"/>
+
+### Step 5: Review Accessibility Issues
+After scanning, you’ll see a categorized list of issues based on severity (Critical, Serious, Moderate, Minor). Each issue includes:
+- Description of the accessibility problem.
+- List of affected element.
+- Suggested fix or recommendation.
+
+Continue testing by navigating to additional screens in the app and scanning them one-by-one. This helps ensure that your entire app meets accessibility standards across all flows and use cases.
+
+<img loading="lazy" src={require('../assets/images/accessibility-testing/app-automation/3.png').default} alt="Image" className="doc_img img_center"/>
+
+### Step 6: Accessibility Report
+After completion of your scanning, click on the **Save Test** button.
+- Go to the **Manual Reports** tab under the Accessibility tab.
+- Select your desired report
+- You can also share the report over email, export it in JSON, CSV and PDF format, and also you create an issue as well for that report.
+
+<img loading="lazy" src={require('../assets/images/accessibility-testing/app-automation/4.png').default} alt="Image" className="doc_img img_center"/>