updated Check Accessibilty Section in Step 4 of Carbon React Tutorial

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)
 
-<Caption>DAP violations</Caption>
+<Caption>Equal Access Checker violations</Caption>
 
-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 `<Tab>` element used in `LandingPage`.
+`<Tab>` 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 `<article>` element used in new
-`InfoCard`. Since the `<article>` element requires a label, it seems like we may
-be using the wrong semantic element. A humble `<div>` will suffice.
+In `LandingPage.js`, replace the `<Tabs>` element with:
 
-In `Info.js`, replace the `<article>` opening and closing tags with `<div>`
-tags.
+```javascript path=src/content/LandingPage/LandingPage.js
+<Tabs {...props.tabs} aria-label="Tab navigation">
+  <Tab {...props.tab} label="About" id="about">
+    <div className="bx--grid bx--grid--no-gutter bx--grid--full-width">
+      <div className="bx--row landing-page__tab-content">
+        <div className="bx--col-md-4 bx--col-lg-7">
+          <h2 className="landing-page__subheading">What is Carbon?</h2>
+          <p className="landing-page__p">
+            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.
+          </p>
+          <Button>Learn more</Button>
+        </div>
+        <div className="bx--col-md-4 bx--offset-lg-1 bx--col-lg-8">
+          <img
+            className="landing-page__illo"
+            src={`${process.env.PUBLIC_URL}/tab-illo.png`}
+            alt="Carbon illustration"
+          />
+        </div>
+      </div>
+    </div>
+  </Tab>
+  <Tab {...props.tab} label="Design" id="design">
+    <div className="bx--grid bx--grid--no-gutter bx--grid--full-width">
+      <div className="bx--row landing-page__tab-content">
+        <div className="bx--col-lg-16">
+          Rapidly build beautiful and accessible experiences. The Carbon kit
+          contains all resources you need to get started.
+        </div>
+      </div>
+    </div>
+  </Tab>
+  <Tab {...props.tab} label="Develop" id="develop">
+    <div className="bx--grid bx--grid--no-gutter bx--grid--full-width">
+      <div className="bx--row landing-page__tab-content">
+        <div className="bx--col-lg-16">
+          Carbon provides styles and components in Vanilla, React, Angular, and
+          Vue for anyone building on the web.
+        </div>
+      </div>
+    </div>
+  </Tab>
+</Tabs>
+```
 
 ## Submit pull request