可訪問的多媒體

多媒體和無障礙性

到目前為止，在本模組中，我們研究了各種內容以及為確保其無障礙性需要採取的措施，包括從簡單的文字內容到資料表、影像、表單元素和按鈕等原生控制元件，甚至更復雜的標記結構（帶有 WAI-ARIA 屬性）。

本文則著眼於另一類內容，這類內容要確保無障礙性可以說並不那麼容易——多媒體。影像、音軌、影片、<canvas> 元素等，螢幕閱讀器不容易理解，也無法透過鍵盤導航，我們需要給它們提供一些幫助。

但不要絕望——在這裡，我們將幫助你瞭解使多媒體更易於訪問的可用技術。

簡單影像

我們已經在 HTML：無障礙性的良好基礎 一文中介紹了 HTML 影像的簡單文字替代方案——你可以回顧該文獲取完整詳細資訊。簡而言之，你應該確保在可能的情況下，視覺內容具有可供螢幕閱讀器拾取並讀給使用者聽的替代文字。

例如

<img
  src="dinosaur.png"
  alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth." />

無障礙音訊和影片控制

為基於 Web 的音訊/影片實現控制元件應該不是問題，對嗎？讓我們調查一下。

原生 HTML 控制元件的問題

HTML 影片和音訊例項甚至帶有一組內建控制元件，允許你直接控制媒體。例如（請參閱 native-controls.html 原始碼 和 線上演示）

<audio controls>
  <source src="viper.mp3" type="audio/mp3" />
  <source src="viper.ogg" type="audio/ogg" />
  <p>
    Your browser doesn't support HTML audio. Here is a
    <a href="viper.mp3">link to the audio</a> instead.
  </p>
</audio>

<br />

<video controls>
  <source src="rabbit320.mp4" type="video/mp4" />
  <source src="rabbit320.webm" type="video/webm" />
  <p>
    Your browser doesn't support HTML video. Here is a
    <a href="rabbit320.mp4">link to the video</a> instead.
  </p>
</video>

controls 屬性提供了播放/暫停按鈕、進度條等——媒體播放器應有的基本控制元件。它在 Firefox 和 Chrome 中看起來像這樣：

然而，這些控制元件存在問題：

• 它們在大多數瀏覽器中都無法透過鍵盤訪問，即你無法在原生播放器中的控制元件之間進行 Tab 鍵切換。Opera 和 Chrome 在某種程度上提供了此功能，但仍不理想。
• 不同瀏覽器對原生控制元件的樣式和功能各不相同，而且它們無法設定樣式，這意味著它們無法輕易地遵循網站樣式指南。

為了彌補這一點，我們可以建立自己的自定義控制元件。讓我們看看如何實現。

建立自定義音訊和影片控制元件

HTML 影片和音訊共享一個 API——HTML 媒體元素——它允許你將自定義功能對映到按鈕和其他控制元件——這些都由你自行定義。

讓我們以上面的影片為例，併為其新增自定義控制元件。

基本設定

首先，獲取一份我們的 custom-controls-start.html、custom-controls.css、rabbit320.mp4 和 rabbit320.webm 檔案，並將它們儲存到硬碟上的一個新目錄中。

建立一個名為 main.js 的新檔案，並將其儲存在同一目錄中。

首先，讓我們看看 HTML 中影片播放器的 HTML 程式碼：

<section class="player">
  <video controls>
    <source src="rabbit320.mp4" type="video/mp4" />
    <source src="rabbit320.webm" type="video/webm" />
    <p>
      Your browser doesn't support HTML video. Here is a
      <a href="rabbit320.mp4">link to the video</a> instead.
    </p>
  </video>

  <div class="controls">
    <button class="play-pause">Play</button>
    <button class="stop">Stop</button>
    <button class="rwd">Rwd</button>
    <button class="fwd">Fwd</button>
    <div class="time">00:00</div>
  </div>
</section>

JavaScript 基本設定

我們在影片下方插入了一些簡單的控制按鈕。這些控制元件預設當然不會做任何事情；要新增功能，我們將使用 JavaScript。

我們首先需要儲存對每個控制元件的引用——將以下內容新增到 JavaScript 檔案的頂部：

const playPauseBtn = document.querySelector(".play-pause");
const stopBtn = document.querySelector(".stop");
const rwdBtn = document.querySelector(".rwd");
const fwdBtn = document.querySelector(".fwd");
const timeLabel = document.querySelector(".time");

接下來，我們需要獲取對影片/音訊播放器本身的引用——在前面的程式碼行下方新增此行：

const player = document.querySelector("video");

這保留了對 HTMLMediaElement 物件的引用，該物件具有幾個有用的屬性和方法，可用於將功能連線到我們的按鈕。

