diff --git a/CHANGELOG.md b/CHANGELOG.md
index fcfefa2a5de..1571a1c8325 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@
 
 - Fixed `EuiSuperDatePicker` to update `asyncInterval.isStopped` on a `isPaused` prop change. ([#2250](https://github.com/elastic/eui/pull/2250))
 - Converted table, popover, buttons, pagination, outside click detector, focus trap, context menu, and panel to TypeScript ([#2212](https://github.com/elastic/eui/pull/2212))
+- Fixed `EuiStat` invalid DOM nesting due to a `<p>` tag nested within another `<p>` tag ([#2229](https://github.com/elastic/eui/pull/2229))
 
 **Reverts**
 
diff --git a/src/components/stat/__snapshots__/stat.test.tsx.snap b/src/components/stat/__snapshots__/stat.test.tsx.snap
index e8c56233ea5..c9c4ec28361 100644
--- a/src/components/stat/__snapshots__/stat.test.tsx.snap
+++ b/src/components/stat/__snapshots__/stat.test.tsx.snap
@@ -10,20 +10,27 @@ exports[`EuiStat is rendered 1`] = `
     class="euiText euiText--small euiStat__description"
   >
     <p
-      id="generated-id"
+      aria-hidden="true"
     >
       description
     </p>
   </div>
   <p
-    aria-labelledby="generated-id"
+    aria-hidden="true"
     class="euiTitle euiTitle--large euiStat__title"
   >
     title
   </p>
+  <p
+    class="euiScreenReaderOnly"
+  >
+    description title
+  </p>
 </div>
 `;
 
+
+
 exports[`EuiStat props accent is rendered 1`] = `
 <div
   class="euiStat euiStat--leftAligned"
@@ -32,17 +39,22 @@ exports[`EuiStat props accent is rendered 1`] = `
     class="euiText euiText--small euiStat__description"
   >
     <p
-      id="generated-id"
+      aria-hidden="true"
     >
       description
     </p>
   </div>
   <p
-    aria-labelledby="generated-id"
+    aria-hidden="true"
     class="euiTitle euiTitle--large euiStat__title euiStat__title--accent"
   >
     title
   </p>
+  <p
+    class="euiScreenReaderOnly"
+  >
+    description title
+  </p>
 </div>
 `;
 
@@ -54,17 +66,22 @@ exports[`EuiStat props center is rendered 1`] = `
     class="euiText euiText--small euiStat__description"
   >
     <p
-      id="generated-id"
+      aria-hidden="true"
     >
       description
     </p>
   </div>
   <p
-    aria-labelledby="generated-id"
+    aria-hidden="true"
     class="euiTitle euiTitle--large euiStat__title"
   >
     title
   </p>
+  <p
+    class="euiScreenReaderOnly"
+  >
+    description title
+  </p>
 </div>
 `;
 
@@ -76,17 +93,22 @@ exports[`EuiStat props danger is rendered 1`] = `
     class="euiText euiText--small euiStat__description"
   >
     <p
-      id="generated-id"
+      aria-hidden="true"
     >
       description
     </p>
   </div>
   <p
-    aria-labelledby="generated-id"
+    aria-hidden="true"
     class="euiTitle euiTitle--large euiStat__title euiStat__title--danger"
   >
     title
   </p>
+  <p
+    class="euiScreenReaderOnly"
+  >
+    description title
+  </p>
 </div>
 `;
 
@@ -98,17 +120,22 @@ exports[`EuiStat props default is rendered 1`] = `
     class="euiText euiText--small euiStat__description"
   >
     <p
-      id="generated-id"
+      aria-hidden="true"
     >
       description
     </p>
   </div>
   <p
-    aria-labelledby="generated-id"
+    aria-hidden="true"
     class="euiTitle euiTitle--large euiStat__title"
   >
     title
   </p>
+  <p
+    class="euiScreenReaderOnly"
+  >
+    description title
+  </p>
 </div>
 `;
 
@@ -120,17 +147,22 @@ exports[`EuiStat props l is rendered 1`] = `
     class="euiText euiText--small euiStat__description"
   >
     <p
-      id="generated-id"
+      aria-hidden="true"
     >
       description
     </p>
   </div>
   <p
-    aria-labelledby="generated-id"
+    aria-hidden="true"
     class="euiTitle euiTitle--large euiStat__title"
   >
     title
   </p>
+  <p
+    class="euiScreenReaderOnly"
+  >
+    description title
+  </p>
 </div>
 `;
 
@@ -142,17 +174,22 @@ exports[`EuiStat props left is rendered 1`] = `
     class="euiText euiText--small euiStat__description"
   >
     <p
-      id="generated-id"
+      aria-hidden="true"
     >
       description
     </p>
   </div>
   <p
-    aria-labelledby="generated-id"
+    aria-hidden="true"
     class="euiTitle euiTitle--large euiStat__title"
   >
     title
   </p>
+  <p
+    class="euiScreenReaderOnly"
+  >
+    description title
+  </p>
 </div>
 `;
 
@@ -166,21 +203,22 @@ exports[`EuiStat props loading is rendered 1`] = `
     class="euiText euiText--small euiStat__description"
   >
     <p
-      id="generated-id"
+      aria-hidden="true"
     >
       description
     </p>
   </div>
   <p
-    aria-labelledby="generated-id"
+    aria-hidden="true"
     class="euiTitle euiTitle--large euiStat__title euiStat__title-isLoading"
-  />
-  <p
-    aria-label="Statistic is loading"
   >
     --
   </p>
-  <p />
+  <p
+    class="euiScreenReaderOnly"
+  >
+    Statistic is loading
+  </p>
 </div>
 `;
 
@@ -192,17 +230,22 @@ exports[`EuiStat props m is rendered 1`] = `
     class="euiText euiText--small euiStat__description"
   >
     <p
-      id="generated-id"
+      aria-hidden="true"
     >
       description
     </p>
   </div>
   <p
-    aria-labelledby="generated-id"
+    aria-hidden="true"
     class="euiTitle euiTitle--medium euiStat__title"
   >
     title
   </p>
+  <p
+    class="euiScreenReaderOnly"
+  >
+    description title
+  </p>
 </div>
 `;
 
@@ -214,17 +257,22 @@ exports[`EuiStat props primary is rendered 1`] = `
     class="euiText euiText--small euiStat__description"
   >
     <p
-      id="generated-id"
+      aria-hidden="true"
     >
       description
     </p>
   </div>
   <p
-    aria-labelledby="generated-id"
+    aria-hidden="true"
     class="euiTitle euiTitle--large euiStat__title euiStat__title--primary"
   >
     title
   </p>
+  <p
+    class="euiScreenReaderOnly"
+  >
+    description title
+  </p>
 </div>
 `;
 
@@ -236,17 +284,22 @@ exports[`EuiStat props right is rendered 1`] = `
     class="euiText euiText--small euiStat__description"
   >
     <p
-      id="generated-id"
+      aria-hidden="true"
     >
       description
     </p>
   </div>
   <p
-    aria-labelledby="generated-id"
+    aria-hidden="true"
     class="euiTitle euiTitle--large euiStat__title"
   >
     title
   </p>
+  <p
+    class="euiScreenReaderOnly"
+  >
+    description title
+  </p>
 </div>
 `;
 
@@ -258,17 +311,22 @@ exports[`EuiStat props s is rendered 1`] = `
     class="euiText euiText--small euiStat__description"
   >
     <p
-      id="generated-id"
+      aria-hidden="true"
     >
       description
     </p>
   </div>
   <p
-    aria-labelledby="generated-id"
+    aria-hidden="true"
     class="euiTitle euiTitle--small euiStat__title"
   >
     title
   </p>
+  <p
+    class="euiScreenReaderOnly"
+  >
+    description title
+  </p>
 </div>
 `;
 
@@ -280,17 +338,22 @@ exports[`EuiStat props secondary is rendered 1`] = `
     class="euiText euiText--small euiStat__description"
   >
     <p
-      id="generated-id"
+      aria-hidden="true"
     >
       description
     </p>
   </div>
   <p
-    aria-labelledby="generated-id"
+    aria-hidden="true"
     class="euiTitle euiTitle--large euiStat__title euiStat__title--secondary"
   >
     title
   </p>
+  <p
+    class="euiScreenReaderOnly"
+  >
+    description title
+  </p>
 </div>
 `;
 
@@ -302,17 +365,22 @@ exports[`EuiStat props subdued is rendered 1`] = `
     class="euiText euiText--small euiStat__description"
   >
     <p
-      id="generated-id"
+      aria-hidden="true"
     >
       description
     </p>
   </div>
   <p
-    aria-labelledby="generated-id"
+    aria-hidden="true"
     class="euiTitle euiTitle--large euiStat__title euiStat__title--subdued"
   >
     title
   </p>
+  <p
+    class="euiScreenReaderOnly"
+  >
+    description title
+  </p>
 </div>
 `;
 
@@ -321,7 +389,7 @@ exports[`EuiStat props title and description are reversed 1`] = `
   class="euiStat euiStat--leftAligned"
 >
   <p
-    aria-labelledby="generated-id"
+    aria-hidden="true"
     class="euiTitle euiTitle--large euiStat__title"
   >
     title
@@ -330,14 +398,20 @@ exports[`EuiStat props title and description are reversed 1`] = `
     class="euiText euiText--small euiStat__description"
   >
     <p
-      id="generated-id"
+      aria-hidden="true"
     >
       description
     </p>
   </div>
+  <p
+    class="euiScreenReaderOnly"
+  >
+    title description
+  </p>
 </div>
 `;
 
+
 exports[`EuiStat props xs is rendered 1`] = `
 <div
   class="euiStat euiStat--leftAligned"
@@ -346,17 +420,22 @@ exports[`EuiStat props xs is rendered 1`] = `
     class="euiText euiText--small euiStat__description"
   >
     <p
-      id="generated-id"
+      aria-hidden="true"
     >
       description
     </p>
   </div>
   <p
-    aria-labelledby="generated-id"
+    aria-hidden="true"
     class="euiTitle euiTitle--xsmall euiStat__title"
   >
     title
   </p>
+  <p
+    class="euiScreenReaderOnly"
+  >
+    description title
+  </p>
 </div>
 `;
 
@@ -368,17 +447,22 @@ exports[`EuiStat props xxs is rendered 1`] = `
     class="euiText euiText--small euiStat__description"
   >
     <p
-      id="generated-id"
+      aria-hidden="true"
     >
       description
     </p>
   </div>
   <p
-    aria-labelledby="generated-id"
+    aria-hidden="true"
     class="euiTitle euiTitle--xxsmall euiStat__title"
   >
     title
   </p>
+  <p
+    class="euiScreenReaderOnly"
+  >
+    description title
+  </p>
 </div>
 `;
 
@@ -390,16 +474,21 @@ exports[`EuiStat props xxxs is rendered 1`] = `
     class="euiText euiText--small euiStat__description"
   >
     <p
-      id="generated-id"
+      aria-hidden="true"
     >
       description
     </p>
   </div>
   <p
-    aria-labelledby="generated-id"
+    aria-hidden="true"
     class="euiTitle euiTitle--xxxsmall euiStat__title"
   >
     title
   </p>
+  <p
+    class="euiScreenReaderOnly"
+  >
+    description title
+  </p>
 </div>
 `;
diff --git a/src/components/stat/stat.tsx b/src/components/stat/stat.tsx
index d3899e3911a..a5bf0b5cac1 100644
--- a/src/components/stat/stat.tsx
+++ b/src/components/stat/stat.tsx
@@ -9,8 +9,8 @@ import classNames from 'classnames';
 
 import { EuiText } from '../text';
 import { EuiTitle, EuiTitleSize } from '../title/title';
+import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiI18n } from '../i18n';
-import makeId from '../form/form_row/make_id';
 
 const colorToClassNameMap = {
   default: null,
@@ -79,8 +79,6 @@ export const EuiStat: FunctionComponent<
     className
   );
 
-  const ariaId = makeId();
-
   const titleClasses = classNames(
     'euiStat__title',
     colorToClassNameMap[titleColor],
@@ -91,44 +89,38 @@ export const EuiStat: FunctionComponent<
 
   const descriptionDisplay = (
     <EuiText size="s" className="euiStat__description">
-      <p id={ariaId}>{description}</p>
+      <p aria-hidden="true">{description}</p>
     </EuiText>
   );
 
-  let titleText;
-  if (isLoading) {
-    titleText = (
-      <EuiI18n token="euiStat.loadingText" default="Statistic is loading">
-        {(loadingText: string) => <p aria-label={loadingText}>--</p>}
-      </EuiI18n>
-    );
-  } else {
-    titleText = title;
-  }
-
   const titleDisplay = (
     <EuiTitle size={titleSize} className={titleClasses}>
-      <p aria-labelledby={ariaId}>{titleText}</p>
+      <p aria-hidden="true">{isLoading ? '--' : title}</p>
     </EuiTitle>
   );
 
-  let statDisplay;
+  const screenReader = (
+    <EuiScreenReaderOnly>
+      <p>
+        {isLoading ? (
+          <EuiI18n token="euiStat.loadingText" default="Statistic is loading" />
+        ) : (
+          <Fragment>
+            {reverse ? `${title} ${description}` : `${description} ${title}`}
+          </Fragment>
+        )}
+      </p>
+    </EuiScreenReaderOnly>
+  );
 
-  if (reverse) {
-    statDisplay = (
-      <Fragment>
-        {titleDisplay}
-        {descriptionDisplay}
-      </Fragment>
-    );
-  } else {
-    statDisplay = (
-      <Fragment>
-        {descriptionDisplay}
-        {titleDisplay}
-      </Fragment>
-    );
-  }
+  const statDisplay = (
+    <Fragment>
+      {!reverse && descriptionDisplay}
+      {titleDisplay}
+      {reverse && descriptionDisplay}
+      {screenReader}
+    </Fragment>
+  );
 
   return (
     <div className={classes} {...rest}>