無障礙多媒體

在本模組中，我們已經瞭解了各種內容以及確保其無障礙性所需的操作，從簡單的文字內容到資料表、影像、表單元素和按鈕等原生控制元件，甚至更復雜的標記結構（使用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 影片和音訊例項甚至自帶一組內建控制元件，允許您開箱即用地控制媒體。例如（參見 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 中看起來像這樣

但是，這些控制元件存在一些問題

• 在大多數瀏覽器中，它們無法透過鍵盤訪問，即您無法在原生播放器內的控制元件之間切換標籤。Opera 和 Chrome 在某種程度上提供了此功能，但它仍然不理想。
• 不同的瀏覽器為原生控制元件提供了不同的樣式和功能，並且它們不可樣式化，這意味著無法輕鬆地使其遵循站點樣式指南。

為了解決這個問題，我們可以建立自己的自定義控制元件。讓我們看看如何操作。

HTML 影片和音訊共享一個 API——HTML Media Element——它允許您將自定義功能對映到按鈕和其他控制元件——這兩者都是您自己定義的。

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

基本設定

首先，獲取我們的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="playpause">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(".playpause");
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 影片一起顯示的文字軌道需要使用 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 影片新增字幕和隱藏式字幕。您可以在 GitHub 上找到與本文相關的 示例，由 Ian Devlin 編寫（也請參閱 原始碼）。此示例使用 JavaScript 允許使用者在不同的字幕之間進行選擇。請注意，要開啟字幕，您需要按下“CC”按鈕並選擇一個選項 - 英語、德語或西班牙語。

您已閱讀到本文的結尾，但您還記得最重要的資訊嗎？

我們沒有為本文編寫新的評估集，因為我們的 HTML 多媒體和嵌入 模組中已經有可用的評估來測試您對此處介紹的資訊的瞭解。如果您尚未嘗試，請前往 測試您的技能：HTML 影像 和 測試您的技能：多媒體和嵌入 進行嘗試。

本章概述了多媒體內容的可訪問性問題，以及一些實用的解決方案。

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

但是，您可以確保此類應用程式具有足夠好的顏色對比度和清晰的呈現，以便視力較差/色盲的使用者能夠感知，並使其可以透過鍵盤訪問。請記住，可訪問性是關於盡最大努力，而不是始終追求 100% 的可訪問性，這通常是不可能的。

• 上一頁
• 概述：無障礙性
• 下一頁