キーボードで再生できない、または字幕ボタンのない動画

コーヒー豆の焙煎店には淹れ方の動画があり、確認済みの字幕と音声解説版もそろっています。店はサイトの見た目に合わせて、独自のプレーヤーを作ってもらいました。ポスター画像の真ん中に丸い再生ボタンがあり、再生が始まると、再生位置の線、再生、時間、音量、CCとADが並ぶ暗い操作バーが出ます。丸い再生ボタンはクリックの処理を付けたdivで、操作バーはこのボタンをクリックするまで隠れています。マウスなら、すべて動きます。キーボードでは、Tabキーを押すと見出しから動画の下の「ハウスブレンドを購入」へ一気に移ってしまいます。再生ボタンで止まらないので、動画は始まらず、字幕ボタンのある操作バーも出てきません。スクリーンリーダーでページを読み進めても、動画のある場所に押せるものは見つかりません。再生ボタンに役割も名前もないからです。

ボタンは正しく作ったのに、何かが抜けているプレーヤーもよくあります。再生ボタンも操作バーも、名前のある本物のボタンとスライダーですが、操作バーには再生、再生位置、ミュート、音量しか描かれていません。キーボードで動画を始められ、スクリーンリーダーでも何の操作部品かがわかります。しかし、動画に付いている字幕ファイルは一度も表示されず、サーバーにある音声解説版も再生されません。字幕も音声解説版も、オンにする手段がプレーヤーにないからです。

達成基準2.1.1 キーボードは、マウスでできることはすべてキーボードでもできることを求めます。動画を始めるには、divをクリックするしかありません。divはフォーカスを受け取らず、クリック以外の操作に反応しないため、キーボードでは始められず、操作バーの機能もすべて、この最初のクリックの先に閉じ込められます。達成基準4.1.2 名前・役割・値は、どの操作部品も名前と役割を伝えることを求めます。このdivはどちらも伝えません。三角形はCSSで描いているので読む文字がなく、押せることを示すものもありません。W3Cの失敗例F59は、スクリプトでdivを操作部品にしながら役割を与えない、まさにこの問題を挙げています。失敗例F15は、アクセシビリティAPIを使わない独自の操作部品という、より広い場合を扱っています。

2つ目のプレーヤーは、両方の達成基準を満たします。満たしていないのは、音声付きの動画を再生するものすべてにEN 301 549が求める2つの要件です。7.1.1は動画にある字幕を表示する操作モードを、7.2.1は動画にある音声解説を選んで再生する仕組みを求めます。字幕トラックは動画にあり、音声解説版はサーバーにありますが、このプレーヤーではどちらも出せません。ブラウザー標準の操作部品なら字幕を表示できましたが、独自の操作バーに置き換えた際に、字幕の操作が抜けてしまいました。どちらの項目もWCAGにはありませんが、EN 301 549の表A.1は、Webページに求める要件としてどちらも挙げています。この表の項目に適合すれば、EUのWebアクセシビリティ指令に適合していると推定されます。

ショップは、商品の説明に動画をよく使います。1つ目のプレーヤーで淹れ方がわかるのは、マウスを使う人だけです。2つ目のプレーヤーでは、字幕と音声解説版を最も必要とする人のために用意しておきながら、オンにする手段がありません。

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

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

• 手の操作が限られる Tabキーで見出しから動画の下のリンクへ移ってしまうため、キーボード、スイッチ、音声操作の利用者は動画を始められず、字幕ボタンのある操作バーも出てきません。音声操作では、Playという名前で押せるものが見つかりません。
• 視覚を使わない 動画のある場所で、スクリーンリーダーは押せるものを何も見つけられません。再生ボタンに役割も名前もないからです。ADボタンのないプレーヤーでは、目の見えない人のために作った音声解説版が一度も再生されません。
• 聴覚を使わない 動画には確認済みの字幕があるのに、ろう者にはオンにする手段がありません。一方のプレーヤーではマウスで再生を始めたあとでしかオンにできず、もう一方ではまったくオンにできません。
• 聴覚が限られる ナレーションの一部が聞こえる人は、聞き取れない部分を字幕で補いますが、ここではそれができないか、マウスでしかできません。
• 視覚が限られる 画面を拡大したり拡大鏡を使ったりしていて、小さなポインターを見失いやすい人は、キーボードでページを移動します。Tabキーは再生ボタンで止まりません。

クリックの処理を付けたdivには役割がないため、axeには確かめる手がかりがありません。EaseWebの診断は、動画プレーヤーの中のdivやspanのうち、要素自体にポインターのカーソルが設定され、クラスに play、pause、mute、captions のような語を含み、Tabキーで一度も届かないものを報告します。映像の4分の1以上を覆う再生用の層は、プレーヤーの中にほかに届くものがない場合だけ報告します。クラス名がこれらの語と違う操作部品や、ポインターのカーソルが出ない操作部品は、このチェックでは見つかりません。ただし、onclick 属性やボタンの役割を持つものは、Tabキーで届かない操作部品として報告されます。再生ボタンがアイコンだけの本物のボタンなら、名前がないことをaxeが button-name として報告します。再生ボタンが消えたときにフォーカスが移るかは、どのチェックにもわかりません。独自の操作部品を持つプレーヤーについては、診断の動画ごとの確認項目に、近くで字幕ボタンが見つかったかどうかが書かれます。見つからなければ、プレーヤーで字幕を表示でき、音声解説版を再生できるかを人が確かめるよう求めます。AIによる修正では、divに role="button" と tabindex="0" を付けただけで終わることがあります。これでは、Tabで止まってもEnterキーやSpaceキーで何も起きません。また、本物のボタンにしても、フォーカスがあるまま隠してしまい、フォーカスの行き場がなくなることがあります。