From c891b5113e808354238cad942b5f72a156e8aae2 Mon Sep 17 00:00:00 2001 From: Bharath Krishna <118433150+bharathk08@users.noreply.github.com> Date: Fri, 6 Sep 2024 12:04:21 +0530 Subject: [PATCH] Added images for Accessibility doc --- .../accessibility-testing.md | 24 +++++++++++++++---- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/src/pages/docs/accessibility-testing/accessibility-testing.md b/src/pages/docs/accessibility-testing/accessibility-testing.md index 6d9274bb..b0f02210 100644 --- a/src/pages/docs/accessibility-testing/accessibility-testing.md +++ b/src/pages/docs/accessibility-testing/accessibility-testing.md @@ -14,10 +14,10 @@ contextual_links: url: "#prerequisites" - type: link name: "Steps to Enable Accessibility Testing in Test Plans" - url: "#Steps to Enable Accessibility Testing in Test Plans" + url: "#steps-to-enable-accessibility-testing-in-test-plans" - type: link - name: "Fetch Consumer Details" - url: "#fetch-consumer-details" + name: "Interacting with Accessibility Report" + url: "#interacting-with-accessibility-report" --- @@ -37,12 +37,16 @@ With Testsigma, you can easily implement accessibility testing to comply with ac ## **Steps to Enable Accessibility Testing in Test Plans** 1. While creating a test plan, turn on the **Accessibility Testing** toggle in **Additional Settings**. - + ![Additional Settings](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/AccessibilityToggle.png) 2. To execute the test plan, click the **Run Now** button. + ![Run Test Plan](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/AccessibilityEnables_TestPlan.png) +3. Once the test plan execution is complete, click **View Reports** for that test plan. + ![View Report](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/View_Accessibility_Report.png) -3. After the test plan execution completes, click **View Reports** for that test plan. +4. On the report page, click **View Report** in the bottom corner to open a detailed accessibility testing report. + ![View Accessibility Report](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/View_Detailed_Accessibility_Report.png) --- @@ -51,6 +55,8 @@ With Testsigma, you can easily implement accessibility testing to comply with ac ### **Top Bar** +![Top Bar](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Title_Accessibility_Report.png) + - **Title**: Displays the title of the report (e.g., Accessibility Demo). - **Run Information**: Indicates the specific test run ID (e.g., Run - 45). @@ -61,6 +67,8 @@ With Testsigma, you can easily implement accessibility testing to comply with ac ### **Test URL Dropdown** +![URL Dropdown](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/URLs_Accessibility_Testing.png) + - This dropdown helps you filter the report by specific URLs that have tested for accessibility compliance. [[info | **NOTE**:]] @@ -70,6 +78,8 @@ With Testsigma, you can easily implement accessibility testing to comply with ac ### **Issue Overview** +![Issue Overview](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Issues_Overview_Accessibility.png) + - **Total Issues**: The Donut Chart displays the total number of issues detected during the test. Depending on severity, issues are categorized as Critical, Serious, Moderate, and Minor. - **Issues by Category**: This categorization provides users insights into specific accessibility challenges that were identified with a horizontal progress bar showing the number of issues under that category. @@ -78,6 +88,8 @@ With Testsigma, you can easily implement accessibility testing to comply with ac ### **Violations/Review Tabs** +![Violations/Review Tabs](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Violations_Review_Tabs_Accessibility.png) + - **Violations**: This lists all accessibility issues that need immediate action. - **Review Required**: This lists all accessibility issues that need manual review. Although Testsigma has identified these issues, we recommend a closer review for accuracy. @@ -89,6 +101,8 @@ With Testsigma, you can easily implement accessibility testing to comply with ac ### **Issue Navigation Panel** +![Issue Navigation](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Issue_Navigation_Accessibility.png) + - **Pagination Controls**: Provides navigation between the individual issues of specific issues selected under Violations and Review Tabs. - **Next/Previous Buttons**: Allows users to scroll through the list of identified issues.