Aman's PR - 1135, 41, 57, 58

docs/playwright-accessibility-test.md

@@ -0,0 +1,149 @@
+---
+id: playwright-accessibility-test
+title: Automation Tests with Accessibility Tool using Playwright
+sidebar_label: Playwright
+description: Use LambdaTest Accessibility DevTools with Playwright 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/playwright-accessibility-test/
+site_name: LambdaTest
+slug: playwright-accessibility-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 Testing Test",
+          "item": "https://www.lambdatest.com/support/docs/playwright-accessibility-test/"
+        }]
+      })
+    }}
+></script>
+This document walks you through the process of evaluating the accessibility of your website through the execution of automated tests using LambdaTest's Accessibility Tool.
+
+<!-- > Compatible only with Chrome and Edge browser versions >= 90. -->
+
+## Prerequisites
+
+- Your [LambdaTest Username and Access key](/support/docs/using-environment-variables-for-authentication-credentials/)
+- Setup your local machine as per your testing framework.
+
+## Step-by-Step Guide to Trigger Your Test
+
+### Step 1: Setup Your Test Suite
+You can use your own project to configure and test it. For demo purposes, we are using the sample repository.
+
+:::tip sample repo
+Download or Clone the code sample from the LambdaTest GitHub repository to run your tests.
+
+<a href="https://github.com/LambdaTest/lambdatest-accessibility-playwright" className="github__anchor"><img loading="lazy" src={require('../assets/images/icons/github.png').default} alt="Image" className="doc_img"/> View on GitHub</a>
+:::
+
+If you are using your own project, make sure you update the **Hub endpoint** in your tests file. By setting up the Hub endpoint, you establish the communication channel between your tests and the browser nodes, enabling effective test distribution and execution.
+
+Configure the desired capabilities based on your test requirements. For example:
+
+```javascript
+  const capabilities = {
+    'browserName': 'Chrome',
+    'browserVersion': 'latest',
+    'LT:Options': {
+      'platform': 'Windows 10',
+      'build': 'Playwright Accessibility',
+      'name': 'Playwright Accessibility',
+      'user': process.env.LT_USERNAME,
+      'accessKey': process.env.LT_ACCESS_KEY,
+      ..//
+    }
+  }
+```
+
+> You can generate capabilities for your test requirements with the help of our inbuilt 🔗 [Capabilities Generator Tool](https://www.lambdatest.com/capabilities-generator/).
+
+### Step 2: Establish User Authentication
+
+Now, you need to export your environment variables *LT_USERNAME* and *LT_ACCESS_KEY* that are available in the [LambdaTest Profile page](https://accounts.lambdatest.com/detail/profile).
+
+Run the below mentioned commands in your terminal to setup the CLI and 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 3: Configure the Necessary Capabilities
+To enable the accessibility testing within your automated test suite, set the `accessibility: true` in your configuration file. You can also define other settings capabilities as described below.
+
+```javascript
+  const capabilities = {
+    'LT:Options': {
+      ..//
+      "accessibility":true,
+      "accessibility.wcagVersion":"wcag21a",
+      "accessibility.bestPractice":true,
+      "accessibility.needsReview":true
+    }
+  }
+```
+
+### Step 4: Add the following add-on Script
+In your `lambdatest-setup.js` file add these three lines after your page creation command as shown below:
+
+```javascript
+await ltPage.goto("chrome://extensions/?id=johgkfjmgfeapgnbkmfkfkaholjbcnah");
+const secondToggleButton = ltPage.locator('#crToggle').nth(0); 
+await secondToggleButton.click();
+```
+
+### Step 5: Execute and Monitor your Test
+
+Now execute your tests and visit the [Automation Dashboard](https://accounts.lambdatest.com/dashboard). Click on the Accessibility tab and check the report generated.
+
+```bash
+node test
+```
+
+<img loading="lazy" src={require('../assets/images/accessibility-testing/playwright/playwright-accessibility.png').default} alt="automation-dashboard" className="doc_img"/>

docs/screen-reader-on-accessibility.md

@@ -0,0 +1,60 @@
+---
+id: screen-reader-on-accessibility
+title: Screen Reader
+sidebar_label: Screen Reader
+description: Test your app's accessibility with LambdaTest's Screen Reader as per the WCAG standards.
+keywords:
+  - screen reader
+  - framework on lambdatest
+  - accessibility
+url: https://www.lambdatest.com/support/docs/screen-reader-on-accessibility/
+site_name: LambdaTest
+slug: screen-reader-on-accessibility/
+---
+
+<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": "Screen Reader on Accessibility",
+          "item": "https://www.lambdatest.com/support/docs/screen-reader-on-accessibility/"
+        }]
+      })
+    }}
+></script>
+A Screen Reader is an assistive technology tool that converts digital content on screens into audio output or Braille for users with visual impairments. More than a simple text-to-speech tool, it acts as a comprehensive digital interpreter, transforming complex visual interfaces into navigable auditory or tactile experiences. It helps users with visual disabilities to interact with digital content with unprecedented independence and depth.
+
+## Why Do We Need Screen Readers?
+Screen readers are essential for making digital environments accessible to visually impaired users. It helps to:
+
+- **Enhance Inclusivity :** Users with visual disabilities can access and interact with websites, applications, and digital content.
+- **Support Compliance :** Ensure adherence to accessibility standards like WCAG (Web Content Accessibility Guidelines) and legal regulations such as ADA (Americans with Disabilities Act) or Section 508.
+- **Improve Usability :** Highlight areas where the user experience can be improved for all users, not just those with visual impairments.
+- **Boost Engagement :** Make websites and applications more usable for a diverse audience, improving user satisfaction and reach.
+
+## Screen Reader Support in LambdaTest Accessibility Testing
+LambdaTest supports the following screen readers during Accessibility Testing:
+
+- **NVDA (NonVisual Desktop Access)** – Windows
+- **VoiceOver** – macOS
+- **TalkBack** – Android
+> 📕 To learn more about using TalkBack for Android devices, refer to the [TalkBack Documentation](https://www.lambdatest.com/support/docs/screen-reader-on-real-devices-app/).
+
+These tools allow developers and testers to evaluate how well their applications or websites perform for visually impaired users, ensuring accessibility compliance and usability.
+
+<video class="right-side" width="100%" controls id="vid">
+<source src= {require('../assets/images/accessibility-testing/playwright/output.mp4').default} type="video/mp4" />
+</video>

sidebars.js

@@ -1588,6 +1588,11 @@ module.exports = {
                   "cypress-v9-accessibility-test",
                 ],
               },
+              {
+                type: "doc",
+                label: 'Playwright',
+                id: "playwright-accessibility-test",
+              },
             ]
           },
           {