キーボードで操作できないカスタムチェックボックス

登録フォームのデザインには、独自のチェックボックスが描かれています。ブランドの色である紫の地に白いチェックマークが入る、角の丸いボックスです。ブラウザー標準のボックスはブラウザーごとに見た目が違い、ページのほかの部分とも合わないからです。ボックスは二つあります。「お得な情報をメールで受け取る」と、必須の「利用規約に同意する」で、その下に「アカウントを作成」ボタンがあります。開発者は描かれたとおりに作ります。各ラベルの中に、display: none で隠した本物のチェックボックスと、ボックスとして描いた span を置き、隠したチェックボックスがチェックされるとその span にチェックマークを描きます。ラベルをクリックするとチェックボックスは見えなくてもチェックされるので、どちらの行をクリックしてもチェックが付きます。マウスで使う限り、フォームは正しく見え、正しく動きます。

マウスを使わずに、メールアドレスの欄からTabを押します。フォーカスは「アカウントを作成」へ直接移り、二つのボックスは飛ばされます。Spaceでチェックするものもありません。スクリーンリーダーは「利用規約に同意する」を、チェックボックスも状態もない一行の文として読みます。「アカウントを作成」を押しても何も起きません。規約のボックスは必須なので、ブラウザーはフォームの送信を止めますが、存在しないボックスにはフォーカスを移せません。Chromeはメッセージも出さず、開発者ツールのコンソールに「An invalid form control with name='terms' is not focusable.」と1行出るだけです。キーボードの利用者は、アカウントをまったく作れません。

display: none は、チェックボックスをページから完全に取り除きます。Tabの順序からも、アクセシビリティツリーからも外れ、画面に残るのはチェックボックスの絵だけです。マウスはラベルを通じてその機能に届きますが、キーボードは届かないため、達成基準2.1.1 キーボードを満たしません。また、チェックボックスに見えるものが、名前、役割、チェックの状態を持つチェックボックスとして公開されていないため、4.1.2 名前・役割・値も満たしません。その行がチェックできる選択肢であることが絵でしか示されず、コードにないため、1.3.1 情報及び関係性も満たしません。

同じデザインは、ほかの作り方でも同じように失敗します。

• チェックボックスを visibility: hidden や hidden 属性で隠す。どちらもTabの順序とアクセシビリティツリーから外れ、ラベルをクリックすればチェックは付きます。
• inputを使わず、クリックのハンドラーを付けた div をチェックボックスとして描く。キーボードからは届かず、何も読み上げられず、スクリプトで加えない限りフォームと一緒に送信もされません。
• 配送方法などのラジオボタンを、ラジオボタンを隠した選択肢のカードとして描く。Tabに加えて、グループの中で選択を移す矢印キーも使えなくなります。

規約への同意、年齢の確認、配送方法の選択など、必須の選択は登録、購入手続き、設定のページにあります。マウスでしかチェックできないと、フォームはそのボックスで終わり、画面にはその理由が何も示されません。

10グループ中2グループに影響

• 全盲 （影響あり）
• 弱視 （影響なし）
• 色覚 （影響なし）
• ろう （影響なし）
• 難聴 （影響なし）
• 発話 （影響なし）
• 手の操作 （影響あり）
• 届く範囲・力 （影響なし）
• 認知 （影響なし）
• 光過敏 （影響なし）

• 手の操作が限られる キーボードとスイッチの利用者は、どちらのボックスにも到達できません。Tabはメールアドレスの欄から「アカウントを作成」へ飛び、Spaceでチェックするものもありません。規約のボックスは必須なので、アカウントをまったく作れません。
• 視覚を使わない スクリーンリーダーはチェックボックスを見つけません。「利用規約に同意する」はボックスも状態もない一行の文として読まれ、「アカウントを作成」を押しても何も起きず、何も読み上げられません。

隠れたinputは、ほとんどのチェックの対象外です。axeは表示されているものを調べるので、display: none のチェックボックスは調べず、横のラベルはただの文で、問題はありません。失敗は欠けているものにあり、あるものを調べても何も見つかりません。EaseWebの診断は、ラベルが表示されているのに隠れているチェックボックスやラジオボタンを ew:hidden-native-input として報告します。修正を頼むと、コード生成AIはラベルや描いたボックスに tabindex="0" を付けることがあります。Tabはそこに止まるようになりますが、ラベルはSpaceでチェックされず、チェックボックスも状態も読み上げられません。display: none を visibility: hidden に変えても何も変わりません。マウスを使わずに、フォームを試してください。