Add a11y guide and tweak references #5957

marktnoonan · 2024-10-18T12:38:19Z

No description provided.

jennifer-shehane

@marktnoonan This is one of the most well written guides I've read. I love that we're weaving these concepts in.

jennifer-shehane · 2024-10-18T13:34:31Z

docs/accessibility/get-started/introduction.mdx

 <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).


jennifer-shehane · 2024-10-18T13:38:14Z

docs/accessibility/get-started/introduction.mdx

+- 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


This got me thinking - I think it'd be good somewhere to note the relationship between this product and Test Replay. Noting some limitations for example - they have to be on v13+, they have to have Test Replay enabled. The same things that are not supported in Test Replay will not be supported in this product. This might be a good shared snippet. I can work on this if you don't have time btw. https://docs.cypress.io/faq/questions/cloud-faq#Is-everything-captured-and-replayed-in-Test-Replay

This is a good point, feel free to add something about this. Also just helps the premise of how this works so readers can develop some intuition and expectations around it. When I'm through with other changes, I can come back to this if you haven't pushed an update yet.

Added to a new "how it works" section where I also moved the Axe Core description

docs/accessibility/get-started/introduction.mdx

jennifer-shehane · 2024-10-18T13:39:41Z

docs/app/core-concepts/best-practices.mdx


+### Accessibility Testing
+
+Selecting elements with data attributes, text content, or Testing Library locators can each have some different implications for accessibility,


docs/app/guides/accessibility-testing.mdx

jennifer-shehane · 2024-10-18T14:03:17Z

docs/app/guides/accessibility-testing.mdx

+
+A combination of automated checks to reveal mistakes in the implementation, and specific assertions about the important user flows can be extremely powerful and helps catch much more accessibility regressions than either approach taken alone.
+
+### Cypress Accessibility


@marktnoonan Can we add a compelling GIF or similar in this section?

Updated with an image

docs/app/guides/accessibility-testing.mdx

jennifer-shehane · 2024-10-18T14:08:28Z

docs/app/guides/accessibility-testing.mdx

