diff --git a/assets/index.less b/assets/index.less
index 5fcda10..4306e65 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -55,6 +55,11 @@
     border: @handler-border-size solid #fff;
     border-radius: 50%;
     box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.06);
+    &:focus-visible,
+    &:focus-within {
+      outline: 2px solid #1677ff;
+      outline-offset: 1px;
+    }
   }
   &-handler-sm {
     width: @sm-handler-size;
diff --git a/src/ColorPicker.tsx b/src/ColorPicker.tsx
index 64d52e7..aaf26d6 100644
--- a/src/ColorPicker.tsx
+++ b/src/ColorPicker.tsx
@@ -10,6 +10,15 @@ import useColorState from './hooks/useColorState';
 import useComponent, { type Components } from './hooks/useComponent';
 import type { BaseColorPickerProps, ColorGenInput } from './interface';
 
+const defaultLocale: Required<BaseColorPickerProps>['locale'] = {
+  picker: 'Color picker',
+  pickerDescription: '2D slider',
+  hue: 'Hue',
+  alpha: 'Alpha',
+  saturation: 'Saturation',
+  brightness: 'Brightness',
+};
+
 const HUE_COLORS = [
   {
     color: 'rgb(255, 0, 0)',
@@ -67,8 +76,14 @@ const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(
       disabledAlpha = false,
       disabled = false,
       components,
+      locale,
     } = props;
 
+    const mergedLocale = useMemo(
+      () => ({ ...defaultLocale, ...locale }),
+      [locale],
+    );
+
     // ========================== Components ==========================
     const [Slider] = useComponent(components);
 
@@ -134,6 +149,7 @@ const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(
         <Picker
           onChange={handleChange}
           {...sharedSliderProps}
+          locale={mergedLocale}
           onChangeComplete={onChangeComplete}
         />
         <div className={`${prefixCls}-slider-container`}>
@@ -151,6 +167,7 @@ const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(
               value={colorValue.getHue()}
               onChange={onHueChange}
               onChangeComplete={onHueChangeComplete}
+              aria-label={mergedLocale.hue}
             />
             {!disabledAlpha && (
               <Slider
@@ -165,6 +182,7 @@ const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(
                 value={colorValue.a * 100}
                 onChange={onAlphaChange}
                 onChangeComplete={onAlphaChangeComplete}
+                aria-label={mergedLocale.alpha}
               />
             )}
           </div>
diff --git a/src/components/ColorBlock.tsx b/src/components/ColorBlock.tsx
index e78b9f3..77e0a51 100644
--- a/src/components/ColorBlock.tsx
+++ b/src/components/ColorBlock.tsx
@@ -1,34 +1,26 @@
 import { clsx } from 'clsx';
 import React from 'react';
 
-export type ColorBlockProps = {
+export type ColorBlockProps = React.HTMLAttributes<HTMLDivElement> & {
   color: string;
   prefixCls?: string;
-  className?: string;
-  style?: React.CSSProperties;
   /** Internal usage. Only used in antd ColorPicker semantic structure only */
   innerClassName?: string;
   /** Internal usage. Only used in antd ColorPicker semantic structure only */
   innerStyle?: React.CSSProperties;
-  onClick?: React.MouseEventHandler<HTMLDivElement>;
 };
 
 const ColorBlock: React.FC<ColorBlockProps> = ({
   color,
   prefixCls,
   className,
-  style,
   innerClassName,
   innerStyle,
-  onClick,
+  ...props
 }) => {
   const colorBlockCls = `${prefixCls}-color-block`;
   return (
-    <div
-      className={clsx(colorBlockCls, className)}
-      style={style}
-      onClick={onClick}
-    >
+    <div {...props} className={clsx(colorBlockCls, className)}>
       <div
         className={clsx(`${colorBlockCls}-inner`, innerClassName)}
         style={{ background: color, ...innerStyle }}
diff --git a/src/components/Handler.tsx b/src/components/Handler.tsx
index f781fcf..d9ae846 100644
--- a/src/components/Handler.tsx
+++ b/src/components/Handler.tsx
@@ -1,20 +1,108 @@
+import { omit } from '@rc-component/util';
 import { clsx } from 'clsx';
 import React from 'react';
 
 type HandlerSize = 'default' | 'small';
 
-const Handler: React.FC<{
+/** Keyboard keys (handled natively by `<input type="range">`) that mutate the value. */
+const VALUE_KEYS = [
+  'ArrowLeft',
+  'ArrowRight',
+  'ArrowUp',
+  'ArrowDown',
+  'Home',
+  'End',
+  'PageUp',
+  'PageDown',
+];
+
+const isVerticalKey = (key: string) => key === 'ArrowUp' || key === 'ArrowDown';
+
+// The range input is a keyboard / screen-reader proxy only — the visible thumb
+// is the wrapping <div>. It must stay focusable and in the a11y tree, so it is
+// hidden with `opacity` (not `display`/`visibility`). These styles are inlined
+// rather than left to the stylesheet so consumers that don't ship our CSS
+// (e.g. antd's own styling) still get a hidden input out of the box.
+const RANGE_INPUT_STYLE: React.CSSProperties = {
+  position: 'absolute',
+  inset: 0,
+  width: '100%',
+  height: '100%',
+  margin: 0,
+  padding: 0,
+  opacity: 0,
+  pointerEvents: 'none',
+};
+
+interface HandlerAxis
+  extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    'size' | 'value' | 'onChange'
+  > {
+  value: number;
+  onChange: (value: number) => void;
+  onChangeComplete: (value: number) => void;
+}
+
+export interface HandlerProps {
   size?: HandlerSize;
   color?: string;
   prefixCls?: string;
-}> = ({ size = 'default', color, prefixCls }) => {
+  disabled?: boolean;
+  x: HandlerAxis;
+  y?: HandlerAxis;
+}
+
+const Handler: React.FC<HandlerProps> = ({
+  size = 'default',
+  color,
+  prefixCls,
+  disabled,
+  x,
+  y,
+}) => {
+  // The browser ignores Up/Down on a horizontal range, so the vertical axis is
+  // handled here: clamp to its own [min, max] and emit through its callbacks.
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!y || !isVerticalKey(event.key)) {
+      return;
+    }
+    event.preventDefault();
+    const step = Number(y.step ?? 1) || 1;
+    const min = Number(y.min ?? 0);
+    const max = Number(y.max ?? 100);
+    const delta = event.key === 'ArrowUp' ? step : -step;
+    y.onChange(Math.min(max, Math.max(min, y.value + delta)));
+  };
+
   return (
     <div
       className={clsx(`${prefixCls}-handler`, {
         [`${prefixCls}-handler-sm`]: size === 'small',
       })}
-      style={{ backgroundColor: color }}
-    />
+      style={{ position: 'relative', backgroundColor: color }}
+    >
+      <input
+        step={1}
+        {...omit(x, ['onChangeComplete'])}
+        type="range"
+        className={`${prefixCls}-handler-range`}
+        style={RANGE_INPUT_STYLE}
+        disabled={disabled}
+        onChange={event => x.onChange(Number(event.target.value))}
+        onKeyDown={y ? handleKeyDown : undefined}
+        onKeyUp={event => {
+          if (!VALUE_KEYS.includes(event.key)) {
+            return;
+          }
+          if (y && isVerticalKey(event.key)) {
+            y.onChangeComplete(y.value);
+          } else {
+            x.onChangeComplete(Number(event.currentTarget.value));
+          }
+        }}
+      />
+    </div>
   );
 };
 
diff --git a/src/components/Picker.tsx b/src/components/Picker.tsx
index 93a85eb..8b0155d 100644
--- a/src/components/Picker.tsx
+++ b/src/components/Picker.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react';
 import React, { useRef } from 'react';
 import useColorDrag from '../hooks/useColorDrag';
 import type { BaseColorPickerProps, TransformOffset } from '../interface';
-import { calcOffset, calculateColor } from '../util';
+import { calcOffset, calculateColor, generateColor } from '../util';
 
 import { useEvent } from '@rc-component/util';
 import Handler from './Handler';
@@ -17,6 +17,7 @@ const Picker: FC<PickerProps> = ({
   prefixCls,
   onChangeComplete,
   disabled,
+  locale,
 }) => {
   const pickerRef = useRef();
   const transformRef = useRef();
@@ -43,6 +44,16 @@ const Picker: FC<PickerProps> = ({
     disabledDrag: disabled,
   });
 
+  // ===================== Keyboard (2-D handler) =====================
+  const hsb = color.toHsb();
+
+  // Build a new color from the current one with a single HSB channel changed.
+  const changeColor = (channel: 's' | 'b', percent: number) => {
+    const next = generateColor({ ...hsb, [channel]: percent / 100 });
+    colorRef.current = next;
+    onChange(next);
+  };
+
   return (
     <div
       ref={pickerRef}
@@ -52,7 +63,30 @@ const Picker: FC<PickerProps> = ({
     >
       <Palette prefixCls={prefixCls}>
         <Transform x={offset.x} y={offset.y} ref={transformRef}>
-          <Handler color={color.toRgbString()} prefixCls={prefixCls} />
+          <Handler
+            color={color.toRgbString()}
+            prefixCls={prefixCls}
+            disabled={disabled}
+            x={{
+              'aria-label': locale.picker,
+              'aria-roledescription': locale.pickerDescription,
+              'aria-valuetext': `${locale.saturation} ${Math.round(
+                hsb.s * 100,
+              )}%, ${locale.brightness} ${Math.round(hsb.b * 100)}%`,
+              min: 0,
+              max: 100,
+              value: hsb.s * 100,
+              onChange: percent => changeColor('s', percent),
+              onChangeComplete: () => onChangeComplete?.(colorRef.current),
+            }}
+            y={{
+              min: 0,
+              max: 100,
+              value: hsb.b * 100,
+              onChange: percent => changeColor('b', percent),
+              onChangeComplete: () => onChangeComplete?.(colorRef.current),
+            }}
+          />
         </Transform>
         <div
           className={`${prefixCls}-saturation`}
diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx
index 3181c7a..dc98522 100644
--- a/src/components/Slider.tsx
+++ b/src/components/Slider.tsx
@@ -22,6 +22,7 @@ export interface BaseSliderProps {
   onChangeComplete: (value: number) => void;
   type: HsbaColorType;
   color: Color;
+  'aria-label'?: string;
 }
 
 const Slider: React.FC<BaseSliderProps> = props => {
@@ -33,6 +34,10 @@ const Slider: React.FC<BaseSliderProps> = props => {
     onChangeComplete,
     color,
     type,
+    min,
+    max,
+    value,
+    'aria-label': ariaLabel,
   } = props;
 
   const sliderRef = useRef<HTMLDivElement>(null);
@@ -103,6 +108,15 @@ const Slider: React.FC<BaseSliderProps> = props => {
             size="small"
             color={handleColor.toHexString()}
             prefixCls={prefixCls}
+            disabled={disabled}
+            x={{
+              'aria-label': ariaLabel,
+              min,
+              max,
+              value,
+              onChange,
+              onChangeComplete,
+            }}
           />
         </Transform>
         <Gradient colors={gradientList} type={type} prefixCls={prefixCls} />
diff --git a/src/interface.ts b/src/interface.ts
index 4fd9077..ecc2984 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -40,6 +40,14 @@ export interface BaseColorPickerProps {
   color?: Color;
   prefixCls?: string;
   disabled?: boolean;
+  locale?: {
+    picker?: string;
+    pickerDescription?: string;
+    hue?: string;
+    alpha?: string;
+    saturation?: string;
+    brightness?: string;
+  };
   onChange?: (
     color: Color,
     info?: { type?: HsbaColorType; value?: number },
diff --git a/tests/__snapshots__/index.test.tsx.snap b/tests/__snapshots__/index.test.tsx.snap
index 1b28a51..d7753f9 100644
--- a/tests/__snapshots__/index.test.tsx.snap
+++ b/tests/__snapshots__/index.test.tsx.snap
@@ -17,8 +17,21 @@ exports[`ColorPicker > Should component onChange work on no control mode 1`] = `
         >
           <div
             class="rc-color-picker-handler"
-            style="background-color: rgb(22, 119, 255);"
-          />
+            style="position: relative; background-color: rgb(22, 119, 255);"
+          >
+            <input
+              aria-label="Color picker"
+              aria-roledescription="2D slider"
+              aria-valuetext="Saturation 91%, Brightness 100%"
+              class="rc-color-picker-handler-range"
+              max="100"
+              min="0"
+              step="1"
+              style="position: absolute; inset: 0; width: 100%; height: 100%; margin: 0px; padding: 0px; opacity: 0; pointer-events: none;"
+              type="range"
+              value="91.37254901960785"
+            />
+          </div>
         </div>
         <div
           class="rc-color-picker-saturation"
@@ -44,8 +57,19 @@ exports[`ColorPicker > Should component onChange work on no control mode 1`] = `
             >
               <div
                 class="rc-color-picker-handler rc-color-picker-handler-sm"
-                style="background-color: rgb(0, 106, 255);"
-              />
+                style="position: relative; background-color: rgb(0, 106, 255);"
+              >
+                <input
+                  aria-label="Hue"
+                  class="rc-color-picker-handler-range"
+                  max="359"
+                  min="0"
+                  step="1"
+                  style="position: absolute; inset: 0; width: 100%; height: 100%; margin: 0px; padding: 0px; opacity: 0; pointer-events: none;"
+                  type="range"
+                  value="215"
+                />
+              </div>
             </div>
             <div
               class="rc-color-picker-gradient"
@@ -65,8 +89,19 @@ exports[`ColorPicker > Should component onChange work on no control mode 1`] = `
             >
               <div
                 class="rc-color-picker-handler rc-color-picker-handler-sm"
-                style="background-color: rgb(22, 119, 255);"
-              />
+                style="position: relative; background-color: rgb(22, 119, 255);"
+              >
+                <input
+                  aria-label="Alpha"
+                  class="rc-color-picker-handler-range"
+                  max="100"
+                  min="0"
+                  step="1"
+                  style="position: absolute; inset: 0; width: 100%; height: 100%; margin: 0px; padding: 0px; opacity: 0; pointer-events: none;"
+                  type="range"
+                  value="100"
+                />
+              </div>
             </div>
             <div
               class="rc-color-picker-gradient"
@@ -105,8 +140,21 @@ exports[`ColorPicker > Should component render correct 1`] = `
         >
           <div
             class="rc-color-picker-handler"
-            style="background-color: rgb(22, 119, 255);"
-          />
+            style="position: relative; background-color: rgb(22, 119, 255);"
+          >
+            <input
+              aria-label="Color picker"
+              aria-roledescription="2D slider"
+              aria-valuetext="Saturation 91%, Brightness 100%"
+              class="rc-color-picker-handler-range"
+              max="100"
+              min="0"
+              step="1"
+              style="position: absolute; inset: 0; width: 100%; height: 100%; margin: 0px; padding: 0px; opacity: 0; pointer-events: none;"
+              type="range"
+              value="91.37254901960785"
+            />
+          </div>
         </div>
         <div
           class="rc-color-picker-saturation"
@@ -132,8 +180,19 @@ exports[`ColorPicker > Should component render correct 1`] = `
             >
               <div
                 class="rc-color-picker-handler rc-color-picker-handler-sm"
-                style="background-color: rgb(0, 106, 255);"
-              />
+                style="position: relative; background-color: rgb(0, 106, 255);"
+              >
+                <input
+                  aria-label="Hue"
+                  class="rc-color-picker-handler-range"
+                  max="359"
+                  min="0"
+                  step="1"
+                  style="position: absolute; inset: 0; width: 100%; height: 100%; margin: 0px; padding: 0px; opacity: 0; pointer-events: none;"
+                  type="range"
+                  value="215"
+                />
+              </div>
             </div>
             <div
               class="rc-color-picker-gradient"
@@ -153,8 +212,19 @@ exports[`ColorPicker > Should component render correct 1`] = `
             >
               <div
                 class="rc-color-picker-handler rc-color-picker-handler-sm"
-                style="background-color: rgb(22, 119, 255);"
-              />
+                style="position: relative; background-color: rgb(22, 119, 255);"
+              >
+                <input
+                  aria-label="Alpha"
+                  class="rc-color-picker-handler-range"
+                  max="100"
+                  min="0"
+                  step="1"
+                  style="position: absolute; inset: 0; width: 100%; height: 100%; margin: 0px; padding: 0px; opacity: 0; pointer-events: none;"
+                  type="range"
+                  value="100"
+                />
+              </div>
             </div>
             <div
               class="rc-color-picker-gradient"
@@ -196,8 +266,21 @@ exports[`ColorPicker > Should custom panel work 1`] = `
           >
             <div
               class="rc-color-picker-handler"
-              style="background-color: rgb(22, 119, 255);"
-            />
+              style="position: relative; background-color: rgb(22, 119, 255);"
+            >
+              <input
+                aria-label="Color picker"
+                aria-roledescription="2D slider"
+                aria-valuetext="Saturation 91%, Brightness 100%"
+                class="rc-color-picker-handler-range"
+                max="100"
+                min="0"
+                step="1"
+                style="position: absolute; inset: 0; width: 100%; height: 100%; margin: 0px; padding: 0px; opacity: 0; pointer-events: none;"
+                type="range"
+                value="91.37254901960785"
+              />
+            </div>
           </div>
           <div
             class="rc-color-picker-saturation"
@@ -223,8 +306,19 @@ exports[`ColorPicker > Should custom panel work 1`] = `
               >
                 <div
                   class="rc-color-picker-handler rc-color-picker-handler-sm"
-                  style="background-color: rgb(0, 106, 255);"
-                />
+                  style="position: relative; background-color: rgb(0, 106, 255);"
+                >
+                  <input
+                    aria-label="Hue"
+                    class="rc-color-picker-handler-range"
+                    max="359"
+                    min="0"
+                    step="1"
+                    style="position: absolute; inset: 0; width: 100%; height: 100%; margin: 0px; padding: 0px; opacity: 0; pointer-events: none;"
+                    type="range"
+                    value="215"
+                  />
+                </div>
               </div>
               <div
                 class="rc-color-picker-gradient"
@@ -244,8 +338,19 @@ exports[`ColorPicker > Should custom panel work 1`] = `
               >
                 <div
                   class="rc-color-picker-handler rc-color-picker-handler-sm"
-                  style="background-color: rgb(22, 119, 255);"
-                />
+                  style="position: relative; background-color: rgb(22, 119, 255);"
+                >
+                  <input
+                    aria-label="Alpha"
+                    class="rc-color-picker-handler-range"
+                    max="100"
+                    min="0"
+                    step="1"
+                    style="position: absolute; inset: 0; width: 100%; height: 100%; margin: 0px; padding: 0px; opacity: 0; pointer-events: none;"
+                    type="range"
+                    value="100"
+                  />
+                </div>
               </div>
               <div
                 class="rc-color-picker-gradient"
@@ -285,8 +390,21 @@ exports[`ColorPicker > Should disabled alpha work 1`] = `
         >
           <div
             class="rc-color-picker-handler"
-            style="background-color: rgb(22, 119, 255);"
-          />
+            style="position: relative; background-color: rgb(22, 119, 255);"
+          >
+            <input
+              aria-label="Color picker"
+              aria-roledescription="2D slider"
+              aria-valuetext="Saturation 91%, Brightness 100%"
+              class="rc-color-picker-handler-range"
+              max="100"
+              min="0"
+              step="1"
+              style="position: absolute; inset: 0; width: 100%; height: 100%; margin: 0px; padding: 0px; opacity: 0; pointer-events: none;"
+              type="range"
+              value="91.37254901960785"
+            />
+          </div>
         </div>
         <div
           class="rc-color-picker-saturation"
@@ -312,8 +430,19 @@ exports[`ColorPicker > Should disabled alpha work 1`] = `
             >
               <div
                 class="rc-color-picker-handler rc-color-picker-handler-sm"
-                style="background-color: rgb(0, 106, 255);"
-              />
+                style="position: relative; background-color: rgb(0, 106, 255);"
+              >
+                <input
+                  aria-label="Hue"
+                  class="rc-color-picker-handler-range"
+                  max="359"
+                  min="0"
+                  step="1"
+                  style="position: absolute; inset: 0; width: 100%; height: 100%; margin: 0px; padding: 0px; opacity: 0; pointer-events: none;"
+                  type="range"
+                  value="215"
+                />
+              </div>
             </div>
             <div
               class="rc-color-picker-gradient"
@@ -352,8 +481,21 @@ exports[`ColorPicker > Should prefixCls work 1`] = `
         >
           <div
             class="test-prefixCls-handler"
-            style="background-color: rgb(22, 119, 255);"
-          />
+            style="position: relative; background-color: rgb(22, 119, 255);"
+          >
+            <input
+              aria-label="Color picker"
+              aria-roledescription="2D slider"
+              aria-valuetext="Saturation 91%, Brightness 100%"
+              class="test-prefixCls-handler-range"
+              max="100"
+              min="0"
+              step="1"
+              style="position: absolute; inset: 0; width: 100%; height: 100%; margin: 0px; padding: 0px; opacity: 0; pointer-events: none;"
+              type="range"
+              value="91.37254901960785"
+            />
+          </div>
         </div>
         <div
           class="test-prefixCls-saturation"
@@ -379,8 +521,19 @@ exports[`ColorPicker > Should prefixCls work 1`] = `
             >
               <div
                 class="test-prefixCls-handler test-prefixCls-handler-sm"
-                style="background-color: rgb(0, 106, 255);"
-              />
+                style="position: relative; background-color: rgb(0, 106, 255);"
+              >
+                <input
+                  aria-label="Hue"
+                  class="test-prefixCls-handler-range"
+                  max="359"
+                  min="0"
+                  step="1"
+                  style="position: absolute; inset: 0; width: 100%; height: 100%; margin: 0px; padding: 0px; opacity: 0; pointer-events: none;"
+                  type="range"
+                  value="215"
+                />
+              </div>
             </div>
             <div
               class="test-prefixCls-gradient"
@@ -400,8 +553,19 @@ exports[`ColorPicker > Should prefixCls work 1`] = `
             >
               <div
                 class="test-prefixCls-handler test-prefixCls-handler-sm"
-                style="background-color: rgb(22, 119, 255);"
-              />
+                style="position: relative; background-color: rgb(22, 119, 255);"
+              >
+                <input
+                  aria-label="Alpha"
+                  class="test-prefixCls-handler-range"
+                  max="100"
+                  min="0"
+                  step="1"
+                  style="position: absolute; inset: 0; width: 100%; height: 100%; margin: 0px; padding: 0px; opacity: 0; pointer-events: none;"
+                  type="range"
+                  value="100"
+                />
+              </div>
             </div>
             <div
               class="test-prefixCls-gradient"
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index 5fae531..090e88c 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -1,6 +1,12 @@
 /* eslint-disable @typescript-eslint/no-loop-func */
 import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook';
-import { act, createEvent, fireEvent, render } from '@testing-library/react';
+import {
+  act,
+  createEvent,
+  fireEvent,
+  render,
+  screen,
+} from '@testing-library/react';
 import React, { useState } from 'react';
 import { expect } from 'vitest';
 import ColorPicker, { Color } from '../src';
@@ -333,40 +339,45 @@ describe('ColorPicker', () => {
     const App = () => <ColorPicker value={'hsb(215, 91%, 100%)'} />;
     const { container } = render(<App />);
     expect(
-      container.querySelector('.rc-color-picker-handler').getAttribute('style'),
-    ).toEqual('background-color: rgb(23, 120, 255);');
+      (container.querySelector('.rc-color-picker-handler') as HTMLElement).style
+        .backgroundColor,
+    ).toEqual('rgb(23, 120, 255)');
   });
 
   it('Should rgb string work', () => {
     const App = () => <ColorPicker value={'rgb(23, 120, 255)'} />;
     const { container } = render(<App />);
     expect(
-      container.querySelector('.rc-color-picker-handler').getAttribute('style'),
-    ).toEqual('background-color: rgb(23, 120, 255);');
+      (container.querySelector('.rc-color-picker-handler') as HTMLElement).style
+        .backgroundColor,
+    ).toEqual('rgb(23, 120, 255)');
   });
 
   it('Should hex string work', () => {
     const App = () => <ColorPicker value="#1778ff" />;
     const { container } = render(<App />);
     expect(
-      container.querySelector('.rc-color-picker-handler').getAttribute('style'),
-    ).toEqual('background-color: rgb(23, 120, 255);');
+      (container.querySelector('.rc-color-picker-handler') as HTMLElement).style
+        .backgroundColor,
+    ).toEqual('rgb(23, 120, 255)');
   });
 
   it('Should hsb obj work', () => {
     const App = () => <ColorPicker value={{ h: 215, s: 0.91, b: 1 }} />;
     const { container } = render(<App />);
     expect(
-      container.querySelector('.rc-color-picker-handler').getAttribute('style'),
-    ).toEqual('background-color: rgb(23, 120, 255);');
+      (container.querySelector('.rc-color-picker-handler') as HTMLElement).style
+        .backgroundColor,
+    ).toEqual('rgb(23, 120, 255)');
   });
 
   it('Should rgb obj work', () => {
     const App = () => <ColorPicker value={{ r: 23, g: 120, b: 255 }} />;
     const { container } = render(<App />);
     expect(
-      container.querySelector('.rc-color-picker-handler').getAttribute('style'),
-    ).toEqual('background-color: rgb(23, 120, 255);');
+      (container.querySelector('.rc-color-picker-handler') as HTMLElement).style
+        .backgroundColor,
+    ).toEqual('rgb(23, 120, 255)');
   });
 
   it('Should disabled work', () => {
@@ -497,4 +508,137 @@ describe('ColorPicker', () => {
 
     spy.mockRestore();
   });
+
+  describe('Accessibility tests', () => {
+    const Controlled = (props: Record<string, unknown>) => {
+      const [value, setValue] = useState(defaultColor);
+      return (
+        <>
+          <ColorPicker value={value} onChange={setValue} {...props} />
+          <div className="pick-color">{value.toHsbString()}</div>
+        </>
+      );
+    };
+
+    it('Should expose default aria-labels on the handles', () => {
+      render(<ColorPicker defaultValue={defaultColor} />);
+
+      expect(screen.getByLabelText('Color picker')).toBeTruthy();
+      expect(screen.getByLabelText('Hue')).toBeTruthy();
+      expect(screen.getByLabelText('Alpha')).toBeTruthy();
+    });
+
+    it('Should describe saturation & brightness via aria-valuetext by default', () => {
+      render(<ColorPicker defaultValue={defaultColor} />);
+
+      expect(screen.getByLabelText('Color picker')).toHaveAttribute(
+        'aria-valuetext',
+        'Saturation 91%, Brightness 100%',
+      );
+    });
+
+    it('Should override the aria-labels through the locale prop', () => {
+      render(
+        <ColorPicker
+          defaultValue={defaultColor}
+          locale={{
+            picker: 'Sélecteur',
+            hue: 'Teinte',
+            alpha: 'Transparence',
+            saturation: 'Sat',
+            brightness: 'Lum',
+          }}
+        />,
+      );
+
+      expect(screen.getByLabelText('Sélecteur')).toBeTruthy();
+      expect(screen.getByLabelText('Teinte')).toBeTruthy();
+      expect(screen.getByLabelText('Transparence')).toBeTruthy();
+      expect(screen.getByLabelText('Sélecteur')).toHaveAttribute(
+        'aria-valuetext',
+        'Sat 91%, Lum 100%',
+      );
+    });
+
+    it('Should change brightness with the Down arrow on the picker handle', () => {
+      const onChangeComplete = vi.fn();
+      render(<Controlled onChangeComplete={onChangeComplete} />);
+
+      const picker = screen.getByLabelText('Color picker');
+      fireEvent.keyDown(picker, { key: 'ArrowDown' });
+      fireEvent.keyUp(picker, { key: 'ArrowDown' });
+
+      // brightness starts at 100% and steps down to 99%
+      expect(document.querySelector('.pick-color').innerHTML).toBe(
+        'hsb(215, 91%, 99%)',
+      );
+      expect(onChangeComplete).toHaveBeenCalled();
+    });
+
+    it('Should clamp brightness at 100% when pressing the Up arrow', () => {
+      render(<Controlled />);
+
+      const picker = screen.getByLabelText('Color picker');
+      fireEvent.keyDown(picker, { key: 'ArrowUp' });
+
+      expect(document.querySelector('.pick-color').innerHTML).toBe(
+        'hsb(215, 91%, 100%)',
+      );
+    });
+
+    it('Should increase saturation on the picker (Arrow Right)', () => {
+      const onChangeComplete = vi.fn();
+      render(<Controlled onChangeComplete={onChangeComplete} />);
+
+      const picker = screen.getByLabelText('Color picker');
+      fireEvent.change(picker, { target: { value: '92' } });
+      fireEvent.keyUp(picker, { key: 'ArrowRight' });
+
+      // saturation starts at 91% and steps up to 92%
+      expect(document.querySelector('.pick-color').innerHTML).toBe(
+        'hsb(215, 92%, 100%)',
+      );
+      expect(onChangeComplete).toHaveBeenCalled();
+    });
+
+    it('Should decrease saturation on the picker (Arrow Left)', () => {
+      const onChangeComplete = vi.fn();
+      render(<Controlled onChangeComplete={onChangeComplete} />);
+
+      const picker = screen.getByLabelText('Color picker');
+      fireEvent.change(picker, { target: { value: '90' } });
+      fireEvent.keyUp(picker, { key: 'ArrowLeft' });
+
+      // saturation starts at 91% and steps down to 90%
+      expect(document.querySelector('.pick-color').innerHTML).toBe(
+        'hsb(215, 90%, 100%)',
+      );
+      expect(onChangeComplete).toHaveBeenCalled();
+    });
+
+    it('Should change hue when the hue slider value changes via keyboard', () => {
+      const onChangeComplete = vi.fn();
+      render(<Controlled onChangeComplete={onChangeComplete} />);
+
+      const hue = screen.getByLabelText('Hue');
+      fireEvent.change(hue, { target: { value: '100' } });
+      fireEvent.keyUp(hue, { key: 'ArrowRight' });
+
+      expect(document.querySelector('.pick-color').innerHTML).toBe(
+        'hsb(100, 91%, 100%)',
+      );
+      expect(onChangeComplete).toHaveBeenCalled();
+    });
+
+    it('Should change alpha when the alpha slider value changes via keyboard', () => {
+      render(<Controlled />);
+
+      const alpha = screen.getByLabelText('Alpha');
+      fireEvent.change(alpha, { target: { value: '50' } });
+
+      expect(document.querySelector('.pick-color').innerHTML).toBe(
+        'hsba(215, 91%, 100%, 0.50)',
+      );
+    });
+  });
 });