diff --git a/src/components/common/Interactive.tsx b/src/components/common/Interactive.tsx
index 5f041667..922d07ae 100644
--- a/src/components/common/Interactive.tsx
+++ b/src/components/common/Interactive.tsx
@@ -36,7 +36,7 @@ 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;
@@ -118,7 +118,6 @@ const InteractiveBase = ({ onMove, onKey, ...rest }: Props) => {
 
   return (
     <div
-      {...rest}
       onTouchStart={handleMoveStart}
       onMouseDown={handleMoveStart}
       className="react-colorful__interactive"
@@ -126,6 +125,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>
   );
 };