diff --git a/src/content/Components/Carousel/Carousel.css b/src/content/Components/Carousel/Carousel.css
index 4a9e443fd..9aab9f289 100644
--- a/src/content/Components/Carousel/Carousel.css
+++ b/src/content/Components/Carousel/Carousel.css
@@ -121,11 +121,19 @@
 .carousel-indicator {
   height: 8px;
   width: 8px;
+  border: none;
+  padding: 0;
+  appearance: none;
   border-radius: 50%;
   cursor: pointer;
   transition: background-color 150ms;
 }
 
+.carousel-indicator:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 2px;
+}
+
 .carousel-indicator.active {
   background-color: #fff;
 }
diff --git a/src/content/Components/Carousel/Carousel.jsx b/src/content/Components/Carousel/Carousel.jsx
index 5ca67412a..57b45485d 100644
--- a/src/content/Components/Carousel/Carousel.jsx
+++ b/src/content/Components/Carousel/Carousel.jsx
@@ -245,9 +245,12 @@ export default function Carousel({
       <div className={`carousel-indicators-container ${round ? 'round' : ''}`}>
         <div className="carousel-indicators">
           {items.map((_, index) => (
-            <motion.div
+            <motion.button
+              type="button"
               key={index}
               className={`carousel-indicator ${activeIndex === index ? 'active' : 'inactive'}`}
+              aria-label={`Go to slide ${index + 1}`}
+              aria-current={activeIndex === index}
               animate={{
                 scale: activeIndex === index ? 1.2 : 1
               }}
diff --git a/src/tailwind/Components/Carousel/Carousel.jsx b/src/tailwind/Components/Carousel/Carousel.jsx
index f2c611f28..b7f00d8a5 100644
--- a/src/tailwind/Components/Carousel/Carousel.jsx
+++ b/src/tailwind/Components/Carousel/Carousel.jsx
@@ -251,9 +251,12 @@ export default function Carousel({
       <div className={`flex w-full justify-center ${round ? 'absolute z-20 bottom-12 left-1/2 -translate-x-1/2' : ''}`}>
         <div className="mt-4 flex w-[150px] justify-between px-8">
           {items.map((_, index) => (
-            <motion.div
+            <motion.button
+              type="button"
               key={index}
-              className={`h-2 w-2 rounded-full cursor-pointer transition-colors duration-150 ${
+              aria-label={`Go to slide ${index + 1}`}
+              aria-current={activeIndex === index}
+              className={`h-2 w-2 rounded-full cursor-pointer border-0 p-0 appearance-none transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white ${
                 activeIndex === index
                   ? round
                     ? 'bg-white'
diff --git a/src/ts-default/Components/Carousel/Carousel.css b/src/ts-default/Components/Carousel/Carousel.css
index 1f8ff0c26..a599a79c4 100644
--- a/src/ts-default/Components/Carousel/Carousel.css
+++ b/src/ts-default/Components/Carousel/Carousel.css
@@ -121,11 +121,19 @@
 .carousel-indicator {
   height: 8px;
   width: 8px;
+  border: none;
+  padding: 0;
+  appearance: none;
   border-radius: 50%;
   cursor: pointer;
   transition: background-color 150ms;
 }
 
+.carousel-indicator:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 2px;
+}
+
 .carousel-indicator.active {
   background-color: #fff;
 }
diff --git a/src/ts-default/Components/Carousel/Carousel.tsx b/src/ts-default/Components/Carousel/Carousel.tsx
index 205e7791f..a075e4c7d 100644
--- a/src/ts-default/Components/Carousel/Carousel.tsx
+++ b/src/ts-default/Components/Carousel/Carousel.tsx
@@ -271,9 +271,12 @@ export default function Carousel({
       <div className={`carousel-indicators-container ${round ? 'round' : ''}`}>
         <div className="carousel-indicators">
           {items.map((_, index) => (
-            <motion.div
+            <motion.button
+              type="button"
               key={index}
               className={`carousel-indicator ${activeIndex === index ? 'active' : 'inactive'}`}
+              aria-label={`Go to slide ${index + 1}`}
+              aria-current={activeIndex === index}
               animate={{
                 scale: activeIndex === index ? 1.2 : 1
               }}
diff --git a/src/ts-tailwind/Components/Carousel/Carousel.tsx b/src/ts-tailwind/Components/Carousel/Carousel.tsx
index 5a225acb7..78c05fb55 100644
--- a/src/ts-tailwind/Components/Carousel/Carousel.tsx
+++ b/src/ts-tailwind/Components/Carousel/Carousel.tsx
@@ -279,9 +279,12 @@ export default function Carousel({
       <div className={`flex w-full justify-center ${round ? 'absolute z-20 bottom-12 left-1/2 -translate-x-1/2' : ''}`}>
         <div className="mt-4 flex w-[150px] justify-between px-8">
           {items.map((_, index) => (
-            <motion.div
+            <motion.button
+              type="button"
               key={index}
-              className={`h-2 w-2 rounded-full cursor-pointer transition-colors duration-150 ${
+              aria-label={`Go to slide ${index + 1}`}
+              aria-current={activeIndex === index}
+              className={`h-2 w-2 rounded-full cursor-pointer border-0 p-0 appearance-none transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white ${
                 activeIndex === index
                   ? round
                     ? 'bg-white'