diff --git a/packages/unity-bootstrap-theme/stories/molecules/cards/cards.examples.stories.js b/packages/unity-bootstrap-theme/stories/molecules/cards/cards.examples.stories.js
index 6e26e221eb..3445109adb 100644
--- a/packages/unity-bootstrap-theme/stories/molecules/cards/cards.examples.stories.js
+++ b/packages/unity-bootstrap-theme/stories/molecules/cards/cards.examples.stories.js
@@ -172,14 +172,16 @@ export const cardTags = () => (
     <div className="card">
       <div className="card-header"></div>
       <div className="card-tags">
+        <h3 className="visually-hidden">Tags:</h3>
         <a className="btn btn-tag btn-tag-alt-white" href="#">
           test tag
+          <span className="visually-hidden"> tag</span>
         </a>
         <a className="btn btn-tag btn-tag-alt-white" href="#">
-          test tag 2
+          test tag 2<span className="visually-hidden"> tag</span>
         </a>
         <a className="btn btn-tag btn-tag-alt-white" href="#">
-          test tag 3
+          test tag 3<span className="visually-hidden"> tag</span>
         </a>
       </div>
     </div>
@@ -193,14 +195,24 @@ export const cardTags = () => (
         background class too.
       </div>
       <div className="card-tags">
-        <span className="badge text-bg-gray-2">No button class</span>
-        <span className="badge text-bg-gray-2">No hover effects</span>
-        <span className="badge text-bg-gray-7">Dark mode</span>
+        <h3 className="visually-hidden">Tags:</h3>
+        <span className="badge text-bg-gray-2">
+          No button class
+          <span className="visually-hidden"> tag</span>
+        </span>
+        <span className="badge text-bg-gray-2">
+          No hover effects
+          <span className="visually-hidden"> tag</span>
+        </span>
+        <span className="badge text-bg-gray-7">
+          Dark mode
+          <span className="visually-hidden"> tag</span>
+        </span>
       </div>
     </div>
   </div>
 );
-cardTags.decorators = [ defaultDecorator ];
+cardTags.decorators = [defaultDecorator];
 
 export const cardDegree = () => (
   <div className="card card-degree">
@@ -259,19 +271,20 @@ export const cardDegree = () => (
       </a>
     </div>
     <div className="card-tags">
+      <h3 className="visually-hidden">Tags:</h3>
       <a className="btn btn-tag btn-tag-alt-white" href="#">
-        test tag
+        test tag<span className="visually-hidden"> tag</span>
       </a>
       <a className="btn btn-tag btn-tag-alt-white" href="#">
-        test tag 2
+        test tag 2<span className="visually-hidden"> tag</span>
       </a>
       <a className="btn btn-tag btn-tag-alt-white" href="#">
-        test tag 3
+        test tag 3<span className="visually-hidden"> tag</span>
       </a>
     </div>
   </div>
 );
-cardDegree.decorators = [ defaultDecorator ];
+cardDegree.decorators = [defaultDecorator];
 
 export const cardStory = () => (
   <div className="card card-story">
@@ -330,33 +343,34 @@ export const cardStory = () => (
       </a>
     </div>
     <div className="card-tags">
+      <h3 className="visually-hidden">Tags:</h3>
       <a className="btn btn-tag btn-tag-alt-white" href="#">
-        test tag
+        test tag<span className="visually-hidden"> tag</span>
       </a>
       <a className="btn btn-tag btn-tag-alt-white" href="#">
-        test tag 2
+        test tag 2<span className="visually-hidden"> tag</span>
       </a>
       <a className="btn btn-tag btn-tag-alt-white" href="#">
-        test tag 3
+        test tag 3<span className="visually-hidden"> tag</span>
       </a>
     </div>
   </div>
 );
-cardStory.decorators = [ defaultDecorator ];
+cardStory.decorators = [defaultDecorator];
 
 export const cardEvent = () => (
   <div className="card card-event">
     <a href="#">
-    <img
-      className="card-img-top"
-      src={cardsImage}
-      alt="Card image cap"
-      width="600"
-      height="337"
-      loading="lazy"
-      decoding="async"
-      fetchpriority="high"
-    />
+      <img
+        className="card-img-top"
+        src={cardsImage}
+        alt="Card image cap"
+        width="600"
+        height="337"
+        loading="lazy"
+        decoding="async"
+        fetchpriority="high"
+      />
     </a>
     <div className="card-header">
       <h3 className="card-title">
@@ -417,19 +431,20 @@ export const cardEvent = () => (
       </a>
     </div>
     <div className="card-tags">
+      <h3 className="visually-hidden">Tags:</h3>
       <a className="btn btn-tag btn-tag-alt-white" href="#">
-        test tag
+        test tag<span className="visually-hidden"> tag</span>
       </a>
       <a className="btn btn-tag btn-tag-alt-white" href="#">
-        test tag 2
+        test tag 2<span className="visually-hidden"> tag</span>
       </a>
       <a className="btn btn-tag btn-tag-alt-white" href="#">
-        test tag 3
+        test tag 3<span className="visually-hidden"> tag</span>
       </a>
     </div>
   </div>
 );
-cardEvent.decorators = [ defaultDecorator ];
+cardEvent.decorators = [defaultDecorator];
 
 export const cardVariations = () => (
   <div>
@@ -515,14 +530,15 @@ export const cardVariations = () => (
               </a>
             </div>
             <div className="card-tags">
+              <h3 className="visually-hidden">Tags:</h3>
               <a className="btn btn-tag btn-tag-alt-white" href="#">
-                test tag
+                test tag<span className="visually-hidden"> tag</span>
               </a>
               <a className="btn btn-tag btn-tag-alt-white" href="#">
-                test tag 2
+                test tag 2<span className="visually-hidden"> tag</span>
               </a>
               <a className="btn btn-tag btn-tag-alt-white" href="#">
-                test tag 3
+                test tag 3<span className="visually-hidden"> tag</span>
               </a>
             </div>
           </div>
@@ -561,14 +577,15 @@ export const cardVariations = () => (
               </a>
             </div>
             <div className="card-tags">
+              <h3 className="visually-hidden">Tags:</h3>
               <a className="btn btn-tag btn-tag-alt-white" href="#">
-                test tag
+                test tag<span className="visually-hidden"> tag</span>
               </a>
               <a className="btn btn-tag btn-tag-alt-white" href="#">
-                test tag 2
+                test tag 2<span className="visually-hidden"> tag</span>
               </a>
               <a className="btn btn-tag btn-tag-alt-white" href="#">
-                test tag 3
+                test tag 3<span className="visually-hidden"> tag</span>
               </a>
             </div>
           </div>
@@ -624,14 +641,15 @@ export const cardVariations = () => (
               </div>
             </div>
             <div className="card-tags">
+              <h3 className="visually-hidden">Tags:</h3>
               <a className="btn btn-tag btn-tag-alt-white" href="#">
-                test tag
+                test tag<span className="visually-hidden"> tag</span>
               </a>
               <a className="btn btn-tag btn-tag-alt-white" href="#">
-                test tag 2
+                test tag 2<span className="visually-hidden"> tag</span>
               </a>
               <a className="btn btn-tag btn-tag-alt-white" href="#">
-                test tag 3
+                test tag 3<span className="visually-hidden"> tag</span>
               </a>
             </div>
           </div>
@@ -777,14 +795,15 @@ export const cardVariations = () => (
               </a>
             </div>
             <div className="card-tags">
+              <h3 className="visually-hidden">Tags:</h3>
               <a className="btn btn-tag btn-tag-alt-white" href="#">
-                test tag
+                test tag<span className="visually-hidden"> tag</span>
               </a>
               <a className="btn btn-tag btn-tag-alt-white" href="#">
-                test tag 2
+                test tag 2<span className="visually-hidden"> tag</span>
               </a>
               <a className="btn btn-tag btn-tag-alt-white" href="#">
-                test tag 3
+                test tag 3<span className="visually-hidden"> tag</span>
               </a>
             </div>
           </div>
@@ -1128,19 +1147,20 @@ export const checkboxStackedCard = () => (
       </a>
     </div>
     <div className="card-tags">
+      <h3 className="visually-hidden">Tags:</h3>
       <a className="btn btn-tag btn-tag-alt-white" href="#">
-        test tag
+        test tag<span className="visually-hidden"> tag</span>
       </a>
       <a className="btn btn-tag btn-tag-alt-white" href="#">
-        test tag 2
+        test tag 2<span className="visually-hidden"> tag</span>
       </a>
       <a className="btn btn-tag btn-tag-alt-white" href="#">
-        test tag 3
+        test tag 3<span className="visually-hidden"> tag</span>
       </a>
     </div>
   </div>
 );
-checkboxStackedCard.decorators = [ defaultDecorator ];
+checkboxStackedCard.decorators = [defaultDecorator];
 
 export const checkboxInlineCard = () => (
   <div className="card card-checkbox-inline">
@@ -1230,19 +1250,20 @@ export const checkboxInlineCard = () => (
       </a>
     </div>
     <div className="card-tags">
+      <h3 className="visually-hidden">Tags:</h3>
       <a className="btn btn-tag btn-tag-alt-white" href="#">
-        test tag
+        test tag<span className="visually-hidden"> tag</span>
       </a>
       <a className="btn btn-tag btn-tag-alt-white" href="#">
-        test tag 2
+        test tag 2<span className="visually-hidden"> tag</span>
       </a>
       <a className="btn btn-tag btn-tag-alt-white" href="#">
-        test tag 3
+        test tag 3<span className="visually-hidden"> tag</span>
       </a>
     </div>
   </div>
 );
-checkboxInlineCard.decorators = [ defaultDecorator ];
+checkboxInlineCard.decorators = [defaultDecorator];
 
 export const mediaTypeOverlayCard = () => (
   <div className="container">
@@ -1314,14 +1335,15 @@ export const mediaTypeOverlayCard = () => (
             </a>
           </div>
           <div className="card-tags">
+            <h3 className="visually-hidden">Tags:</h3>
             <a className="btn btn-tag btn-tag-alt-white" href="#">
-              test tag
+              test tag<span className="visually-hidden"> tag</span>
             </a>
             <a className="btn btn-tag btn-tag-alt-white" href="#">
-              test tag 2
+              test tag 2<span className="visually-hidden"> tag</span>
             </a>
             <a className="btn btn-tag btn-tag-alt-white" href="#">
-              test tag 3
+              test tag 3<span className="visually-hidden"> tag</span>
             </a>
           </div>
         </div>
@@ -1393,14 +1415,15 @@ export const mediaTypeOverlayCard = () => (
             </a>
           </div>
           <div className="card-tags">
+            <h3 className="visually-hidden">Tags:</h3>
             <a className="btn btn-tag btn-tag-alt-white" href="#">
-              test tag
+              test tag<span className="visually-hidden"> tag</span>
             </a>
             <a className="btn btn-tag btn-tag-alt-white" href="#">
-              test tag 2
+              test tag 2<span className="visually-hidden"> tag</span>
             </a>
             <a className="btn btn-tag btn-tag-alt-white" href="#">
-              test tag 3
+              test tag 3<span className="visually-hidden"> tag</span>
             </a>
           </div>
         </div>
diff --git a/packages/unity-bootstrap-theme/stories/molecules/cards/cards.templates.stories.js b/packages/unity-bootstrap-theme/stories/molecules/cards/cards.templates.stories.js
index ed9a5871e7..c898955b54 100644
--- a/packages/unity-bootstrap-theme/stories/molecules/cards/cards.templates.stories.js
+++ b/packages/unity-bootstrap-theme/stories/molecules/cards/cards.templates.stories.js
@@ -144,14 +144,18 @@ export const cardNoTemplates = args => {
       )}
       {args.tags && (
         <div className="card-tags">
+          <h3 className="visually-hidden">Tags:</h3>
           <a className="btn btn-tag btn-tag-alt-white" href="#">
             test tag
+            <span className="visually-hidden"> tag</span>
           </a>
           <a className="btn btn-tag btn-tag-alt-white" href="#">
             test tag 2
+            <span className="visually-hidden"> tag</span>
           </a>
           <a className="btn btn-tag btn-tag-alt-white" href="#">
             test tag 3
+            <span className="visually-hidden"> tag</span>
           </a>
         </div>
       )}