ボタンに名前がなく、数を入力できない数量ステッパー

$18のホーローマグを売るネットショップのページです。「カートに入れる」の上に数量のステッパーがあり、丸い−のボタン、数字の1、丸い＋のボタンが並んでいます。マウスなら問題なく使え、＋を3回押すと数字は4になります。スクリーンリーダーを起動してTabで移動すると、「ボタン」、もう一度「ボタン」と聞こえます。2つを見分ける手がかりは−と＋のアイコンだけで、どちらにも言葉はありません。間の数字はTabで止まらないので、押した後に今いくつなのかを伝えるものもありません。確かめるには、スクリーンリーダーの利用者はボタンを離れて、その行を読みに行く必要があります。数字を直接入力することもできません。カフェ用に10個買うなら、＋を9回押すことになります。

同じショップの別の作りでは、数量は「数量」とラベルの付いたふつうの数値の入力欄で、端にブラウザーの小さな上下の矢印があります。文字や「-3」が入らないように、開発者がTab以外のすべてのキーを取り消しています。Tabで届き、スクリーンリーダーは「数量、スピンボタン、1」と読みますが、4と入力しても何も起きません。本来ブラウザーが数を増減させる上下の矢印キーも効きません。数を変えられるのは、マウスで小さな矢印を押したときだけです。

達成基準4.1.2は、すべての操作部品に、支援技術が読める名前があることを求めています。ボタンの名前は中身から決まりますが、ここでの中身はtitleも文字もないSVGだけです。そのため名前は空になり、スクリーンリーダーには役割しか読むものがありません。これは失敗例F68、つまりコード上で名前のない操作部品に当たります。−と＋は図形として描かれているだけで文字ではないため、ブラウザーには読み取れません。数字は役割のない文字だけの span なので、ページを1行ずつ読んだときにしか読まれず、ボタンと一緒には読まれません。コード上でボタンと結び付けるものもありません。

達成基準2.1.1は、マウスでできることはすべてキーボードでもできることを求めています。2つ目の作りは、本来なら欄だけでこの基準を満たせます。ブラウザーの数値の入力欄には、文字の入力と上下の矢印キーでの増減が初めから備わっているからです。しかしブラウザーがキー本来の動作をするのは、ページの keydown の処理が終わった後です。その処理で preventDefault() を呼ぶと、動作は取り消されます。そのため矢印キーも含め、どのキーを押しても何も起きません。欄の端のスピンの矢印はブラウザーがポインター用に描くもので、フォーカスを受けないため、数を設定する方法はマウスしか残りません。キーを止めるのは文法上正しいスクリプト1行にすぎず、HTMLの側では防げません。

数量のステッパーは、カートへ進む途中にあります。読み上げられない、または数を設定できないステッパーがあると、購入はそこで止まるか、違う数のまま注文されてしまいます。カートの各行にも同じステッパーが置かれるため、行ごとに名前のないボタンが2つずつ増えます。

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

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

• 視覚を使わない スクリーンリーダーの利用者には「ボタン」が2回聞こえるだけで、どちらでマグが増え、どちらで減るのかが分かりません。押した後も新しい数は伝わらず、確かめるにはボタンを離れて、その行を読みに行く必要があります。欄のキーが止められていると、スピンの矢印はマウスにしか反応しないため、数量はまったく変えられません。
• 手の操作が限られる キーボードやスイッチの利用者は数量を入力できず、10個なら＋を9回押すことになります。欄のキーが取り消されていると、数量はまったく変えられません。音声操作の利用者には、どちらのボタンにも口にできる名前がありません。
• 届く範囲・力が限られる 手にふるえがある人や握力の弱い人は、1個ごとに1回押す操作で疲れます。キーが止められていると、残る方法は欄の端の小さなスピンの矢印だけで、狙いを外しやすくなります。

axeは1つ目の作りのボタンを名前がないもの（button-name）として報告しますが、間の数字を入力できないことは分かりません。数字の入った span は正しいマークアップだからです。2つ目の作りには、自動チェックは何の問題も見つけません。マークアップはラベル付きの数値の入力欄で、正しく書かれており、キーが止められていることはキーを押して初めて分かります。EaseWebの診断は、横にステッパーのボタンがない数値の入力欄ごとに、矢印キーを押して数字を入力し、どれでも値が変わらない欄を報告します。自動チェックの指摘を直すようにコード生成AIに頼むと、各ボタンを働きではなく絵柄で名付けたり（「＋」「マイナス」）、名前を付けただけで終わったりすることがあり、数字は入力できないまま残ります。数値の入力欄に文字が入らないようにしたいと頼むと、keydown を取り消す方法を提案することがあり、矢印キーと数字まで一緒に止めてしまいます。