diff --git a/modules/react/loading-dots/stories/LoadingDots.stories.mdx b/modules/react/loading-dots/stories/LoadingDots.stories.mdx
index 2da1e4d11b..617054a41b 100644
--- a/modules/react/loading-dots/stories/LoadingDots.stories.mdx
+++ b/modules/react/loading-dots/stories/LoadingDots.stories.mdx
@@ -29,7 +29,19 @@ yarn add @workday/canvas-kit-react
 
 <ExampleCodeBlock code={RTL} />
 
-### Accessible Example
+### Adding screen reader support to loading animations
+
+Sometimes, letting users know when content has finished loading is just as important as asking users
+to "please wait" while content is loading. The disappearance of an animation is information that
+might need description. In this example, we are using `AriaLiveRegion` and `AccessibleHide`
+components included in Canvas to describe both the appearance and disappearance of `LoadingDots`.
+
+- When idle, render an empty live region
+- When loading, render `LoadingDots` inside the live region,
+- When complete, render `AccessibleHide` inside the live region expressing "Complete!"
+- We can assign a name to `AriaLiveRegion` component by passing in `aria-label="Loading"`
+- We can declare `LoadingDots` a labeled graphic by passing `role="img"` and
+  `aria-label="Please wait..."` into the component
 
 <ExampleCodeBlock code={Accessible} />
 
diff --git a/modules/react/loading-dots/stories/examples/Accessible.tsx b/modules/react/loading-dots/stories/examples/Accessible.tsx
index a07c1a6b05..5583647cd6 100644
--- a/modules/react/loading-dots/stories/examples/Accessible.tsx
+++ b/modules/react/loading-dots/stories/examples/Accessible.tsx
@@ -1,6 +1,44 @@
 import React from 'react';
 import {LoadingDots} from '@workday/canvas-kit-react/loading-dots';
+import {base, system} from '@workday/canvas-tokens-web';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {createStyles, cssVar} from '@workday/canvas-kit-styling';
+import {AccessibleHide, AriaLiveRegion} from '@workday/canvas-kit-react/common';
+
+const loadingStyles = createStyles({
+  backgroundColor: base.licorice300,
+  padding: system.space.x3,
+});
 
 export const Accessible = () => {
-  return <LoadingDots aria-live="polite" aria-label="Loading Users" />;
+  const [loadingState, setLoadingState] = React.useState('idle');
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      if (loadingState === 'loading') {
+        setLoadingState('success');
+      }
+    }, 4000);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [loadingState]);
+
+  const handleLoad = () => {
+    setLoadingState('loading');
+  };
+
+  return (
+    <Flex gap={cssVar(system.space.x4)}>
+      <SecondaryButton onClick={handleLoad}>Start</SecondaryButton>
+      <AriaLiveRegion aria-label="Loading">
+        {loadingState === 'loading' && (
+          <LoadingDots className={loadingStyles} role="img" aria-label="Please wait..." />
+        )}
+        {loadingState === 'success' && <AccessibleHide>Complete.</AccessibleHide>}
+      </AriaLiveRegion>
+    </Flex>
+  );
 };