在繼續建立按鈕功能之前，讓我們移除原生控制元件，以免它們妨礙我們的自定義控制元件。再次在 JavaScript 檔案底部新增以下程式碼：

player.removeAttribute("controls");

以這種方式而不是一開始就不包含 controls 屬性的好處是，如果我們的 JavaScript 因任何原因失敗，使用者仍然有一些可用的控制元件。

連線我們的按鈕

首先，讓我們設定播放/暫停按鈕。我們可以透過一個簡單的條件函式使其在播放和暫停之間切換，如下所示。將其新增到你的程式碼底部：

playPauseBtn.onclick = () => {
  if (player.paused) {
    player.play();
    playPauseBtn.textContent = "Pause";
  } else {
    player.pause();
    playPauseBtn.textContent = "Play";
  }
};

接下來，在底部新增以下程式碼，用於控制停止按鈕：

stopBtn.onclick = () => {
  player.pause();
  player.currentTime = 0;
  playPauseBtn.textContent = "Play";
};

HTMLMediaElement 上沒有可用的 stop() 函式，因此我們改為 pause() 它，同時將 currentTime 設定為 0。

接下來是我們的快退和快進按鈕——將以下程式碼塊新增到你的程式碼底部：

rwdBtn.onclick = () => {
  player.currentTime -= 3;
};

fwdBtn.onclick = () => {
  player.currentTime += 3;
  if (player.currentTime >= player.duration || player.paused) {
    player.pause();
    player.currentTime = 0;
    playPauseBtn.textContent = "Play";
  }
};

這些非常簡單，每次點選時只需在 currentTime 上增加或減去 3 秒。在真實的影片播放器中，你可能需要一個更精巧的搜尋欄或類似的東西。

請注意，我們還會檢查 currentTime 是否超過媒體總 duration，或者當按下 fwdBtn 時媒體是否未播放。如果任一條件為真，我們都會停止影片，以避免在影片未播放時嘗試快進或快進超過影片末尾時使用者介面出現問題。

最後，將以下程式碼新增到程式碼末尾，以控制已播放時間的顯示：

player.ontimeupdate = () => {
  const minutes = Math.floor(player.currentTime / 60);
  const seconds = Math.floor(player.currentTime - minutes * 60);
  const minuteValue = minutes < 10 ? `0${minutes}` : minutes;
  const secondValue = seconds < 10 ? `0${seconds}` : seconds;

  const mediaTime = `${minuteValue}:${secondValue}`;
  timeLabel.textContent = mediaTime;
};

每次時間更新時（每秒一次），我們都會觸發此函式。它根據給定的 currentTime 值（以秒為單位）計算分鐘數和秒數，如果分鐘或秒的值小於 10，則新增前導 0，然後建立顯示讀數並將其新增到時間標籤。

延伸閱讀

這為您提供瞭如何向影片/音訊播放器例項新增自定義播放器功能的基本概念。有關如何向影片/音訊播放器新增更復雜功能的更多資訊，請參閱：

• 音訊和影片傳輸
• 影片播放器樣式基礎
• 建立跨瀏覽器影片播放器

我們還建立了一個高階示例，展示瞭如何建立一個面向物件的系統，該系統查詢頁面上的所有影片和音訊播放器（無論有多少個），並向其新增我們的自定義控制元件。請參閱 custom-controls-oojs（也請參閱原始碼）。

音訊轉錄

為了讓聽力障礙人士能夠訪問音訊內容，你需要建立文字轉錄。這些轉錄可以以某種方式包含在與音訊相同的頁面上，也可以包含在單獨的頁面上並連結到該頁面。

關於實際建立轉錄，您的選擇包括：

• 商業服務——你可以付費請專業人士進行轉錄，例如 Scribie、Casting Words 或 Rev 等公司。多方打聽並尋求建議，以確保您找到一家信譽良好且能有效合作的公司。
• 社群/基層/自我轉錄——如果你是工作場所活躍社群或團隊的一員，那麼你可以請求他們幫助進行翻譯。你甚至可以嘗試自己動手做。
• 自動化服務——有一些可用的 AI 服務，例如 Trint 或 Transcribear。將影片/音訊檔案上傳到網站，它會自動為您轉錄。在 YouTube 上，您可以選擇生成自動字幕/轉錄。根據口語音訊的清晰度，生成的轉錄質量會大相徑庭。

就像生活中的大多數事情一樣，你往往會得到你所付出的；不同的服務在準確性和生成轉錄所需時間方面會有所不同。如果你付費給一家信譽良好的公司或 AI 服務進行轉錄，你可能會很快得到高質量的轉錄。如果你不想付費，你可能會得到較低質量的轉錄，和/或速度較慢。

