diff --git a/packages/unity-bootstrap-theme/stories/atoms/sidebar/sidebar.templates.js b/packages/unity-bootstrap-theme/stories/atoms/sidebar/sidebar.templates.js
index 956c9383fe..5470e538bc 100644
--- a/packages/unity-bootstrap-theme/stories/atoms/sidebar/sidebar.templates.js
+++ b/packages/unity-bootstrap-theme/stories/atoms/sidebar/sidebar.templates.js
@@ -54,7 +54,7 @@ export const SidebarComponent = () => (
         <div
           id="cardBodyOne"
           className="collapse card-body"
-          aria-labelledby="cardOne"
+
           data-bs-parent=".sidebar"
         >
           <a href="#" className="nav-link">
@@ -94,7 +94,7 @@ export const SidebarComponent = () => (
         <div
           id="cardBodyTwo"
           className="collapse card-body"
-          aria-labelledby="cardTwo"
+
           data-bs-parent=".sidebar"
         >
           <a href="#" className="nav-link">
@@ -154,7 +154,7 @@ export const SidebarComponent = () => (
         <div
           id="cardBodyThree"
           className="collapse card-body"
-          aria-labelledby="cardThree"
+
           data-bs-parent=".sidebar"
         >
           <a href="#" className="nav-link">
diff --git a/packages/unity-bootstrap-theme/stories/atoms/sidebar/sidebar.templates.stories.js b/packages/unity-bootstrap-theme/stories/atoms/sidebar/sidebar.templates.stories.js
index d73810ec22..89b0fc012e 100644
--- a/packages/unity-bootstrap-theme/stories/atoms/sidebar/sidebar.templates.stories.js
+++ b/packages/unity-bootstrap-theme/stories/atoms/sidebar/sidebar.templates.stories.js
@@ -61,7 +61,7 @@ export const Sidebar = () => (
         <div
           id="cardBodyOne"
           className="collapse card-body"
-          aria-labelledby="cardOne"
+
           data-bs-parent=".sidebar"
         >
           <a href="#" className="nav-link">
@@ -101,7 +101,7 @@ export const Sidebar = () => (
         <div
           id="cardBodyTwo"
           className="collapse card-body"
-          aria-labelledby="cardTwo"
+
           data-bs-parent=".sidebar"
         >
           <a href="#" className="nav-link">
@@ -161,7 +161,7 @@ export const Sidebar = () => (
         <div
           id="cardBodyThree"
           className="collapse card-body"
-          aria-labelledby="cardThree"
+
           data-bs-parent=".sidebar"
         >
           <a href="#" className="nav-link">
diff --git a/packages/unity-bootstrap-theme/stories/atoms/universal-nav-link/universal-nav-link.examples.stories.js b/packages/unity-bootstrap-theme/stories/atoms/universal-nav-link/universal-nav-link.examples.stories.js
index 49d4f94564..6bcf313fc1 100644
--- a/packages/unity-bootstrap-theme/stories/atoms/universal-nav-link/universal-nav-link.examples.stories.js
+++ b/packages/unity-bootstrap-theme/stories/atoms/universal-nav-link/universal-nav-link.examples.stories.js
@@ -68,7 +68,7 @@ const DropdownLink = () => (
           </a>
           <div
             className="dropdown-menu dropdown-columns"
-            aria-labelledby="dropdown-one-col"
+
           >
             <div className="dropdown-col">
               <a
diff --git a/packages/unity-bootstrap-theme/stories/docs/global-header/navbar-options.stories.mdx b/packages/unity-bootstrap-theme/stories/docs/global-header/navbar-options.stories.mdx
index 9a0b257176..9a24d7a32f 100644
--- a/packages/unity-bootstrap-theme/stories/docs/global-header/navbar-options.stories.mdx
+++ b/packages/unity-bootstrap-theme/stories/docs/global-header/navbar-options.stories.mdx
@@ -26,7 +26,7 @@ The maximum number of links recommended in any one column is eight.
     Dropdown
     <span className="fa fa-chevron-down"></span>
   </a>
-  <div className="dropdown-menu dropdown-columns" aria-labelledby="dropdown-one-col">
+  <div className="dropdown-menu dropdown-columns" >
     <div className="dropdown-col">
       <a className="dropdown-item" href="#">Navigation Link</a>
       <a className="dropdown-item" href="#">Another Link</a>
@@ -44,7 +44,7 @@ The two column dropdown variant adds a second `.dropdown-col` to the `.dropdown-
     Dropdown
     <span className="fa fa-chevron-down"></span>
   </a>
-  <div className="dropdown-menu dropdown-columns" aria-labelledby="dropdown-one-col">
+  <div className="dropdown-menu dropdown-columns" >
     <div className="dropdown-col">
       <a className="dropdown-item" href="#">Link</a>
       <a className="dropdown-item" href="#">Link</a>
@@ -90,7 +90,7 @@ The three column variant of a mega menu looks like this:
     Mega Menu (3 col)
     <span className="fa fa-chevron-down"></span>
   </a>
-  <div className="dropdown-menu" aria-labelledby="megamenu-three-col">
+  <div className="dropdown-menu" >
     <div className="container">
       <div className="row">
         <div className="col-lg">
@@ -144,7 +144,7 @@ It is also possible to define a set of call to action buttons that correspond to
 The same rules apply for the button sizes and alllowed colors. A maximum of two buttons should be used in this space.
 
 ```
-<div className="dropdown-menu" aria-labelledby="dont-forget-aria-rules">
+<div className="dropdown-menu" >
   <div className="container">
     <div className="row">
       ...
diff --git a/packages/unity-bootstrap-theme/stories/molecules/card-and-image/card-and-image.templates.stories.js b/packages/unity-bootstrap-theme/stories/molecules/card-and-image/card-and-image.templates.stories.js
index 692c70006e..bb39d3f9e3 100644
--- a/packages/unity-bootstrap-theme/stories/molecules/card-and-image/card-and-image.templates.stories.js
+++ b/packages/unity-bootstrap-theme/stories/molecules/card-and-image/card-and-image.templates.stories.js
@@ -18,6 +18,8 @@ export const LeftFloatedCard = ({ left }) => {
   return (
     <div
       className={`uds-card-and-image ${left ? "" : "uds-card-and-image-right"}`}
+      role="image"
+      aria-hidden="true"
       style={{
         backgroundImage: `linear-gradient(180deg, #19191900 0%, #191919c9 100%), url('${imageName.hero02}')`,
       }}
@@ -70,6 +72,8 @@ export const RightFloatedCard = ({ left }) => {
   return (
     <div
       className={`uds-card-and-image ${left ? "" : "uds-card-and-image-right"}`}
+      role="image"
+      aria-hidden="true"
       style={{
         backgroundImage: `linear-gradient(180deg, #19191900 0%, #191919c9 100%), url('${imageName.hero02}')`,
       }}
diff --git a/packages/unity-bootstrap-theme/stories/molecules/quote-image-background/quote-image-background.templates.stories.js b/packages/unity-bootstrap-theme/stories/molecules/quote-image-background/quote-image-background.templates.stories.js
index 49844e85d3..b65b679b13 100644
--- a/packages/unity-bootstrap-theme/stories/molecules/quote-image-background/quote-image-background.templates.stories.js
+++ b/packages/unity-bootstrap-theme/stories/molecules/quote-image-background/quote-image-background.templates.stories.js
@@ -11,6 +11,8 @@ export default {
 export const Default = () => (
   <div
     className="uds-quote-image-background"
+    role="image"
+    aria-hidden="true"
     style={{
       backgroundImage: `linear-gradient(180deg, #19191900 0%, #191919c9 100%), url('${imageName.hero02}')`,
     }}
diff --git a/packages/unity-bootstrap-theme/stories/organisms/global-footer/global-footer.templates.js b/packages/unity-bootstrap-theme/stories/organisms/global-footer/global-footer.templates.js
index 2c688023c1..6638658914 100644
--- a/packages/unity-bootstrap-theme/stories/organisms/global-footer/global-footer.templates.js
+++ b/packages/unity-bootstrap-theme/stories/organisms/global-footer/global-footer.templates.js
@@ -930,7 +930,7 @@ export const TwoColumns = () => (
                 <div
                   id="footlink-two"
                   className="collapse accordion-body"
-                  aria-labelledby="footlink-header-two"
+
                 >
                   <a className="nav-link" href="#" title="link">
                     Biological and Health Systems Computing
@@ -1228,7 +1228,7 @@ export const ThreeColumns = () => (
                 <div
                   id="footlink-two"
                   className="collapse accordion-body"
-                  aria-labelledby="footlink-header-two"
+
                 >
                   <a className="nav-link" href="#" title="link">
                     Biological and Health Systems Computing
@@ -1271,7 +1271,7 @@ export const ThreeColumns = () => (
                 <div
                   id="footlink-three"
                   className="collapse accordion-body"
-                  aria-labelledby="footlink-header-three"
+
                 >
                   <a className="nav-link" href="#" title="link">
                     Student Organization
@@ -1574,7 +1574,7 @@ export const FourColumns = () => (
                 <div
                   id="footlink-two"
                   className="collapse accordion-body"
-                  aria-labelledby="footlink-header-two"
+
                 >
                   <a className="nav-link" href="#" title="link">
                     Biological and Health Systems Computing
@@ -1617,7 +1617,7 @@ export const FourColumns = () => (
                 <div
                   id="footlink-three"
                   className="collapse accordion-body"
-                  aria-labelledby="footlink-header-three"
+
                 >
                   <a className="nav-link" href="#" title="link">
                     Student Organization
@@ -1665,7 +1665,7 @@ export const FourColumns = () => (
                 <div
                   id="footlink-four"
                   className="collapse accordion-body"
-                  aria-labelledby="footlink-header-four"
+
                 >
                   <a className="nav-link" href="#" title="link">
                     Student Organization
@@ -1968,7 +1968,7 @@ export const FiveColumns = () => (
                 <div
                   id="footlink-two"
                   className="collapse accordion-body"
-                  aria-labelledby="footlink-header-two"
+
                 >
                   <a className="nav-link" href="#" title="link">
                     Biological and Health Systems Computing
@@ -2011,7 +2011,7 @@ export const FiveColumns = () => (
                 <div
                   id="footlink-three"
                   className="collapse accordion-body"
-                  aria-labelledby="footlink-header-three"
+
                 >
                   <a className="nav-link" href="#" title="link">
                     Student Organization
@@ -2059,7 +2059,7 @@ export const FiveColumns = () => (
                 <div
                   id="footlink-four"
                   className="collapse accordion-body"
-                  aria-labelledby="footlink-header-four"
+
                 >
                   <a className="nav-link" href="#" title="link">
                     Student Organization
@@ -2107,7 +2107,7 @@ export const FiveColumns = () => (
                 <div
                   id="footlink-five"
                   className="collapse accordion-body"
-                  aria-labelledby="footlink-header-five"
+
                 >
                   <a className="nav-link" href="#" title="link">
                     Student Organization
@@ -2410,7 +2410,7 @@ export const SixColumns = () => (
                 <div
                   id="footlink-two"
                   className="collapse accordion-body"
-                  aria-labelledby="footlink-header-two"
+
                 >
                   <a className="nav-link" href="#" title="link">
                     Biological and Health Systems Computing
@@ -2453,7 +2453,7 @@ export const SixColumns = () => (
                 <div
                   id="footlink-three"
                   className="collapse accordion-body"
-                  aria-labelledby="footlink-header-three"
+
                 >
                   <a className="nav-link" href="#" title="link">
                     Student Organization
@@ -2501,7 +2501,7 @@ export const SixColumns = () => (
                 <div
                   id="footlink-four"
                   className="collapse accordion-body"
-                  aria-labelledby="footlink-header-four"
+
                 >
                   <a className="nav-link" href="#" title="link">
                     Student Organization
@@ -2549,7 +2549,7 @@ export const SixColumns = () => (
                 <div
                   id="footlink-five"
                   className="collapse accordion-body"
-                  aria-labelledby="footlink-header-five"
+
                 >
                   <a className="nav-link" href="#" title="link">
                     Student Organization
@@ -2597,7 +2597,7 @@ export const SixColumns = () => (
                 <div
                   id="footlink-six"
                   className="collapse accordion-body"
-                  aria-labelledby="footlink-header-six"
+
                 >
                   <a className="nav-link" href="#" title="link">
                     A Zen master
diff --git a/packages/unity-bootstrap-theme/stories/organisms/global-header/global-header.templates.jsx b/packages/unity-bootstrap-theme/stories/organisms/global-header/global-header.templates.jsx
index 74e8c5509e..f9a46cf90a 100644
--- a/packages/unity-bootstrap-theme/stories/organisms/global-header/global-header.templates.jsx
+++ b/packages/unity-bootstrap-theme/stories/organisms/global-header/global-header.templates.jsx
@@ -214,7 +214,7 @@ export const Basic = () => (
                             </a>
                             <div
                               className="dropdown-menu dropdown-columns"
-                              aria-labelledby="dropdown-one-col"
+
                             >
                               <div className="dropdown-col">
                                 <a
@@ -560,7 +560,7 @@ export const DropDownMenus = () => (
                             </a>
                             <div
                               className="dropdown-menu dropdown-columns"
-                              aria-labelledby="dropdown-one-col"
+
                             >
                               <div className="dropdown-col">
                                 <a
@@ -627,7 +627,7 @@ export const DropDownMenus = () => (
                             </a>
                             <div
                               className="dropdown-menu dropdown-columns"
-                              aria-labelledby="dropdown-two-col"
+
                             >
                               <div className="dropdown-col">
                                 <h3>Column One</h3>
@@ -748,7 +748,7 @@ export const DropDownMenus = () => (
                             </a>
                             <div
                               className="dropdown-menu"
-                              aria-labelledby="megamenu-three-col"
+
                             >
                               <div className="container">
                                 <div className="row">
@@ -892,7 +892,7 @@ export const DropDownMenus = () => (
                             </a>
                             <div
                               className="dropdown-menu"
-                              aria-labelledby="megamenu-four-col"
+
                             >
                               <div className="container">
                                 <div className="row">
@@ -1131,7 +1131,7 @@ export const DropDownMenus = () => (
                             </a>
                             <div
                               className="dropdown-menu"
-                              aria-labelledby="megamenu-five-col"
+
                             >
                               <div className="container">
                                 <div className="row">
@@ -2223,7 +2223,7 @@ export const ScrolledState = () => (
                             </a>
                             <div
                               className="dropdown-menu dropdown-columns"
-                              aria-labelledby="dropdown-one-col"
+
                             >
                               <div className="dropdown-col">
                                 <a
@@ -2274,7 +2274,7 @@ export const ScrolledState = () => (
                             </a>
                             <div
                               className="dropdown-menu dropdown-columns"
-                              aria-labelledby="dropdown-one-col"
+
                             >
                               <div className="dropdown-col">
                                 <a
@@ -2325,7 +2325,7 @@ export const ScrolledState = () => (
                             </a>
                             <div
                               className="dropdown-menu dropdown-columns"
-                              aria-labelledby="dropdown-one-col"
+
                             >
                               <div className="dropdown-col">
                                 <a
@@ -2691,7 +2691,7 @@ export const Partner = () => (
                           </a>
                           <div
                             className="dropdown-menu dropdown-columns"
-                            aria-labelledby="dropdown-one-col"
+
                           >
                             <div className="dropdown-col">
                               <a