本文へ移動
easeweb
ご相談
トピックを検索

字幕を設定メニューの奥に隠す動画プレーヤー

ショップ独自の動画プレーヤーが、再生と音量は操作バーに置き、字幕と音声解説は設定メニューの3段目に置いています。

EN 301 549
7.3項
Section 508
503.4.1503.4.2
問題あり <button aria-label="Settings">
アクセシビリティの問題を示した図: ろう:字幕はどこでオンにするの?
01

問題

字幕や音声解説が必要な人は、それが設定メニューの中にあると知っていて、3段開かなければオンにできません。

02

試してみる

字幕をオンにし、次に音声解説をオンにしてください。それぞれ何回の操作が要りましたか?

問題のある側では、再生と音量は操作バーにあるのに、どちらも設定の2段下にあります。修正を適用すると、音量の隣にCCとADのボタンが出ます。プレーヤーの下の欄に、それぞれに要る操作の回数が出ます。

問題あり 修正できますか?

ハウスブレンドの淹れ方

0:00 / 0:00

オンにするまでの操作の回数

音量: 1 · 字幕: 3 · 音声解説: 3

現在: 字幕 オフ, 音声解説 オフ

音量は1回、どちらも3回

再現デモです。「問題あり」は意図的にアクセシブルでない状態にしています。

03

修正方法

字幕と音声解説に、操作バーの音量の隣で、それぞれ専用のボタンを用意します。

  1. 1字幕は、音量と同じく1回の操作でオンにできる。
  2. 2音声解説版がある限り、音声解説も1回の操作でオンにできる。
  3. 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>

AI コーディングアシスタントで修正しますか? このガイドを Markdown で取得、または全ガイドをコーディングエージェントで使う。

04

修正の確認

マウスを使わない4つの確認

確認方法: キーボード、スクリーンリーダー、ズーム

4件中0件を確認済み

OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。プレーヤーやそのプラグインを更新した際は、再度確認します。

制限

このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。ボタンが役立つのは、その先に中身があるときだけです。正しい字幕は字幕のない動画と、確認されていない自動字幕で扱い、音声解説には画面に映るものを伝える内容が要ります。プレーヤーのほかの操作部品にも、名前、状態、キーボード操作が必要です。EN 301 549と、Section 508のTrusted Testerの試験は、サイトが作るプレーヤーにこれを求めています。動画を見る人と一緒に、動画が実際に再生されるプレーヤーやサービスで、一連の流れを確認してください。

よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。

コードを更新しても、使いやすさを保つために

ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。

再テストの進め方