diff --git a/src/components/common/Interactive.tsx b/src/components/common/Interactive.tsx
index 0c05d691..5b0dc47a 100644
--- a/src/components/common/Interactive.tsx
+++ b/src/components/common/Interactive.tsx
@@ -54,10 +54,9 @@ const isInvalid = (event: MouseEvent | TouchEvent, hasTouch: boolean): boolean =
   return hasTouch && !isTouch(event);
 };
 
-interface Props {
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
   onMove: (interaction: Interaction) => void;
   onKey: (offset: Interaction) => void;
-  children: React.ReactNode;
 }
 
 const InteractiveBase = ({ onMove, onKey, ...rest }: Props) => {
@@ -143,7 +142,6 @@ const InteractiveBase = ({ onMove, onKey, ...rest }: Props) => {
 
   return (
     <div
-      {...rest}
       onTouchStart={handleMoveStart}
       onMouseDown={handleMoveStart}
       className="react-colorful__interactive"
@@ -151,6 +149,7 @@ const InteractiveBase = ({ onMove, onKey, ...rest }: Props) => {
       onKeyDown={handleKeyDown}
       tabIndex={0}
       role="slider"
+      {...rest}
     />
   );
 };
diff --git a/src/components/common/Saturation.tsx b/src/components/common/Saturation.tsx
index a197d569..9557e6c5 100644
--- a/src/components/common/Saturation.tsx
+++ b/src/components/common/Saturation.tsx
@@ -33,19 +33,25 @@ const SaturationBase = ({ hsva, onChange }: Props) => {
 
   return (
     <div className="react-colorful__saturation" style={containerStyle}>
-      <Interactive
-        onMove={handleMove}
-        onKey={handleKey}
-        aria-label="Color"
-        aria-valuetext={`Saturation ${round(hsva.s)}%, Brightness ${round(hsva.v)}%`}
-      >
-        <Pointer
-          className="react-colorful__saturation-pointer"
-          top={1 - hsva.v / 100}
-          left={hsva.s / 100}
-          color={hsvaToHslString(hsva)}
-        />
-      </Interactive>
+      <div role="grid" aria-rowcount={100} aria-label="Saturation and Brightness">
+        <div role="row" aria-rowindex={round(hsva.v)} aria-label={`Brightness ${round(hsva.v)}%`}>
+          <Interactive
+            onMove={handleMove}
+            onKey={handleKey}
+            role="gridcell"
+            aria-colcount={100}
+            aria-colindex={round(hsva.s)}
+            aria-label={`Saturation ${round(hsva.s)}%`}
+          >
+            <Pointer
+              className="react-colorful__saturation-pointer"
+              top={1 - hsva.v / 100}
+              left={hsva.s / 100}
+              color={hsvaToHslString(hsva)}
+            />
+          </Interactive>
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/tests/__snapshots__/components.test.js.snap b/tests/__snapshots__/components.test.js.snap
index 4c848835..e1cfd687 100644
--- a/tests/__snapshots__/components.test.js.snap
+++ b/tests/__snapshots__/components.test.js.snap
@@ -11,20 +11,33 @@ exports[`Accepts any valid \`div\` attributes 1`] = `
     style="background-color: rgb(255, 0, 0);"
   >
     <div
-      aria-label="Color"
-      aria-valuetext="Saturation 0%, Brightness 0%"
-      class="react-colorful__interactive"
-      role="slider"
-      tabindex="0"
+      aria-label="Saturation and Brightness"
+      aria-rowcount="100"
+      role="grid"
     >
       <div
-        class="react-colorful__pointer react-colorful__saturation-pointer"
-        style="top: 100%; left: 0%;"
+        aria-label="Brightness 0%"
+        aria-rowindex="0"
+        role="row"
       >
         <div
-          class="react-colorful__pointer-fill"
-          style="background-color: rgb(0, 0, 0);"
-        />
+          aria-colcount="100"
+          aria-colindex="0"
+          aria-label="Saturation 0%"
+          class="react-colorful__interactive"
+          role="gridcell"
+          tabindex="0"
+        >
+          <div
+            class="react-colorful__pointer react-colorful__saturation-pointer"
+            style="top: 100%; left: 0%;"
+          >
+            <div
+              class="react-colorful__pointer-fill"
+              style="background-color: rgb(0, 0, 0);"
+            />
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -72,20 +85,33 @@ exports[`Renders proper alpha color picker markup 1`] = `
     style="background-color: rgb(255, 0, 0);"
   >
     <div
-      aria-label="Color"
-      aria-valuetext="Saturation 100%, Brightness 100%"
-      class="react-colorful__interactive"
-      role="slider"
-      tabindex="0"
+      aria-label="Saturation and Brightness"
+      aria-rowcount="100"
+      role="grid"
     >
       <div
-        class="react-colorful__pointer react-colorful__saturation-pointer"
-        style="top: 0%; left: 100%;"
+        aria-label="Brightness 100%"
+        aria-rowindex="100"
+        role="row"
       >
         <div
-          class="react-colorful__pointer-fill"
-          style="background-color: rgb(255, 0, 0);"
-        />
+          aria-colcount="100"
+          aria-colindex="100"
+          aria-label="Saturation 100%"
+          class="react-colorful__interactive"
+          role="gridcell"
+          tabindex="0"
+        >
+          <div
+            class="react-colorful__pointer react-colorful__saturation-pointer"
+            style="top: 0%; left: 100%;"
+          >
+            <div
+              class="react-colorful__pointer-fill"
+              style="background-color: rgb(255, 0, 0);"
+            />
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -151,20 +177,33 @@ exports[`Renders proper color picker markup 1`] = `
     style="background-color: rgb(255, 0, 0);"
   >
     <div
-      aria-label="Color"
-      aria-valuetext="Saturation 100%, Brightness 100%"
-      class="react-colorful__interactive"
-      role="slider"
-      tabindex="0"
+      aria-label="Saturation and Brightness"
+      aria-rowcount="100"
+      role="grid"
     >
       <div
-        class="react-colorful__pointer react-colorful__saturation-pointer"
-        style="top: 0%; left: 100%;"
+        aria-label="Brightness 100%"
+        aria-rowindex="100"
+        role="row"
       >
         <div
-          class="react-colorful__pointer-fill"
-          style="background-color: rgb(255, 0, 0);"
-        />
+          aria-colcount="100"
+          aria-colindex="100"
+          aria-label="Saturation 100%"
+          class="react-colorful__interactive"
+          role="gridcell"
+          tabindex="0"
+        >
+          <div
+            class="react-colorful__pointer react-colorful__saturation-pointer"
+            style="top: 0%; left: 100%;"
+          >
+            <div
+              class="react-colorful__pointer-fill"
+              style="background-color: rgb(255, 0, 0);"
+            />
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -203,20 +242,33 @@ exports[`Works with no props 1`] = `
     style="background-color: rgb(255, 0, 0);"
   >
     <div
-      aria-label="Color"
-      aria-valuetext="Saturation 0%, Brightness 0%"
-      class="react-colorful__interactive"
-      role="slider"
-      tabindex="0"
+      aria-label="Saturation and Brightness"
+      aria-rowcount="100"
+      role="grid"
     >
       <div
-        class="react-colorful__pointer react-colorful__saturation-pointer"
-        style="top: 100%; left: 0%;"
+        aria-label="Brightness 0%"
+        aria-rowindex="0"
+        role="row"
       >
         <div
-          class="react-colorful__pointer-fill"
-          style="background-color: rgb(0, 0, 0);"
-        />
+          aria-colcount="100"
+          aria-colindex="0"
+          aria-label="Saturation 0%"
+          class="react-colorful__interactive"
+          role="gridcell"
+          tabindex="0"
+        >
+          <div
+            class="react-colorful__pointer react-colorful__saturation-pointer"
+            style="top: 100%; left: 0%;"
+          >
+            <div
+              class="react-colorful__pointer-fill"
+              style="background-color: rgb(0, 0, 0);"
+            />
+          </div>
+        </div>
       </div>
     </div>
   </div>
diff --git a/tests/components.test.js b/tests/components.test.js
index 86be3bdd..f04d5b48 100644
--- a/tests/components.test.js
+++ b/tests/components.test.js
@@ -323,13 +323,20 @@ it("Sets proper `aria-valuetext` attribute value", async () => {
   const saturation = result.container.querySelector(
     ".react-colorful__saturation .react-colorful__interactive"
   );
+  const brightness = saturation.parentElement;
 
-  expect(saturation.getAttribute("aria-valuetext")).toBe("Saturation 0%, Brightness 0%");
+  expect(saturation.getAttribute("aria-label")).toBe("Saturation 0%");
+  expect(saturation.getAttribute("aria-colindex")).toBe("0");
+  expect(brightness.getAttribute("aria-label")).toBe("Brightness 0%");
+  expect(brightness.getAttribute("aria-rowindex")).toBe("0");
 
   fireEvent(saturation, new FakeMouseEvent("mousedown", { pageX: 0, pageY: 0 }));
   fireEvent(saturation, new FakeMouseEvent("mousemove", { pageX: 500, pageY: 0 })); // '#ff0000'
 
-  expect(saturation.getAttribute("aria-valuetext")).toBe("Saturation 100%, Brightness 100%");
+  expect(saturation.getAttribute("aria-label")).toBe("Saturation 100%");
+  expect(saturation.getAttribute("aria-colindex")).toBe("100");
+  expect(brightness.getAttribute("aria-label")).toBe("Brightness 100%");
+  expect(brightness.getAttribute("aria-rowindex")).toBe("100");
 });
 
 it("Accepts any valid `div` attributes", () => {