diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js
index 4fcf8ee0f0b4..50fb57c8aa4f 100644
--- a/js/tests/unit/tab.spec.js
+++ b/js/tests/unit/tab.spec.js
@@ -376,17 +376,17 @@ describe('Tab', () => {
           '<ul class="nav nav-tabs" role="tablist">',
           '  <li class="nav-item" role="presentation">',
           '    <a class="nav-link nav-tab" href="#profile" role="tab" data-bs-toggle="tab">',
-          '      <button class="btn-close" aria-label="Close"></button>',
+          '      <button class="btn-close"><span class="visually-hidden">Close</span></button>',
           '    </a>',
           '  </li>',
           '  <li class="nav-item" role="presentation">',
           '    <a id="secondNav" class="nav-link nav-tab" href="#buzz" role="tab" data-bs-toggle="tab">',
-          '      <button class="btn-close" aria-label="Close"></button>',
+          '      <button class="btn-close"><span class="visually-hidden">Close</span></button>',
           '    </a>',
           '  </li>',
           '  <li class="nav-item" role="presentation">',
           '    <a class="nav-link nav-tab" href="#references" role="tab" data-bs-toggle="tab">',
-          '      <button id="btnClose" class="btn-close" aria-label="Close"></button>',
+          '      <button id="btnClose"><span class="visually-hidden">Close</span></button>',
           '    </a>',
           '  </li>',
           '</ul>',
diff --git a/js/tests/unit/toast.spec.js b/js/tests/unit/toast.spec.js
index 200fe3e40cf7..8a0009919e2b 100644
--- a/js/tests/unit/toast.spec.js
+++ b/js/tests/unit/toast.spec.js
@@ -66,7 +66,7 @@ describe('Toast', () => {
       return new Promise(resolve => {
         fixtureEl.innerHTML = [
           '<div class="toast" data-bs-delay="1" data-bs-autohide="false" data-bs-animation="false">',
-          '  <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>',
+          '  <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>',
           '</div>'
         ].join('')
 
@@ -99,7 +99,7 @@ describe('Toast', () => {
 
       fixtureEl.innerHTML = [
         '<div class="toast" data-bs-autohide="false" data-bs-animation="false">',
-        '  <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>',
+        '  <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>',
         '</div>'
       ].join('')
 
diff --git a/js/tests/visual/alert.html b/js/tests/visual/alert.html
index 2433b9e8e350..af2b3f64e0a7 100644
--- a/js/tests/visual/alert.html
+++ b/js/tests/visual/alert.html
@@ -11,12 +11,12 @@
       <h1>Alert <small>Bootstrap Visual Test</small></h1>
 
       <div class="alert alert-warning alert-dismissible fade show" role="alert">
-        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="alert"><span class="visually-hidden">Close</span></button>
         <strong>Holy guacamole!</strong> You should check in on some of those fields below.
       </div>
 
       <div class="alert alert-danger alert-dismissible fade show" role="alert">
-        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="alert"><span class="visually-hidden">Close</span></button>
         <p>
           <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
         </p>
@@ -27,7 +27,7 @@ <h1>Alert <small>Bootstrap Visual Test</small></h1>
       </div>
 
       <div class="alert alert-danger alert-dismissible fade show" role="alert">
-        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="alert"><span class="visually-hidden">Close</span></button>
         <p>
           <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
         </p>
@@ -38,7 +38,7 @@ <h1>Alert <small>Bootstrap Visual Test</small></h1>
       </div>
 
       <div class="alert alert-warning alert-dismissible fade show" role="alert" style="transition-duration: 5s;">
-        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="alert"><span class="visually-hidden">Close</span></button>
         This alert will take 5 seconds to fade out.
       </div>
     </div>
diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
index efb5127b5a74..444a9afc7538 100644
--- a/js/tests/visual/modal.html
+++ b/js/tests/visual/modal.html
@@ -43,7 +43,7 @@ <h1>Modal <small>Bootstrap Visual Test</small></h1>
           <div class="modal-content">
             <div class="modal-header">
               <h1 class="modal-title fs-4" id="myModalLabel">Modal title</h1>
-              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+              <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
             </div>
             <div class="modal-body">
               <h4>Text in a modal</h4>
@@ -128,7 +128,7 @@ <h4>Overflowing text to show scroll behavior</h4>
           <div class="modal-content">
             <div class="modal-header">
               <h1 class="modal-title fs-4" id="firefoxModalLabel">Firefox Bug Test</h1>
-              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+              <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
             </div>
             <div class="modal-body">
               <ol>
@@ -152,7 +152,7 @@ <h1 class="modal-title fs-4" id="firefoxModalLabel">Firefox Bug Test</h1>
           <div class="modal-content">
             <div class="modal-header">
               <h1 class="modal-title fs-4" id="slowModalLabel">Lorem slowly</h1>
-              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+              <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
             </div>
             <div class="modal-body">
               <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue.</p>
diff --git a/js/tests/visual/toast.html b/js/tests/visual/toast.html
index e64fd1d880fb..117a692b070b 100644
--- a/js/tests/visual/toast.html
+++ b/js/tests/visual/toast.html
@@ -42,7 +42,7 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>
           <span class="d-block bg-primary rounded me-2" style="width: 20px; height: 20px;"></span>
           <strong class="me-auto">Bootstrap</strong>
           <small class="text-body-secondary">2 seconds ago</small>
-          <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+          <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>
         </div>
         <div class="toast-body">
           Heads up, toasts will stack automatically
diff --git a/site/src/assets/examples/cheatsheet/index.astro b/site/src/assets/examples/cheatsheet/index.astro
index dec65f7d65c9..58b9796e52a8 100644
--- a/site/src/assets/examples/cheatsheet/index.astro
+++ b/site/src/assets/examples/cheatsheet/index.astro
@@ -654,7 +654,7 @@ export const body_class = 'bg-body-tertiary'
         <Example showMarkup={false} code={getData('theme-colors').map((themeColor) => `
         <div class="alert alert-${themeColor.name} alert-dismissible fade show" role="alert">
           A simple ${themeColor.name} alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
-          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+          <button type="button" class="btn-close" data-bs-dismiss="alert"><span class="visually-hidden">Close</span></button>
         </div>
         `)} />
 
@@ -1463,7 +1463,7 @@ export const body_class = 'bg-body-tertiary'
             <Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
             <strong class="me-auto">Bootstrap</strong>
             <small class="text-body-secondary">11 mins ago</small>
-            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+            <button type="button" class="btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>
           </div>
           <div class="toast-body">
             Hello, world! This is a toast message.
@@ -1496,7 +1496,7 @@ export const body_class = 'bg-body-tertiary'
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         ...
@@ -1513,7 +1513,7 @@ export const body_class = 'bg-body-tertiary'
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-5" id="staticBackdropLiveLabel">Modal title</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         <p>I will not close if you click outside me. Don't even try to press escape key.</p>
@@ -1530,7 +1530,7 @@ export const body_class = 'bg-body-tertiary'
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-5" id="exampleModalCenteredScrollableTitle">Modal title</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         <p>This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.</p>
@@ -1549,7 +1549,7 @@ export const body_class = 'bg-body-tertiary'
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-4" id="exampleModalFullscreenLabel">Full screen modal</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         ...
diff --git a/site/src/assets/examples/dashboard/index.astro b/site/src/assets/examples/dashboard/index.astro
index 4d33c7fb83db..d3e4f60f7fea 100644
--- a/site/src/assets/examples/dashboard/index.astro
+++ b/site/src/assets/examples/dashboard/index.astro
@@ -84,7 +84,7 @@ export const extra_js = [
       <div class="offcanvas-md offcanvas-end bg-body-tertiary" tabindex="-1" id="sidebarMenu" aria-labelledby="sidebarMenuLabel">
         <div class="offcanvas-header">
           <h5 class="offcanvas-title" id="sidebarMenuLabel">Company name</h5>
-          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#sidebarMenu" aria-label="Close"></button>
+          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#sidebarMenu"><span class="visually-hidden">Close</span></button>
         </div>
         <div class="offcanvas-body d-md-flex flex-column p-0 pt-lg-3 overflow-y-auto">
           <ul class="nav flex-column">
diff --git a/site/src/assets/examples/jumbotrons/index.astro b/site/src/assets/examples/jumbotrons/index.astro
index 587e793024c3..ef39e447415b 100644
--- a/site/src/assets/examples/jumbotrons/index.astro
+++ b/site/src/assets/examples/jumbotrons/index.astro
@@ -40,7 +40,7 @@ export const extra_css = ['jumbotrons.css']
 
 <div class="container my-5">
   <div class="position-relative p-5 text-center text-muted bg-body border border-dashed rounded-5">
-    <button type="button" class="position-absolute top-0 end-0 p-3 m-3 btn-close bg-secondary bg-opacity-10 rounded-pill" aria-label="Close"></button>
+    <button type="button" class="position-absolute top-0 end-0 p-3 m-3 btn-close bg-secondary bg-opacity-10 rounded-pill"><span class="visually-hidden">Close</span></button>
     <svg class="bi mt-5 mb-3" width="48" height="48" aria-hidden="true"><use xlink:href="#check2-circle"/></svg>
     <h1 class="text-body-emphasis">Placeholder jumbotron</h1>
     <p class="col-lg-6 mx-auto mb-4">
diff --git a/site/src/assets/examples/modals/index.astro b/site/src/assets/examples/modals/index.astro
index 9514f6f1fb0b..1a6d28770ef6 100644
--- a/site/src/assets/examples/modals/index.astro
+++ b/site/src/assets/examples/modals/index.astro
@@ -35,7 +35,7 @@ export const extra_css = ['modals.css']
     <div class="modal-content rounded-4 shadow">
       <div class="modal-header border-bottom-0">
         <h1 class="modal-title fs-5">Modal title</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body py-0">
         <p>This is a modal sheet, a variation of the modal that docs itself to the bottom of the viewport like the newer share sheets in iOS.</p>
@@ -109,7 +109,7 @@ export const extra_css = ['modals.css']
     <div class="modal-content rounded-4 shadow">
       <div class="modal-header p-5 pb-4 border-bottom-0">
         <h1 class="fw-bold mb-0 fs-2">Sign up for free</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
 
       <div class="modal-body p-5 pt-0">
diff --git a/site/src/assets/examples/navbars-offcanvas/index.astro b/site/src/assets/examples/navbars-offcanvas/index.astro
index ec6b03f76d92..bfcc1b6526a5 100644
--- a/site/src/assets/examples/navbars-offcanvas/index.astro
+++ b/site/src/assets/examples/navbars-offcanvas/index.astro
@@ -15,7 +15,7 @@ export const extra_css = ['navbars-offcanvas.css']
       <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasNavbarDark" aria-labelledby="offcanvasNavbarDarkLabel">
         <div class="offcanvas-header">
           <h5 class="offcanvas-title" id="offcanvasNavbarDarkLabel">Offcanvas</h5>
-          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
         </div>
         <div class="offcanvas-body">
           <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
@@ -57,7 +57,7 @@ export const extra_css = ['navbars-offcanvas.css']
       <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbarLight" aria-labelledby="offcanvasNavbarLightLabel">
         <div class="offcanvas-header">
           <h5 class="offcanvas-title" id="offcanvasNavbarLightLabel">Offcanvas</h5>
-          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+          <button type="button" class="btn-close" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
         </div>
         <div class="offcanvas-body">
           <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
@@ -99,7 +99,7 @@ export const extra_css = ['navbars-offcanvas.css']
       <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasNavbar2" aria-labelledby="offcanvasNavbar2Label">
         <div class="offcanvas-header">
           <h5 class="offcanvas-title" id="offcanvasNavbar2Label">Offcanvas</h5>
-          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
         </div>
         <div class="offcanvas-body">
           <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
diff --git a/site/src/assets/examples/product/index.astro b/site/src/assets/examples/product/index.astro
index 7c98d11a18c2..da5943722a23 100644
--- a/site/src/assets/examples/product/index.astro
+++ b/site/src/assets/examples/product/index.astro
@@ -28,7 +28,7 @@ export const extra_css = ['product.css']
     <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
       <div class="offcanvas-header">
         <h5 class="offcanvas-title" id="offcanvasLabel">Aperture</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="offcanvas-body">
         <ul class="navbar-nav flex-grow-1 justify-content-between">
diff --git a/site/src/assets/partials/snippets.js b/site/src/assets/partials/snippets.js
index 498071b415a2..53e8e298b095 100644
--- a/site/src/assets/partials/snippets.js
+++ b/site/src/assets/partials/snippets.js
@@ -82,7 +82,7 @@ export default () => {
     wrapper.innerHTML = [
       `<div class="alert alert-${type} alert-dismissible" role="alert">`,
       `   <div>${message}</div>`,
-      '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
+      '   <button type="button" class="btn-close" data-bs-dismiss="alert"><span class="visually-hidden">Close</span></button>',
       '</div>'
     ].join('')
 
diff --git a/site/src/components/header/Navigation.astro b/site/src/components/header/Navigation.astro
index 4e55d54ff82f..591f75b5b9de 100644
--- a/site/src/components/header/Navigation.astro
+++ b/site/src/components/header/Navigation.astro
@@ -73,8 +73,7 @@ const { addedIn, layout, title } = Astro.props
           type="button"
           class="btn-close btn-close-white"
           data-bs-dismiss="offcanvas"
-          aria-label="Close"
-          data-bs-target="#bdNavbar"></button>
+          data-bs-target="#bdNavbar"><span class="visually-hidden">Close</span></button>
       </div>
 
       <div class="offcanvas-body p-4 pt-0 p-lg-0">
diff --git a/site/src/components/shortcodes/JsDismiss.astro b/site/src/components/shortcodes/JsDismiss.astro
index d1da8fc4d6ac..8694e7e24bc0 100644
--- a/site/src/components/shortcodes/JsDismiss.astro
+++ b/site/src/components/shortcodes/JsDismiss.astro
@@ -15,7 +15,7 @@ const { name } = Astro.props
 </p>
 
 <Code
-  code={`<button type="button" class="btn-close" data-bs-dismiss="${name}" aria-label="Close"></button>`}
+  code={`<button type="button" class="btn-close" data-bs-dismiss="${name}"><span class="visually-hidden">Close</span></button>`}
   lang="html"
 />
 
@@ -24,6 +24,6 @@ const { name } = Astro.props
 </p>
 
 <Code
-  code={`<button type="button" class="btn-close" data-bs-dismiss="${name}" data-bs-target="#my-${name}" aria-label="Close"></button>`}
+  code={`<button type="button" class="btn-close" data-bs-dismiss="${name}" data-bs-target="#my-${name}"><span class="visually-hidden">Close</span></button>`}
   lang="html"
 />
diff --git a/site/src/content/docs/components/alerts.mdx b/site/src/content/docs/components/alerts.mdx
index e25604462b26..40e3dadcf3d3 100644
--- a/site/src/content/docs/components/alerts.mdx
+++ b/site/src/content/docs/components/alerts.mdx
@@ -115,7 +115,7 @@ You can see this in action with a live demo:
 
 <Example code={`<div class="alert alert-warning alert-dismissible fade show" role="alert">
     <strong>Holy guacamole!</strong> You should check in on some of those fields below.
-    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+    <button type="button" class="btn-close" data-bs-dismiss="alert"><span class="visually-hidden">Close</span></button>
   </div>`} />
 
 <Callout type="warning">
diff --git a/site/src/content/docs/components/close-button.mdx b/site/src/content/docs/components/close-button.mdx
index c68c1ea38bec..f7fddb3f2b1d 100644
--- a/site/src/content/docs/components/close-button.mdx
+++ b/site/src/content/docs/components/close-button.mdx
@@ -8,13 +8,13 @@ toc: true
 
 Provide an option to dismiss or close a component with `.btn-close`. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default `background-image`. **Be sure to include text for screen readers**, as we’ve done with `aria-label`.
 
-<Example code={`<button type="button" class="btn-close" aria-label="Close"></button>`} />
+<Example code={`<button type="button" class="btn-close"><span class="visually-hidden">Close</span></button>`} />
 
 ## Disabled state
 
 Disabled close buttons change their `opacity`. We’ve also applied `pointer-events: none` and `user-select: none` to preventing hover and active states from triggering.
 
-<Example code={`<button type="button" class="btn-close" disabled aria-label="Close"></button>`} />
+<Example code={`<button type="button" class="btn-close" disabled><span class="visually-hidden">Close</span></button>`} />
 
 ## Dark variant
 
@@ -27,8 +27,8 @@ Disabled close buttons change their `opacity`. We’ve also applied `pointer-eve
 Add `data-bs-theme="dark"` to the `.btn-close`, or to its parent element, to invert the close button. This uses the `filter` property to invert the `background-image` without overriding its value.
 
 <Example class="bg-dark" code={`<div data-bs-theme="dark">
-    <button type="button" class="btn-close" aria-label="Close"></button>
-    <button type="button" class="btn-close" disabled aria-label="Close"></button>
+    <button type="button" class="btn-close"><span class="visually-hidden">Close</span></button>
+    <button type="button" class="btn-close" disabled><span class="visually-hidden">Close</span></button>
   </div>`} />
 
 ## CSS
diff --git a/site/src/content/docs/components/modal.mdx b/site/src/content/docs/components/modal.mdx
index 2f2cb55557ad..8868f2691c6a 100644
--- a/site/src/content/docs/components/modal.mdx
+++ b/site/src/content/docs/components/modal.mdx
@@ -40,7 +40,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
       <div class="modal-content">
         <div class="modal-header">
           <h5 class="modal-title">Modal title</h5>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
         </div>
         <div class="modal-body">
           <p>Modal body text goes here.</p>
@@ -60,7 +60,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title">Modal title</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         <p>Modal body text goes here.</p>
@@ -87,7 +87,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-5" id="exampleModalLiveLabel">Modal title</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         <p>Woo-hoo, you’re reading this text in a modal!</p>
@@ -116,7 +116,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         ...
@@ -139,7 +139,7 @@ When backdrop is set to static, the modal will not close when clicking outside o
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-5" id="staticBackdropLiveLabel">Modal title</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         <p>I will not close if you click outside of me. Don’t even try to press escape key.</p>
@@ -168,7 +168,7 @@ When backdrop is set to static, the modal will not close when clicking outside o
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-5" id="staticBackdropLabel">Modal title</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         ...
@@ -191,7 +191,7 @@ When modals become too long for the user’s viewport or device, they scroll ind
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-5" id="exampleModalLongTitle">Modal title</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body" style="min-height: 100vh">
         <p>This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.</p>
@@ -215,7 +215,7 @@ You can also create a scrollable modal that allows scrolling the modal body by a
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-5" id="exampleModalScrollableTitle">Modal title</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         <p>This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.</p>
@@ -250,7 +250,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
       <div class="modal-content">
         <div class="modal-header">
           <h1 class="modal-title fs-5" id="exampleModalCenterTitle">Modal title</h1>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
         </div>
         <div class="modal-body">
           <p>This is a vertically centered modal.</p>
@@ -268,7 +268,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
       <div class="modal-content">
         <div class="modal-header">
           <h1 class="modal-title fs-5" id="exampleModalCenteredScrollableTitle">Modal title</h1>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
         </div>
         <div class="modal-body">
           <p>This is some placeholder content to show a vertically centered modal. We’ve added some extra copy here to show how vertically centering the modal works when combined with scrollable modals. We also use some repeated line breaks to quickly extend the height of the content, thereby triggering the scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.</p>
@@ -307,7 +307,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
       <div class="modal-content">
         <div class="modal-header">
           <h1 class="modal-title fs-5" id="exampleModalPopoversLabel">Modal title</h1>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
         </div>
         <div class="modal-body">
           <h2 class="fs-5">Popover in a modal</h2>
@@ -345,7 +345,7 @@ Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` w
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-5" id="gridModalLabel">Grids in modals</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         <div class="container-fluid bd-example-row">
@@ -433,7 +433,7 @@ Below is a live demo followed by example HTML and JavaScript. For more informati
       <div class="modal-content">
         <div class="modal-header">
           <h1 class="modal-title fs-5" id="exampleModalLabel">New message</h1>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
         </div>
         <div class="modal-body">
           <form>
@@ -466,7 +466,7 @@ Toggle between multiple modals with some clever placement of the `data-bs-target
       <div class="modal-content">
         <div class="modal-header">
           <h1 class="modal-title fs-5" id="exampleModalToggleLabel">Modal 1</h1>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
         </div>
         <div class="modal-body">
           Show a second modal and hide this one with the button below.
@@ -482,7 +482,7 @@ Toggle between multiple modals with some clever placement of the `data-bs-target
       <div class="modal-content">
         <div class="modal-header">
           <h1 class="modal-title fs-5" id="exampleModalToggleLabel2">Modal 2</h1>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
         </div>
         <div class="modal-body">
           Hide this modal and show the first with the button below.
@@ -553,7 +553,7 @@ Our default modal without modifier class constitutes the “medium” size modal
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-4" id="exampleModalXlLabel">Extra large modal</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         ...
@@ -567,7 +567,7 @@ Our default modal without modifier class constitutes the “medium” size modal
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-4" id="exampleModalLgLabel">Large modal</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         ...
@@ -581,7 +581,7 @@ Our default modal without modifier class constitutes the “medium” size modal
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-4" id="exampleModalSmLabel">Small modal</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         ...
@@ -624,7 +624,7 @@ Another override is the option to pop up a modal that covers the user viewport,
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-4" id="exampleModalFullscreenLabel">Full screen modal</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         ...
@@ -641,7 +641,7 @@ Another override is the option to pop up a modal that covers the user viewport,
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-4" id="exampleModalFullscreenSmLabel">Full screen below sm</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         ...
@@ -658,7 +658,7 @@ Another override is the option to pop up a modal that covers the user viewport,
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-4" id="exampleModalFullscreenMdLabel">Full screen below md</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         ...
@@ -675,7 +675,7 @@ Another override is the option to pop up a modal that covers the user viewport,
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-4" id="exampleModalFullscreenLgLabel">Full screen below lg</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         ...
@@ -692,7 +692,7 @@ Another override is the option to pop up a modal that covers the user viewport,
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-4" id="exampleModalFullscreenXlLabel">Full screen below xl</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         ...
@@ -709,7 +709,7 @@ Another override is the option to pop up a modal that covers the user viewport,
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-4" id="exampleModalFullscreenXxlLabel">Full screen below xxl</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         ...
diff --git a/site/src/content/docs/components/navbar.mdx b/site/src/content/docs/components/navbar.mdx
index 2387e83f3c3b..0656cd77f118 100644
--- a/site/src/content/docs/components/navbar.mdx
+++ b/site/src/content/docs/components/navbar.mdx
@@ -635,7 +635,7 @@ In the example below, to create an offcanvas navbar that is always collapsed acr
       <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
         <div class="offcanvas-header">
           <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
-          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+          <button type="button" class="btn-close" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
         </div>
         <div class="offcanvas-body">
           <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
@@ -693,7 +693,7 @@ When using offcanvas in a dark navbar, be aware that you may need to have a dark
       <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
         <div class="offcanvas-header">
           <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5>
-          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
         </div>
         <div class="offcanvas-body">
           <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
diff --git a/site/src/content/docs/components/offcanvas.mdx b/site/src/content/docs/components/offcanvas.mdx
index eee354305341..607a16c94792 100644
--- a/site/src/content/docs/components/offcanvas.mdx
+++ b/site/src/content/docs/components/offcanvas.mdx
@@ -26,7 +26,7 @@ Below is an offcanvas example that is shown by default (via `.show` on `.offcanv
 <Example class="bd-example-offcanvas p-0 bg-body-tertiary overflow-hidden" code={`<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
     <div class="offcanvas-header">
       <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
-      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+      <button type="button" class="btn-close" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
     </div>
     <div class="offcanvas-body">
       Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
@@ -52,7 +52,7 @@ You can use a link with the `href` attribute, or a button with the `data-bs-targ
   <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
     <div class="offcanvas-header">
       <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
-      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+      <button type="button" class="btn-close" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
     </div>
     <div class="offcanvas-body">
       <div>
@@ -80,7 +80,7 @@ Scrolling the `<body>` element is disabled when an offcanvas and its backdrop ar
   <div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
     <div class="offcanvas-header">
       <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Offcanvas with body scrolling</h5>
-      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+      <button type="button" class="btn-close" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
     </div>
     <div class="offcanvas-body">
       <p>Try scrolling the rest of the page to see this option in action.</p>
@@ -96,7 +96,7 @@ You can also enable `<body>` scrolling with a visible backdrop.
   <div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
     <div class="offcanvas-header">
       <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdrop with scrolling</h5>
-      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+      <button type="button" class="btn-close" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
     </div>
     <div class="offcanvas-body">
       <p>Try scrolling the rest of the page to see this option in action.</p>
@@ -114,7 +114,7 @@ When backdrop is set to static, the offcanvas will not close when clicking outsi
   <div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
     <div class="offcanvas-header">
       <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
-      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+      <button type="button" class="btn-close" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
     </div>
     <div class="offcanvas-body">
       <div>
@@ -136,7 +136,7 @@ Change the appearance of offcanvases with utilities to better match them to diff
 <Example class="bd-example-offcanvas p-0 bg-body-secondary overflow-hidden" code={`<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
     <div class="offcanvas-header">
       <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
-      <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
+      <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark"><span class="visually-hidden">Close</span></button>
     </div>
     <div class="offcanvas-body">
       <p>Place offcanvas content here.</p>
@@ -165,7 +165,7 @@ To make a responsive offcanvas, replace the `.offcanvas` base class with a respo
   <div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
     <div class="offcanvas-header">
       <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
-      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
+      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive"><span class="visually-hidden">Close</span></button>
     </div>
     <div class="offcanvas-body">
       <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
@@ -174,7 +174,7 @@ To make a responsive offcanvas, replace the `.offcanvas` base class with a respo
 
 ## Placement
 
-There’s no default placement for offcanvas components, so you must add one of the modifier classes below.
+There's no default placement for offcanvas components, so you must add one of the modifier classes below.
 
 - `.offcanvas-start` places offcanvas on the left of the viewport (shown above)
 - `.offcanvas-end` places offcanvas on the right of the viewport
@@ -188,7 +188,7 @@ Try the top, right, and bottom examples out below.
   <div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
     <div class="offcanvas-header">
       <h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
-      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+      <button type="button" class="btn-close" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
     </div>
     <div class="offcanvas-body">
       ...
@@ -200,7 +200,7 @@ Try the top, right, and bottom examples out below.
   <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
     <div class="offcanvas-header">
       <h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
-      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+      <button type="button" class="btn-close" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
     </div>
     <div class="offcanvas-body">
       ...
@@ -212,7 +212,7 @@ Try the top, right, and bottom examples out below.
   <div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
     <div class="offcanvas-header">
       <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
-      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+      <button type="button" class="btn-close" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
     </div>
     <div class="offcanvas-body small">
       ...
diff --git a/site/src/content/docs/components/toasts.mdx b/site/src/content/docs/components/toasts.mdx
index cb6afb9d6f36..427fc6cdc34d 100644
--- a/site/src/content/docs/components/toasts.mdx
+++ b/site/src/content/docs/components/toasts.mdx
@@ -28,7 +28,7 @@ Toasts are as flexible as you need and have very little required markup. At a mi
       <Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
       <strong class="me-auto">Bootstrap</strong>
       <small>11 mins ago</small>
-      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+      <button type="button" class="btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>
     </div>
     <div class="toast-body">
       Hello, world! This is a toast message.
@@ -49,7 +49,7 @@ Click the button below to show a toast (positioned with our utilities in the low
       <Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
       <strong class="me-auto">Bootstrap</strong>
       <small>11 mins ago</small>
-      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+      <button type="button" class="btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>
     </div>
     <div class="toast-body">
       Hello, world! This is a toast message.
@@ -70,7 +70,7 @@ Click the button below to show a toast (positioned with our utilities in the low
       <img src="..." class="rounded me-2" alt="...">
       <strong class="me-auto">Bootstrap</strong>
       <small>11 mins ago</small>
-      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+      <button type="button" class="btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>
     </div>
     <div class="toast-body">
       Hello, world! This is a toast message.
@@ -92,7 +92,7 @@ Toasts are slightly translucent to blend in with what’s below them.
       <Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
       <strong class="me-auto">Bootstrap</strong>
       <small class="text-body-secondary">11 mins ago</small>
-      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+      <button type="button" class="btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>
     </div>
     <div class="toast-body">
       Hello, world! This is a toast message.
@@ -109,7 +109,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall
         <Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
         <strong class="me-auto">Bootstrap</strong>
         <small class="text-body-secondary">just now</small>
-        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="toast-body">
         See? Just like this.
@@ -121,7 +121,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall
         <Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
         <strong class="me-auto">Bootstrap</strong>
         <small class="text-body-secondary">2 seconds ago</small>
-        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="toast-body">
         Heads up, toasts will stack automatically
@@ -138,7 +138,7 @@ Customize your toasts by removing sub-components, tweaking them with [utilities]
       <div class="toast-body">
         Hello, world! This is a toast message.
       </div>
-      <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+      <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>
     </div>
   </div>`} />
 
@@ -163,7 +163,7 @@ Building on the above example, you can create different toast color schemes with
       <div class="toast-body">
         Hello, world! This is a toast message.
       </div>
-      <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+      <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>
     </div>
   </div>`} />
 
@@ -218,7 +218,7 @@ For systems that generate more notifications, consider using a wrapping element
           <Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
           <strong class="me-auto">Bootstrap</strong>
           <small class="text-body-secondary">just now</small>
-          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+          <button type="button" class="btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>
         </div>
         <div class="toast-body">
           See? Just like this.
@@ -230,7 +230,7 @@ For systems that generate more notifications, consider using a wrapping element
           <Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
           <strong class="me-auto">Bootstrap</strong>
           <small class="text-body-secondary">2 seconds ago</small>
-          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+          <button type="button" class="btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>
         </div>
         <div class="toast-body">
           Heads up, toasts will stack automatically
@@ -250,7 +250,7 @@ You can also get fancy with flexbox utilities to align toasts horizontally and/o
         <Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
         <strong class="me-auto">Bootstrap</strong>
         <small>11 mins ago</small>
-        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="toast-body">
         Hello, world! This is a toast message.
@@ -281,7 +281,7 @@ When using `autohide: false`, you must add a close button to allow users to dism
       <Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
       <strong class="me-auto">Bootstrap</strong>
       <small>11 mins ago</small>
-      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+      <button type="button" class="btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>
     </div>
     <div class="toast-body">
       Hello, world! This is a toast message.
diff --git a/site/src/layouts/DocsLayout.astro b/site/src/layouts/DocsLayout.astro
index 37e6ec0c2d25..d18b862da109 100644
--- a/site/src/layouts/DocsLayout.astro
+++ b/site/src/layouts/DocsLayout.astro
@@ -39,8 +39,7 @@ if (frontmatter.toc) {
             type="button"
             class="btn-close"
             data-bs-dismiss="offcanvas"
-            aria-label="Close"
-            data-bs-target="#bdSidebar"></button>
+            data-bs-target="#bdSidebar"><span class="visually-hidden">Close</span></button>
         </div>
 
         <div class="offcanvas-body">