ドラッグでしか色を選べず、値を入力できないカラーピッカー

つまみはフォーカスを受けないため、キーボードでは届きません。役割も名前も値もないため、支援技術はピッカーがあることを知りません。操作の入口はつまみの押下だけなので、どの色にもドラッグが必要で、コードは誰も入力できない場所に書かれているだけです。

ピッカーはドラッグで選びたい人のためにそのまま残し、ラベル付きのテキスト入力欄を加えます。色はコードで、キー入力でも貼り付けでも音声でも入れられます。HTML標準の入力欄なので、Tabの順序に入り、役割、名前（「ブランドカラー」のグループ内の「カラーコード」）、値を持ちます。ドラッグした結果もこの欄に書き込まれるため、欄には常につまみで設定した色が表示されます。aria-hidden でドラッグ専用の面とバーをアクセシビリティツリーから外すので、スクリーンリーダーには役割も名前もない2つのつまみではなく、入力欄が見つかります。既存のピッカーへの変更は最小で、誰でも正確な値を指定できます。ただし、これだけでは不十分です。マウスの利用者はつまみを少し動かすだけで同じ青を少し明るくできますが、キーボードや音声操作の利用者は新しいコードを自分で考えなければなりません。ブランドガイドのように、使うコードが先に決まっている設定には向きますが、目で見て色を選ぶ設定には向きません。

3つとも適合します。カラーコードの入力欄は変更が最小で、誰でも正確な値を指定できますが、ドラッグできない人はコードでしか色を選べません。ブラウザー標準のカラー入力は必要なコードが最も少ないものの、開くピッカーがブラウザーごとに違い、すべてで値を入力できるわけではなく、ページの中に置くことも、ポップアップの見た目を変えることもできません。キーボードやスクリーンリーダーの利用者も目で見て、またはコードで色を選べ、どのブラウザーでも同じように動き、デザインどおりのピッカーも保てるのは、スライダーとカラーコードの入力欄を組み合わせる方法だけです。ピッカーを自分で作るなら、この方法を使ってください。

スクリーンリーダーが読み上げる内容は、聞く人に意味が伝わるものにします。16進数のコードはほとんどの人には意味が分からず、彩度の「75%」も大差ありません。色相の aria-valuetext には色の名前を入れ、コードの横に色全体の名前（「濃い青」など）を書いて、誰でも読めるようにすることも検討します。プレビューは予約ページの絵で、操作部品ではないため、支援技術からは隠し、フォームのボタンとは離して描きます。Chromeは、標準のカラー入力の値を、赤・緑・青の割合として英語のままスクリーンリーダーに渡します（「21% red 42% green 85% blue」）。

ページに組み込んだ後の動作は、次の点で決まります。

• Tabの停止位置を1つにするか2つにするか：面の中の2つの入力はTabの停止位置が2つになるが、作りが単純で、ブラウザー標準のキー操作が使える。ライブラリーによっては面の停止位置を1つにし、左右の矢印キーで一方の見えない入力を、上下の矢印キーでもう一方を動かす。React Ariaのカラーエリアはこの作りである。
• フォーカスとコントラスト：見えない入力はフォーカスの枠を描かないため、.sv-area:has(:focus-visible) .handle のようにしてつまみに枠を描く。白い輪に濃い縁を付けると、面のどの色の上でもつまみが見える。コントラストが足りない入力欄・アイコン・フォーカス枠を参照。
• カラーコードの入力欄：# があってもなくても受け付ける。正しくないコードは黙って元に戻さず、入力されたまま残して、欄の横にメッセージを出す。直し方がわからないフォームエラーを参照。
• タッチ：面とバーに touch-action: none を付けるとドラッグでページがスクロールしなくなるが、そこに指を置いてページをスクロールすることもできなくなる。周りに常に余白が残る大きさにとどめる。
• 入力欄から開くピッカー：カラーコードの入力欄にフォーカスが移ったときに、その下に面とバーを開いてもかまわない。ただし、フォーカスは入力欄に残り、入力を続けられ、Escapeで閉じ、次の入力欄を覆わないようにする。フォーカスを動かさずに現れる内容はコンテンツの変化で、コンテキストの変化ではないが、フォーカスが離れるか利用者が閉じるまでは開いたままにし、フォーカスを動かさずに閉じられる必要がある。操作するだけでページが変わるドロップダウンと入力欄と近づくと消え、閉じられないツールチップを参照。
• 強制配色：コントラスト テーマは、面の色相とプレビューを塗る背景色を置き換え、面の濃淡とバーを描くグラデーションも消す。面、バー、プレビューには forced-color-adjust: none を指定し、つまみにはシステムカラーの枠線を付ける。

カラーピッカーのライブラリーはさまざまです。面に role="slider" を付けながら aria-valuenow がないもの（axeが報告します）、キーは効いても面の押下を受け付けないもの、入力欄がまったくないものもあります。ライブラリーの説明ではなく、フォーカスを受ける各部分が支援技術に何を伝えているかを確認してください。