+
+There are also some newer plugins that are themselves built on top of `cypress-axe` and extend it in various ways, such as [`wick-a11y`](https://www.npmjs.com/package/wick-a11y) and [`cypress-a11y-report`](https://www.npmjs.com/package/cypress-a11y-report), as well as other accessibility testing libraries like the [IBM Equal Access Checker](https://www.npmjs.com/package/cypress-accessibility-checker). All of these tools have their own dedicated documentation for installation, setup, and executing the checks, which we won't repeat here.
+
+The general "add a command to trigger a scan" approach helps detect and prevent all-too-common issues like poor color contrast, missing labels for icons and buttons, images without alt text, and other errors in the implementation of a user interface that can be detected with generic checks.


I feel like this section doesn't emphasize the fact that these scans add time to your test runs, you wouldn't realize this unless you continued to the section below to see that our solution does not add time. I think this should be called out more explicitly here.

I added a new "managing test performance" section to account for this

Co-authored-by: Jennifer Shehane <[email protected]>

…ss-documentation into a11y-ga-updates

marktnoonan · 2024-10-20T19:51:36Z

@jennifer-shehane just to clarify: my pass of updates in response to your feedback is complete, thanks for the notes!

…ely into the narrative of the docs (#5947) * Add new announcement * Update why cypress to more closely integrate our Cloud features * Fix broken links * Add videos + images to Why Cypress * fix link * Fix some hierarchy * Expand to integrate UI Cov + a11y more fully * Make minor changes to key-diffs and trade-offs doc * Update docs/guides/overview/key-differences.mdx * Update docs/guides/overview/why-cypress.mdx Co-authored-by: Mike McCready <[email protected]> * Update docs/guides/overview/why-cypress.mdx Co-authored-by: Mike McCready <[email protected]> * Update docs/guides/overview/why-cypress.mdx * Update docs/guides/overview/why-cypress.mdx Co-authored-by: Mike McCready <[email protected]> * Update docs/guides/overview/why-cypress.mdx Co-authored-by: Mike McCready <[email protected]> * Update docs/guides/references/trade-offs.mdx * Move main docs out of 'Guides' and into 'App' * Move Cloud into main nav * fix some links * Fix some links * Fix more links * fix links * fix more links * merge a thousand changes of IA * replace old links with new references * hide extra top nav * Linting * whoops, add back learn * fix broken links * fix link * fix broken links + faq styling * lint formatting * Update some more IA and content * More updates * Fix links * lint * remove summary * Merge changes from gitbook * Move list of plugins into App nav * lint * Add back missing intro for a11y * Update faq titles * Updates for plugins pages * lint * fix links and descriptions * lint * fix links * lint * Move more things - remove examples docs * lint * fix links * fix some image destimations * remove the info intro * lint * remove autogeneration of sidebars that no longer exist as top nav * fix links * fix links * fix some images + add CTA for a11y/UI Cov * fix more links + remove info * lint * fix broken link * Remove old content * lint * fix links * Move addon to snippet and add to most pages * lint * few more fixes + utm params * consolidate install and open commands * lint * Add back some infos with new styling * lint * Add more info sections * More infos + updates - also merged Web security and cross origin doc * lint * fix broken link * fix link * hmm * fix the link for reals * more updates * lint * fix links * More udpates * lint * fix broken links * fix links * fix links * more changes * lint * fix link * Add a11y guide and tweak references (#5957) * fix link * initial pass at guide * fix missing label * various text updates * cleanup and clarity * cleanup and clarity * cleanup and clarity * cleanup and clarity * remove quotes * lint fix * cleanup and clarity * Update docs/accessibility/get-started/introduction.mdx Co-authored-by: Jennifer Shehane <[email protected]> * Update docs/app/guides/accessibility-testing.mdx Co-authored-by: Jennifer Shehane <[email protected]> * Update docs/app/guides/accessibility-testing.mdx Co-authored-by: Jennifer Shehane <[email protected]> * Apply suggestions from code review Co-authored-by: Jennifer Shehane <[email protected]> * cleanup and clarity * Apply suggestions from code review Co-authored-by: Jennifer Shehane <[email protected]> * add managing performance section * add how it works section * update text and images * add test replay link * mention ARIA, other minor edits * tweaks * remove summary that isn't needed * lint fix * fix bad link --------- Co-authored-by: Jennifer Shehane <[email protected]> * Finish infos on CI pages * Update code coverage + IDE with info * lint * updates so far * finish page * more updates * lint * fix link * fix capitalization in link * remove link * added some more infos * add a thousand redirects * cleanup * lint * another cleanup * Added some SEO optimizations * linting * Update docs/cloud/features/smart-orchestration/run-cancellation.mdx Co-authored-by: Mike McCready <[email protected]> --------- Co-authored-by: Mike McCready <[email protected]> Co-authored-by: Mark Noonan <[email protected]>

marktnoonan added 11 commits October 17, 2024 21:59

fix link

fd7e42c

initial pass at guide

2b467be

fix missing label

70ce39c

various text updates

47c711a

cleanup and clarity

5152c28

cleanup and clarity

db9fe83

cleanup and clarity

a94c9d6

cleanup and clarity

ecad352

remove quotes

8a11e6a

lint fix

f1129a7

cleanup and clarity

19f9180

jennifer-shehane assigned marktnoonan Oct 18, 2024

jennifer-shehane self-requested a review October 18, 2024 13:32

jennifer-shehane requested changes Oct 18, 2024

View reviewed changes

marktnoonan and others added 11 commits October 18, 2024 11:17

Update docs/accessibility/get-started/introduction.mdx

8404787

Co-authored-by: Jennifer Shehane <[email protected]>

Update docs/app/guides/accessibility-testing.mdx

f6e27f7

Co-authored-by: Jennifer Shehane <[email protected]>

Update docs/app/guides/accessibility-testing.mdx

0cdd5f4

Co-authored-by: Jennifer Shehane <[email protected]>

Apply suggestions from code review

36225b4

Co-authored-by: Jennifer Shehane <[email protected]>

cleanup and clarity

6621c14

Apply suggestions from code review

2106ca4

Co-authored-by: Jennifer Shehane <[email protected]>

add managing performance section

32585c7

Merge branch 'a11y-ga-updates' of https://github.com/cypress-io/cypre…

2ded988

…ss-documentation into a11y-ga-updates

add how it works section

43ddb22

update text and images

df4dbf9

add test replay link

d25fc6e

marktnoonan requested a review from jennifer-shehane October 19, 2024 22:02

marktnoonan added 4 commits October 19, 2024 18:33

mention ARIA, other minor edits

cb55822

tweaks

88e7923

remove summary that isn't needed

4f4369c

Merge branch 'ga-ui-cov-a11y' into a11y-ga-updates

e16af31

marktnoonan added 2 commits October 19, 2024 18:48

lint fix

9189618

fix bad link

94a25eb

jennifer-shehane approved these changes Oct 20, 2024

View reviewed changes

jennifer-shehane merged commit 8e8b7b2 into ga-ui-cov-a11y Oct 20, 2024
7 checks passed

jennifer-shehane deleted the a11y-ga-updates branch October 20, 2024 20:27


		### Accessibility Testing

		Selecting elements with data attributes, text content, or Testing Library locators can each have some different implications for accessibility,


		A combination of automated checks to reveal mistakes in the implementation, and specific assertions about the important user flows can be extremely powerful and helps catch much more accessibility regressions than either approach taken alone.

		### Cypress Accessibility


		There are also some newer plugins that are themselves built on top of `cypress-axe` and extend it in various ways, such as [`wick-a11y`](https://www.npmjs.com/package/wick-a11y) and [`cypress-a11y-report`](https://www.npmjs.com/package/cypress-a11y-report), as well as other accessibility testing libraries like the [IBM Equal Access Checker](https://www.npmjs.com/package/cypress-accessibility-checker). All of these tools have their own dedicated documentation for installation, setup, and executing the checks, which we won't repeat here.

		The general "add a command to trigger a scan" approach helps detect and prevent all-too-common issues like poor color contrast, missing labels for icons and buttons, images without alt text, and other errors in the implementation of a user interface that can be detected with generic checks.

Add a11y guide and tweak references #5957

Add a11y guide and tweak references #5957

Uh oh!

Conversation

marktnoonan commented Oct 18, 2024

Uh oh!

jennifer-shehane left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

marktnoonan commented Oct 20, 2024

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants