トピックを検索
字幕を設定メニューの奥に隠す動画プレーヤー
ショップ独自の動画プレーヤーが、再生と音量は操作バーに置き、字幕と音声解説は設定メニューの3段目に置いています。
<button aria-label="Settings"> 問題
字幕や音声解説が必要な人は、それが設定メニューの中にあると知っていて、3段開かなければオンにできません。
コーヒー豆の焙煎店の淹れ方の動画には、確認済みの字幕と音声解説版がそろいました。その後、店はサイトの見た目に合わせるため、ブラウザー標準のプレーヤーを、動画プラグインの独自プレーヤーに替えました。操作バーには、再生、音量のスライダー、設定、全画面表示が並びます。字幕をオンにするには、設定を開き、字幕を開き、英語を選ぶという3回の操作が要ります。音声解説は、設定、音声、「英語(音声解説)」の順です。再生と音量は1回ずつで済みます。操作バーのどこにも、字幕があることを示すものはありません。
字幕ボタンをどこに置くかを定めたWCAGの達成基準はありません。WCAGが求めるのは字幕(1.2.2)と音声解説(1.2.5)があること、キーボードで操作できることで、このプレーヤーはどれも満たしています。この要件は、調達の基準にあります。
- Section 508の503.4.1:音量の操作があるプレーヤーでは、字幕を選ぶ操作を、音量や番組選択の操作と同じメニュー階層に置く。
- Section 508の503.4.2:番組選択の操作があるプレーヤーでは、音声解説を選ぶ操作を、音量や番組選択の操作と同じメニュー階層に置く。
- EN 301 549の7.3:音声付きの動画を主に表示するWebページでは、字幕と音声解説をオンにする操作を、再生や音量などの主な操作と同じ操作の階層、つまり同じ手順の数で使えるようにする。EN 301 549の表A.1は、EUのWebアクセシビリティ指令のもとでWebページに求める要件の一つとして、これを挙げています。
この例では、音量が1回、字幕と音声解説がそれぞれ3回なので、503.4.1と7.3を満たしていません。番組選択の操作はないため、503.4.2は適用されません。Section 508は、WCAG 2.0のレベルAAを満たすWebアプリケーションを503の対象から外すことがありますが、米国の連邦機関がWebコンテンツの試験に使うTrusted Testerの手順では、メディアプレーヤーの字幕と音声解説の操作を試験します(試験17.Dから17.G)。このENの項目を適用するドイツのBITVの試験では、サイトが独自の操作部品で作るすべてのプレーヤーを確認し、サイトが配置を変えられないブラウザー標準のプレーヤーは対象外としています。
メニューは誰にとっても同じですが、そこを通らなければならないのは字幕や音声解説が必要な人だけで、しかも動画のたびに通ることになります。
10グループ中5グループに影響
- 全盲 (影響あり)
- 弱視 (影響なし)
- 色覚 (影響なし)
- ろう (影響あり)
- 難聴 (影響あり)
- 発話 (影響なし)
- 手の操作 (影響あり)
- 届く範囲・力 (影響なし)
- 認知 (影響あり)
- 光過敏 (影響なし)
- 聴覚を使わない 字幕はレシピを知る唯一の手段なのに、設定、字幕、英語と進まないと出ません。そこを探そうと思わない人は、動画に字幕がないと思い込み、ページを離れます。
- 視覚を使わない 音声解説は「設定」という名前のボタンの3段下にあります。スクリーンリーダー利用者は、動画のたびにメニューを1つずつ開き、字幕の項目を聞き通してから音声にたどり着くことになります。
- 聴覚が限られる 音声の一部が聞こえる人は、聞き取れない部分を字幕で補います。ここでは、設定、字幕と開く必要があると知らなければ使えません。
- 手の操作が限られる 階層が1つ増えるごとに操作が1回増えます。入れ子のメニューは小さなターゲットで、ポインターがずれると閉じます。スマートフォンの全画面表示では、動画を覆ってしまいます。
- 言語・認知・学習の能力が限られる メニューの中のメニューで、字幕は「字幕」、音声解説は「音声」の下にあるという作りは、覚えにくく、次の動画で探し直すのも大変です。
この問題を扱うWCAGのルールはないため、axeなどWCAGの自動チェックは見ません。EaseWebの診断はすべての動画を確認項目として挙げ、独自の操作部品を持つプレーヤーについては、動画の近くに見つかった字幕のボタンを示すか、音量やミュートの操作はあっても字幕のボタンが見つからなかったことを伝え、字幕と音声解説がどちらも音量と同じく1回で済むかを人に確認するよう求めます。プレーヤーのメニューを開くことも、YouTubeの埋め込みのようにフレームの中のプレーヤーを見ることも、名前のないアイコンのボタンが字幕のものだと見分けることもできません。AIのコードアシスタントに「プレーヤーのバーを整理して」と頼むと、字幕を設定メニューへ移すことがあります。多くの有名なプレーヤーが、字幕の言語や見た目をそこに置いているからです。
試してみる
字幕をオンにし、次に音声解説をオンにしてください。それぞれ何回の操作が要りましたか?
問題のある側では、再生と音量は操作バーにあるのに、どちらも設定の2段下にあります。修正を適用すると、音量の隣にCCとADのボタンが出ます。プレーヤーの下の欄に、それぞれに要る操作の回数が出ます。
問題あり 修正できますか?
ハウスブレンドの淹れ方
オンにするまでの操作の回数
音量: 1 · 字幕: 3 · 音声解説: 3
現在: 字幕 オフ, 音声解説 オフ
修正方法
字幕と音声解説に、操作バーの音量の隣で、それぞれ専用のボタンを用意します。
- 1字幕は、音量と同じく1回の操作でオンにできる。
- 2音声解説版がある限り、音声解説も1回の操作でオンにできる。
- 3どちらも、どの幅でも全画面表示でも操作バーに残る。
<div class="player"> <video src="brew-guide.webm" poster="brew-guide.jpg"> <track kind="captions" srclang="en" label="English" src="brew-guide.en.vtt"> </video> <div class="player-bar"> <button type="button" aria-label="Play">…</button> <input type="range" aria-label="Volume" min="0" max="1" step="0.1" value="1"> <button type="button" aria-label="Settings" aria-expanded="false" aria-controls="player-settings">…</button> <button type="button" aria-label="Full screen">…</button> </div> <div id="player-settings" class="player-menu" hidden> <!-- Opens a second menu: Off, English --> <button type="button">Subtitles</button> <!-- Opens a second menu: English; English, described --> <button type="button">Audio</button> </div></div><div class="player"> <video src="brew-guide.webm" poster="brew-guide.jpg"> <track kind="captions" srclang="en" label="English" src="brew-guide.en.vtt"> </video> <div class="player-bar"> <button type="button" aria-label="Play">…</button> <input type="range" aria-label="Volume" min="0" max="1" step="0.1" value="1"> <button type="button" class="captions" aria-pressed="false">CC<span class="visually-hidden"> captions</span></button> <button type="button" class="described" aria-pressed="false">AD<span class="visually-hidden"> audio description</span></button> <button type="button" aria-label="Settings" aria-expanded="false" aria-controls="player-settings">…</button> <button type="button" aria-label="Full screen">…</button> </div> …</div>どの操作部品もキーボードで使え、名前もあるため、プレーヤーの操作部品はWCAGのチェックを通ります。しかし、音量が1回なのに対し、字幕と音声解説はそれぞれ3回かかり、操作バーにはどちらかがあることを示すものもありません。
字幕と音声解説は、再生や音量と同じく1回の操作で済むようになり、操作バーのCCとADの文字が、それがあることを示します。どちらも、見える文字で始まる名前を持つHTML標準のボタンなので、音声入力の利用者は「CCをクリック」と言え、aria-pressed がスクリーンリーダー利用者にオンかどうかを伝えます。音声解説版は、音声解説がなく、画面の情報が伝わらない動画と同じく、同じ位置で入れ替わります。1つのファイルの2つの音声トラックを切り替えられるプレーヤーなら、トラックを切り替えてもかまいません。設定メニューは、字幕の言語と字幕の見た目のために残します。
どちらのボタンも、どの幅でも操作バーに残します。狭いプレーヤーで場所が足りないときは、字幕と音声解説ではなく、再生速度、画質、ピクチャーインピクチャーをオーバーフローメニューへ移します。スマートフォンの幅と全画面表示で確認してください。全画面表示で操作バーを作り直し、そこでボタンを省くプレーヤーもあります。
動画にあるものだけを出します。字幕はあっても音声解説版がない動画には、字幕ボタンだけを置きます。押しても何も起きない音声解説ボタンは誤解を招きます。字幕の言語が複数あるときは、CCボタンで、利用者が前回選んだ言語か、ページの言語の字幕をオンにし、ほかの言語は設定メニューで選べるようにします。字幕の大きさ、色、背景もそのメニューに置きます。それはスタイルを変えられない字幕、変換で消える字幕で説明しています。
選んだ設定は覚えておきます。字幕をオンにした人は、次の動画でもオンのままを望みます。EN 301 549も、字幕と音声解説を最初からオンにするかを利用者が選べるのがよい方法だと注記しています。設定はブラウザーに保存し、次の動画が、利用者が前の動画を離れたときの状態で始まるようにします。
Cで字幕を切り替えるようなキーボードショートカットは、あればうれしいものですが、ボタンの代わりにはなりません。誰にも見えず、タッチの利用者は押せません。1文字のキーは、利用者がオフにしたり変えたりできない限り、オフにできない1文字のショートカットの一つになります。
自分で作っていない操作部品も確認します。
- ブラウザー標準の操作部品(
<video controls>):配置はブラウザーが決めます。Chromiumは、どの幅でも字幕ボタンを操作部品のオーバーフローメニューに置き、プレーヤーの幅が足りないと、再生、音量、全画面表示のボタンもそこへ移します。動画に十分な幅を取り、音声解説のボタンは、音声解説のガイドと同じくプレーヤーのすぐ隣に置きます。 - YouTubeやVimeoなどの埋め込みプレーヤー:字幕ボタンはサービス側のものです。音声解説がそこで別の動画になっている場合は、プレーヤーのすぐ下にリンクを置きます。
AI コーディングアシスタントで修正しますか? このガイドを Markdown で取得、または全ガイドをコーディングエージェントで使う。
修正の確認
マウスを使わない4つの確認
確認方法: キーボード、スクリーンリーダー、ズーム
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。プレーヤーやそのプラグインを更新した際は、再度確認します。
制限
このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。ボタンが役立つのは、その先に中身があるときだけです。正しい字幕は字幕のない動画と、確認されていない自動字幕で扱い、音声解説には画面に映るものを伝える内容が要ります。プレーヤーのほかの操作部品にも、名前、状態、キーボード操作が必要です。EN 301 549と、Section 508のTrusted Testerの試験は、サイトが作るプレーヤーにこれを求めています。動画を見る人と一緒に、動画が実際に再生されるプレーヤーやサービスで、一連の流れを確認してください。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
コードを更新しても、使いやすさを保つために
ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。