ファイルを選ぶボタンがないドラッグ＆ドロップのアップロード欄

経費申請のフォームで、金額の次に領収書を添付します。領収書欄は点線の枠で、アップロードの矢印と「ここに領収書をドラッグ＆ドロップ」という文言があります。マウスでフォルダーからPDFをドラッグし、枠の上で離すと、枠の下にファイル名が出ます。「金額」の欄からTabキーを押すと、フォーカスは「申請する」へ直接移ります。枠の中にはフォーカスできるものも、押せるボタンもありません。スクリーンリーダーは「ここに領収書をドラッグ＆ドロップ」を1行の文として読みます。スマートフォンでは領収書は別のアプリにあるため、ドラッグするには、ファイルを持ったままブラウザーへ切り替える必要があり、そもそもできない端末もあります。

同じ枠に「またはクリックしてファイルを選択」と書かれ、枠のどこをクリックしてもファイル選択が開くこともよくあります。マウスの利用者は問題に気付きません。それでもTabキーは枠を飛ばし、Enterキーを押しても何も起きず、スクリーンリーダーは文言を文として読むだけで、押せるものだと伝えるロールはありません。

枠は、スクリプトでイベントを受け取る div です。1つ目の形では、受け取るのはドロップだけです。ファイルを追加するには、ファイルを押し、運び、離すというドラッグの動作が必要です。WCAG 2.5.7は、ドラッグでできる操作を、1回のクリックやタップだけでもできるようにすることを求めています。その方法がない機能は失敗例F108に当たり、この枠にはその方法がありません。キーボードではフォルダーからページへファイルを運べず、枠の中にフォーカスできるものもないため、キーボードからは領収書を一切追加できず、2.1.1も満たしません。

2つ目の形では、枠の中に hidden 属性で隠したfile inputがあり、枠がクリックされるとスクリプトが click() で開きます。1回のクリックでファイルを追加できるので2.5.7は満たしますが、クリックを受けるのは相変わらず div です。Tabの順序に入らず、EnterキーもSpaceキーも効かないため、2.1.1を満たしません。クリックで動くのでコントロールですが、ロールも名前もありません。スクリーンリーダーは文言を文として読み、押せるものがあるとは伝えないため、4.1.2も満たしません。実際に働くfile inputは誰からも隠されているので、代わりになりません。

経費の申請、応募、問い合わせでは、アップロードしないと送信できないことがよくあります。ドロップしか受け付けない枠が1つあるだけで、フォーム全体が止まります。ドラッグはできても時間がかかる人も、同じ問題で手間取ります。フォルダーとフォームを画面に並べ、枠の中に正確に落とさなければならないからです。

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

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

• 手の操作が限られる キーボード、スイッチ、音声操作の利用者は、フォルダーからページへファイルをドラッグできません。Tabも枠に止まらないため、領収書を添付できません。
• 視覚を使わない スクリーンリーダーの利用者には、枠の文言がただの文として聞こえ、押せるボタンはありません。見えない枠をめがけてドラッグすることもできません。
• 筋力や可動域が限られる 手のふるえや握力の弱さがある人は、運ぶ途中でファイルを落としたり、枠の手前で離したりして、フォルダーからやり直しになります。
• 視覚が限られる 拡大鏡を使っていると、フォルダーと枠が同時に画面に収まることはまれで、スクロールする画面の中をファイルを持ったまま運ぶことになります。

自動チェックに見えるのは、div と段落、2つ目の形ではそれに加えて誰からも隠されたfile inputだけです。隠されたinputにラベルを求めるルールはありません。クリックとドロップのイベントはマークアップではなくスクリプトにあるため、枠がコントロールだと示すものもありません。EaseWebの診断は、自身でドロップを受け取る枠、display: none、visibility: hidden、hidden 属性のどれかで隠したfile inputを囲む枠、ファイルのドラッグやドロップを求める文言のある点線や破線の枠を探し、中にTabで届くものがなく、横にもfile inputやファイルを選ぶ・アップロードするボタンがなければ、確認の手がかりとして報告します。フレームワークがルートにまとめて付けたイベントは見えず、ページの別の場所にあるボタンが同じinputを開くこともあるため、1つずつ人が確認します。AIにドロップゾーンのアクセシビリティ改善を頼むと、一部のアップロード用ライブラリーと同じように、枠に tabindex="0" を付けることがよくあります。枠はフォーカスを受けるようになりますが、ロールも名前もないためスクリーンリーダーはほとんど何も読まず、キー操作の処理も書かない限りEnterキーでは何も起きません。診断は、このような枠も確認の手がかりとして報告します。