diff --git a/src/pages/developing/react-tutorial/step-4.mdx b/src/pages/developing/react-tutorial/step-4.mdx index 01e0ad8fff9..6d48b062e97 100644 --- a/src/pages/developing/react-tutorial/step-4.mdx +++ b/src/pages/developing/react-tutorial/step-4.mdx @@ -415,26 +415,70 @@ styles and to bottom-align the icons. ## Check accessibility We've added new markup and styles, so it's a good practice to check -[DAP](https://www.ibm.com/able/dynamic-assessment-plug-in.html) and make sure +[Equal Access Checker](https://www.ibm.com/able/toolkit/tools/) and make sure our rendered markup is on the right track for accessibility. With the browser extension installed, Chrome in this example, open Dev Tools and -run DAP. +run Accessibility Assessment. -![DAP violations](../shared/step-4/images/DAP-violations.png) +![Equal Access Checker violations](../shared/step-4/images/EqualAccessChecker-violations.png) -DAP violations +Equal Access Checker violations -That first violation is for the off-screen "skip to content" link. This link -isn't shown and is used to assist screen reading, so the color contrast -violation can be ignored. +All these violations came from the `` element used in `LandingPage`. +`` element expects a unique value for the ARIA properties `aria-controls` +and `aria-labelledby`. Setting a unique `id` attribute for all the three tabs +will solve the problem. -But, those three other violations came from the `
` element used in new -`InfoCard`. Since the `
` element requires a label, it seems like we may -be using the wrong semantic element. A humble `
` will suffice. +In `LandingPage.js`, replace the `` element with: -In `Info.js`, replace the `
` opening and closing tags with `
` -tags. +```javascript path=src/content/LandingPage/LandingPage.js + + +
+
+
+

What is Carbon?

+

+ Carbon is IBM’s open-source design system for digital products and + experiences. With the IBM Design Language as its foundation, the + system consists of working code, design tools and resources, human + interface guidelines, and a vibrant community of contributors. +

+ +
+
+ Carbon illustration +
+
+
+
+ +
+
+
+ Rapidly build beautiful and accessible experiences. The Carbon kit + contains all resources you need to get started. +
+
+
+
+ +
+
+
+ Carbon provides styles and components in Vanilla, React, Angular, and + Vue for anyone building on the web. +
+
+
+
+
+``` ## Submit pull request diff --git a/src/pages/developing/shared/step-4/images/DAP-violations.png b/src/pages/developing/shared/step-4/images/DAP-violations.png deleted file mode 100644 index a0a90d1b3cc..00000000000 Binary files a/src/pages/developing/shared/step-4/images/DAP-violations.png and /dev/null differ diff --git a/src/pages/developing/shared/step-4/images/EqualAccessChecker-violations.png b/src/pages/developing/shared/step-4/images/EqualAccessChecker-violations.png new file mode 100644 index 00000000000..13b69520770 Binary files /dev/null and b/src/pages/developing/shared/step-4/images/EqualAccessChecker-violations.png differ