釋出音訊資源但承諾稍後釋出轉錄是不可以的——此類承諾往往無法兌現，這將損害你與使用者之間的信任。如果你呈現的音訊是面對面會議或現場口語表演之類的，那麼在表演期間做筆記，將其與音訊一起完整發布，然後尋求幫助以整理筆記是可以接受的。

轉錄示例

如果您使用自動化服務，那麼您可能需要使用該工具提供的使用者介面。例如，檢視我們的 等等，ARIA 角色有類別？ 影片，然後選擇三點選單 (. . .) > 顯示轉錄。您會看到轉錄出現在一個單獨的面板中。

如果您正在建立自己的使用者介面來呈現音訊和相關轉錄，您可以隨心所欲，但將其包含在可顯示/可隱藏的面板中可能更合理；請參閱我們的 audio-transcript-ui 示例（也請參閱原始碼）。

音訊描述

在您的音訊附帶視覺效果的情況下，您需要提供某種音訊描述來描述這些額外內容。

在許多情況下，這將採用影片的形式，在這種情況下，您可以使用本文下一節中描述的技術來實現字幕。

但是，也有一些特殊情況。例如，您可能有一個會議錄音，其中提到了附帶資源，如電子表格或圖表。在這種情況下，您應該確保這些資源與音訊 + 轉錄一起提供，並在轉錄中提到它們的地方明確連結到它們。這當然會幫助所有使用者，而不僅僅是聽障人士。

影片文字軌道

為了使影片對聾人、視障人士或其他使用者群體（例如頻寬較低或不理解影片錄製語言的使用者）無障礙，您需要在影片內容中包含文字軌道。

這不是一個新概念——電視服務很早就提供了隱藏式字幕

許多國家提供帶有其本國語言字幕的英語電影，DVD 上也經常提供不同語言的字幕，如下圖所示

不同型別的文字軌道有不同的用途。您將遇到的主要型別是：

• 字幕——為聽障使用者提供便利，他們聽不到音軌，包括口語單詞和上下文資訊，例如說話者是誰，人們是生氣還是悲傷，以及音樂當前營造的心情。
• 副標題——包含音訊對話的翻譯，供不理解口語的使用者使用。
• 描述——包括為視障人士提供的描述，他們看不到影片，例如場景的樣子。
• 章節標題——旨在幫助使用者導航媒體資源的章節標記。

實現 HTML 影片文字軌道

用於顯示 HTML 影片的文字軌道需要用 WebVTT 編寫，這是一種文字格式，包含多個文字字串以及元資料，例如您希望每個文字字串在影片中顯示的時間，甚至有限的樣式/定位資訊。這些文字字串稱為提示。

一個典型的 WebVTT 檔案看起來像這樣：

WEBVTT

1
00:00:22.230 --> 00:00:24.606
This is the first subtitle.

2
00:00:30.739 --> 00:00:34.074
This is the second.

…

要使其與 HTML 媒體播放一起顯示，您需要：

• 將其儲存為 .vtt 檔案，並放在合理的位置。
• 使用 <track> 元素連結到 .vtt 檔案。<track> 應該放置在 <audio> 或 <video> 內部，但要在所有 <source> 元素之後。使用 kind 屬性指定提示是副標題、字幕還是描述。此外，使用 srclang 告訴瀏覽器你編寫字幕的語言。

這是一個例子

<video controls>
  <source src="example.mp4" type="video/mp4" />
  <source src="example.webm" type="video/webm" />
  <track kind="subtitles" src="subtitles_en.vtt" srclang="en" />
</video>

這將導致影片顯示字幕。有關完整應用程式及其原始碼，請參閱 向 HTML 影片新增字幕和副標題。此示例使用 JavaScript 允許使用者在不同字幕之間進行選擇。請注意，要開啟字幕，您需要按“CC”按鈕並選擇一個選項——English、Deutsch 或 Español。

總結

本章總結了多媒體內容的無障礙性問題，並提供了一些實用的解決方案。

使多媒體無障礙並不總是容易的。例如，如果你正在處理沉浸式 3D 遊戲或虛擬現實應用程式，為這種體驗提供文字替代方案是相當困難的，你可能會認為視障使用者並不是此類應用程式的目標受眾。

但是，您可以確保此類應用程式具有足夠好的顏色對比度和清晰的呈現，以便低視力/色盲使用者能夠感知，並且還可以使其透過鍵盤訪問。請記住，無障礙性是儘可能地做到最好，而不是一直追求 100% 的無障礙性，這通常是不可能的。

• 上一頁
• 概述：Web 上的可訪問性
• 下一頁