diff --git a/assets/images/accessibility-testing/playwright/output.mp4 b/assets/images/accessibility-testing/playwright/output.mp4 new file mode 100644 index 000000000..eaddd099d Binary files /dev/null and b/assets/images/accessibility-testing/playwright/output.mp4 differ diff --git a/assets/images/accessibility-testing/playwright/playwright-accessibility.png b/assets/images/accessibility-testing/playwright/playwright-accessibility.png new file mode 100644 index 000000000..81a29960b Binary files /dev/null and b/assets/images/accessibility-testing/playwright/playwright-accessibility.png differ diff --git a/docs/playwright-accessibility-test.md b/docs/playwright-accessibility-test.md new file mode 100644 index 000000000..cc0400f86 --- /dev/null +++ b/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'; + + +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. + + + +## 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. + +Image View on GitHub +::: + +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. + + + + + +
+ + {`export LT_USERNAME="${ YOUR_LAMBDATEST_USERNAME()}" +export LT_ACCESS_KEY="${ YOUR_LAMBDATEST_ACCESS_KEY()}"`} + +
+ + + + + +
+ + {`set LT_USERNAME="${ YOUR_LAMBDATEST_USERNAME()}" +set LT_ACCESS_KEY="${ YOUR_LAMBDATEST_ACCESS_KEY()}"`} + +
+ + + + +### 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 +``` + +automation-dashboard \ No newline at end of file diff --git a/docs/screen-reader-on-accessibility.md b/docs/screen-reader-on-accessibility.md new file mode 100644 index 000000000..e4ed3412a --- /dev/null +++ b/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/ +--- + + +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. + + \ No newline at end of file diff --git a/sidebars.js b/sidebars.js index e85043313..b3e3bb008 100644 --- a/sidebars.js +++ b/sidebars.js @@ -1588,6 +1588,11 @@ module.exports = { "cypress-v9-accessibility-test", ], }, + { + type: "doc", + label: 'Playwright', + id: "playwright-accessibility-test", + }, ] }, {