diff --git a/src/app/features/website/product/components/product-actions/product-actions.component.scss b/src/app/features/website/product/components/product-actions/product-actions.component.scss
index cf4e733..9991967 100644
--- a/src/app/features/website/product/components/product-actions/product-actions.component.scss
+++ b/src/app/features/website/product/components/product-actions/product-actions.component.scss
@@ -31,6 +31,11 @@ button.secondary.active {
   box-shadow: 0 0 0 2px rgba(73, 118, 113, 0.18);
 }
 
+button:focus-visible {
+  outline: 2px solid #497671;
+  outline-offset: 2px;
+}
+
 @media (max-width: 640px) {
   .product-actions {
     display: grid;
diff --git a/src/app/features/website/product/components/variant-selector/variant-selector.component.scss b/src/app/features/website/product/components/variant-selector/variant-selector.component.scss
index 422e9af..410fe15 100644
--- a/src/app/features/website/product/components/variant-selector/variant-selector.component.scss
+++ b/src/app/features/website/product/components/variant-selector/variant-selector.component.scss
@@ -38,6 +38,11 @@
     display: inline-block;
     cursor: default;
   }
+
+  &:focus-visible {
+    outline: 2px solid #1e3c38;
+    outline-offset: 2px;
+  }
 }
 
 .size-chip {
@@ -61,4 +66,9 @@
     align-items: center;
     cursor: default;
   }
+
+  &:focus-visible {
+    outline: 2px solid #497671;
+    outline-offset: 2px;
+  }
 }
diff --git a/src/app/features/website/product/containers/product-details-container.component.html b/src/app/features/website/product/containers/product-details-container.component.html
index 426c58b..1ccb75e 100644
--- a/src/app/features/website/product/containers/product-details-container.component.html
+++ b/src/app/features/website/product/containers/product-details-container.component.html
@@ -1,13 +1,13 @@
 <main class="product-details-page">
   @if (loading()) {
-    <section class="product-details-loading">
+    <section class="product-details-loading" role="status" aria-live="polite">
       <div class="product-details-spinner"></div>
       <p>{{ 'productDetails.loading' | translate }}</p>
     </section>
   }
 
   @if (error()) {
-    <section class="product-details-message error">
+    <section class="product-details-message error" role="alert">
       <h1>{{ 'productDetails.errorTitle' | translate }}</h1>
       <p>{{ error()! | translate }}</p>
       <button type="button" (click)="retry()">{{ 'productDetails.retry' | translate }}</button>
diff --git a/src/app/features/website/product/engagement/components/star-selector/star-selector.component.scss b/src/app/features/website/product/engagement/components/star-selector/star-selector.component.scss
index d093f2f..22478ef 100644
--- a/src/app/features/website/product/engagement/components/star-selector/star-selector.component.scss
+++ b/src/app/features/website/product/engagement/components/star-selector/star-selector.component.scss
@@ -22,3 +22,9 @@
 .star-btn.selected {
   color: var(--primary-color);
 }
+
+.star-btn:focus-visible {
+  outline: 2px solid var(--primary-color);
+  outline-offset: 2px;
+  border-radius: 4px;
+}