- 
                Notifications
    You must be signed in to change notification settings 
- Fork 1.1k
Add a11y guide and tweak references #5957
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 11 commits
fd7e42c
              2b467be
              70ce39c
              47c711a
              5152c28
              db9fe83
              a94c9d6
              ecad352
              8a11e6a
              f1129a7
              19f9180
              8404787
              f6e27f7
              0cdd5f4
              36225b4
              6621c14
              2106ca4
              32585c7
              2ded988
              43ddb22
              df4dbf9
              d25fc6e
              cb55822
              88e7923
              4f4369c
              e16af31
              9189618
              94a25eb
              File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | 
|---|---|---|
| @@ -1,15 +1,15 @@ | ||
| --- | ||
| sidebar_label: Introduction | ||
| title: 'Introduction' | ||
| description: 'Cypress Accessibility provides organized, visual, and actionable accessibility reports, based completely on the tests you record to Cypress Cloud, and powered by Axe Core by Deque Systems.' | ||
| description: 'Cypress Accessibility provides organized, visual, and actionable accessibility reports, based completely on the tests you record to Cypress Cloud, and powered by Axe Core® by Deque Systems.' | ||
| sidebar_position: 10 | ||
| --- | ||
|  | ||
| # Cypress Accessibility | ||
|  | ||
| <AccessibilityAddon /> | ||
|  | ||
| Cypress Accessibility provides organized, visual, and actionable accessibility reports, based completely on the tests you record to Cypress Cloud, and powered by Axe Core by Deque Systems. | ||
| Cypress Accessibility provides organized, visual, and actionable accessibility reports, based completely on the tests you record to Cypress Cloud, and powered by Axe Core® by Deque Systems. This is the documentation page for that product. To learn about the general topic of accessibility testing using the Cypress App, see [our guide on this topic](/app/guides/accessibility-testing). | ||
|  | ||
| <DocsImage | ||
| src="/img/accessibility/get-started/cypress-accessibility-overview.png" | ||
|  | @@ -26,10 +26,20 @@ Reports are generated using the industry-standard open source [Axe Core](https:/ | |
|  | ||
| ## Understanding what is tested | ||
|  | ||
| Axe Core checks for accessibility violations in your website's user interface, based on common accessibility standards. A violation detected by Axe usually indicates that some users with disabilities would have a problem using or perceiving a feature. An example of a violation would be an image without alternative text provided in the markup, which means the content is not perceivable to visually-impaired users. [Learn more about Axe.](https://github.com/dequelabs/axe-core) | ||
| Axe Core® checks for accessibility violations in your website's user interface, based on common accessibility standards. A violation detected by Axe usually indicates that some users with disabilities would have a problem using or perceiving a feature. An example of a violation would be an image without alternative text provided in the markup, which means the content is not perceivable to visually-impaired users. [Learn more about Axe.](https://github.com/dequelabs/axe-core) | ||
|  | ||
| Axe reaches a high standard for automated testing, but cannot test every possible aspect of compliance, especially for heavily custom interfaces or aspects requiring human judgment. Please note that a 100% axe score does not mean all possible accessibility errors have been ruled out. [Axe typically detects up to 57% of the issues that would appear in a manual accessibility audit.](https://www.deque.com/blog/automated-testing-study-identifies-57-percent-of-digital-accessibility-issues/) | ||
|  | ||
| ##### Trademark notice | ||
| ## Highlights | ||
|  | ||
| - All steps of all user flows tested in Cypress are captured automatically | ||
| - Server-side execution means no disruption to existing test code or practices, and no performance impact from accessibility checks | ||
| - Reports are generated at the page or component level, as well as a combined report showing the outcome of all accessibility rules checked in the run | ||
| - Debuggable full-page DOM snapshots with highlights are provided for every violation | ||
| - Iframes and Shadow DOM are supported out-of-the-box | ||
|          | ||
| - The Results API allows you to own how your CI pipeline reacts to the accessibility results of the run to implement a policy | ||
|         
                  marktnoonan marked this conversation as resolved.
              Outdated
          
            Show resolved
            Hide resolved | ||
| - "Ignored" elements are isolated and don't affect your score, but can still be reviewed | ||
|  | ||
| ### Trademark notice | ||
|  | ||
| _Note: DEQUE, DEQUELABS, AXE®, and AXE-CORE® are trademarks of Deque Systems, Inc. in the US and other countries._ | ||
| Original file line number | Diff line number | Diff line change | 
|---|---|---|
|  | @@ -216,6 +216,12 @@ package to use the familiar testing library methods (like `findByRole`, | |
| In particular, if you're looking for more resources to understand how we | ||
| recommend you approach testing your components, look to: [Cypress Component Testing](/app/component-testing/get-started). | ||
|  | ||
| ### Accessibility Testing | ||
|  | ||
| Selecting elements with data attributes, text content, or Testing Library locators can each have some different implications for accessibility, | ||
| There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 👍🏻 | ||
| but none of these approaches is a "complete" test, and you will always need additional, accessibility-specific testing to confirm | ||
| your application is working as expected for people with disabilities. If accessibility testing is important you, [see our guide](/app/guides/accessibility-testing) for more details and comparisons of approaches. | ||
|  | ||
| ## <Icon name="angle-right" /> Assigning Return Values | ||
|  | ||
| :::danger | ||
|  | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍🏻