多媒體無(wú)障礙

可能導(dǎo)致無(wú)障礙（accessibility）問(wèn)題的另一類內(nèi)容是多媒體——視頻、音頻和圖像內(nèi)容需要提供適當(dāng)?shù)奈谋咎娲绞?，以便輔助技術(shù)及其用戶能夠理解它們。本文展示了具體內(nèi)容。

多媒體和無(wú)障礙

到目前為止，在這個(gè)模塊中，我們已經(jīng)查看了各種內(nèi)容以及需要做些什么來(lái)確保其無(wú)障礙，從簡(jiǎn)單的文本內(nèi)容到數(shù)據(jù)表，圖像，本機(jī)控件（如表單元素和按鈕）以及更復(fù)雜的標(biāo)記結(jié)構(gòu)（具有WAI-ARIA屬性）。

另一方面，這篇文章著眼于另一個(gè)一般的內(nèi)容類別，可以說(shuō)它不容易確保對(duì)多媒體的無(wú)障礙。圖像，視頻，<canvas>元素，F(xiàn)lash 電影等不易被屏幕閱讀器理解或被鍵盤(pán)導(dǎo)航，我們需要幫助他們。

但不要絕望 - 在這里我們將幫助你瀏覽可用于使多媒體更容易訪問(wèn)的技術(shù)。

簡(jiǎn)單圖像

我們已經(jīng)介紹了 HTML 圖像的簡(jiǎn)單文本替代HTML: A good basis for accessibility –– 你可以參考其中了解詳細(xì)信息。簡(jiǎn)而言之，應(yīng)確保在可能的情況下，視覺(jué)內(nèi)容具有替代文本，供屏幕閱讀器拾取和讀取給其用戶。

示例：

<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." />

可訪問(wèn)的音頻和視頻控件

基于 Web 的音頻/視頻執(zhí)行控件不應(yīng)該成為問(wèn)題，對(duì)嗎？讓我們來(lái)調(diào)查一下。

本地 HTML5 控件的問(wèn)題

HTML5 視頻和音頻實(shí)例甚至附帶一組內(nèi)置控件，允許你直接在盒子控制媒體。例如 (請(qǐng)參閱本地控件.html 源代碼和實(shí)時(shí)演示):

<audio controls> <source src="viper.mp3" type="audio/mp3" /> <source src="viper.ogg" type="audio/ogg" /> <p> Your browser doesn't support HTML5 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 HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead. </p> </video>

控件屬性提供播放/暫停按鈕、搜索欄等 - 你期望從媒體播放器獲得的基本控件。它看起來(lái)像在 Firefox 和 Chrome:

但是，這些控件存在問(wèn)題：

為了解決這個(gè)問(wèn)題，我們可以創(chuàng)建自己的自定義控件。讓我們來(lái)看看如何。

創(chuàng)建自定義音頻和視頻控件

HTML5 視頻和音頻共享 API — HTML Media Element — 允許你將自定義功能映射到按鈕和其他控件––這兩個(gè)控件都是你自己定義的。

讓我們從上面獲取視頻示例，并向其添加自定義控件。

首先，獲取我們的custom-controls-start.html、custom-controls.css、 rabbit320.mp4 和 rabbit320.webm文件的副本，并將它們保存在硬盤(pán)上的新目錄中。

創(chuàng)建一個(gè)名為 main.js 的新文件并將其保存在同一目錄中。

首先，讓我們?cè)?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 HTML5 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 基本設(shè)置

我們?cè)谝曨l下方插入了一些簡(jiǎn)單的控制按鈕。當(dāng)然，這些控件在默認(rèn)情況下不會(huì)執(zhí)行任何操作。要添加功能，我們將使用 JavaScript。

我們首先需要存儲(chǔ)對(duì)每個(gè)控件的引用––將以下內(nèi)容添加到 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");

接下來(lái)，我們需要獲取對(duì)視頻/音頻播放器本身的引用––在前面的代碼行下方添加此行代碼：

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

這包含對(duì)HTMLMediaElement對(duì)象的引用，該對(duì)象具有幾個(gè)有用的屬性和方法，可用于將功能連接到我們的按鈕。

在開(kāi)始創(chuàng)建按鈕功能之前，讓我們刪除本地控件，以免它們妨礙我們的自定義控件。在 JavaScript 的底部再次添加以下內(nèi)容：

player.removeAttribute("controls");

這樣做，而不是僅僅不包括控件屬性擺在首位有一個(gè)優(yōu)勢(shì)，如果我們的 JavaScript 失敗，用戶仍然有一些控件可用。

首先，讓我們?cè)O(shè)置播放/暫停按鈕。我們可以使用一個(gè)簡(jiǎn)單的條件函數(shù)在播放和暫停之間切換，如下所示。將其添加到代碼底部：

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

接下來(lái)，將此代碼添加到底部，該代碼控制停止按鈕：

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

在 HTMLMediaElement 上沒(méi)有可用的 stop() 函數(shù)，因此我們改為pause()它，同時(shí)將當(dāng)前時(shí)間設(shè)置為 0。

接下來(lái)，我們的快退和快進(jìn)按鈕–– 將以下塊添加到代碼的底部：

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"; } };

這些非常簡(jiǎn)單，每次單擊它們時(shí)，只需將 3 秒添加到currentTime。在真正的視頻播放器中，你可能想要一個(gè)更精細(xì)的查找欄或類似功能。

請(qǐng)注意，當(dāng)按下 Fwd 按鈕時(shí)，我們還會(huì)檢查currentTime是否超過(guò)總媒體的duration,或者媒體是否未播放。如果任一條件為 true，我們只需停止視頻，以避免用戶界面出錯(cuò)，如果他們?cè)噲D在視頻未播放時(shí)快進(jìn)，或快進(jìn)通過(guò)視頻結(jié)束。

最后，將以下內(nèi)容添加到代碼末尾，以控制顯示的時(shí)間：

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; };

每次更新時(shí)間 (每秒一次) 時(shí)，我們都會(huì)觸發(fā)此功能。它算出給定的當(dāng)前時(shí)間值 (以秒為單位) 的分鐘和秒數(shù)，如果分鐘或秒值小于 10，則添加前導(dǎo) 0，然后創(chuàng)建顯示讀出并將其添加到時(shí)間標(biāo)簽。

這為你提供了如何向視頻/音頻播放器實(shí)例添加自定義播放器功能的基本想法。有關(guān)如何向視頻/音頻播放器添加更復(fù)雜的功能（包括舊版瀏覽器的 Flash 回退）的詳細(xì)信息，請(qǐng)參閱：

我們還創(chuàng)建了一個(gè)高級(jí)示例，以演示如何創(chuàng)建面向?qū)ο蟮南到y(tǒng)，該系統(tǒng)可查找頁(yè)面上的每個(gè)視頻和音頻播放器 (無(wú)論有多少個(gè)視頻和音頻播放器),并將自定義控件添加到其中。請(qǐng)參閱 custom-controls-oojs（查看其源碼）。

音頻腳本

要為聾人提供訪問(wèn)音頻內(nèi)容的機(jī)會(huì)，你確實(shí)需要?jiǎng)?chuàng)建文本腳本。這些可以以某種方式與音頻一樣包含在與音頻相同的頁(yè)面上，也可以包含在單獨(dú)的頁(yè)面上并鏈接到

在實(shí)際創(chuàng)建腳本方面，你的選項(xiàng)包括：

和生活中的大多數(shù)事情一樣，你傾向于得到你所付出的;不同的服務(wù)在準(zhǔn)確性和制作成績(jī)單所花時(shí)間方面會(huì)有所不同。如果你支付一個(gè)有信譽(yù)的公司做轉(zhuǎn)錄，你可能會(huì)得到它迅速和高質(zhì)量的。如果你不想付錢，你很可能會(huì)以較低的質(zhì)量完成，并且/或緩慢完成。

發(fā)布音頻資源是不行的，但承諾稍后會(huì)發(fā)布腳本 - 此類承諾通常不會(huì)兌現(xiàn)，這將削弱你和你的用戶之間的信任。如果你演示的音頻類似于面對(duì)面會(huì)議或現(xiàn)場(chǎng)演講表演，則可以在演出期間做筆記，與音頻一起完整發(fā)布筆記，然后尋求幫助，以便稍后清理筆記。

腳本示例

如果使用自動(dòng)服務(wù)，則可能需要使用該工具提供的用戶界面。例如，查看Audio Transcription Sample 1并選擇" More > Transcript"。

如果要?jiǎng)?chuàng)建自己的用戶界面來(lái)顯示音頻和相關(guān)腳本，你可以隨心所欲地執(zhí)行此操作，但將其包含在可顯示/可隱藏面板中可能有意義;請(qǐng)參閱我們的audio-transcript-ui 示例（另請(qǐng)參閱其源碼）。

音頻描述

在音頻附帶視頻的情況下，你需要提供某種音頻說(shuō)明來(lái)描述該額外內(nèi)容。

在許多情況下，這只會(huì)采取視頻的形式，在這種情況下，你可以使用本文下一節(jié)中介紹的技術(shù)實(shí)現(xiàn)字幕。

但是，有一些邊緣情況。例如，你可能有一個(gè)會(huì)議的音頻錄制，該錄音引用了附帶的資源，如電子表格或圖表。在這種情況下，應(yīng)確保資源與音頻和腳本一起提供，并在成績(jī)單中提及它們的位置專門鏈接到這些資源。這當(dāng)然會(huì)幫助所有用戶，而不僅僅是聾人。

備注： 音頻腳本通常有助于多個(gè)用戶組。除了讓聾人用戶訪問(wèn)音頻中包含的信息外，還考慮一個(gè)帶寬連接較低的用戶，他們會(huì)發(fā)現(xiàn)下載音頻不方便。還要考慮在嘈雜的環(huán)境中 (如酒吧或酒吧) 中的用戶，他們?cè)噲D訪問(wèn)信息，但無(wú)法通過(guò)噪音聽(tīng)到信息。

視頻文本軌道

要使聾人、盲人甚至其他用戶組 (如低帶寬用戶或不理解視頻錄制的語(yǔ)言的用戶) 可以訪問(wèn)視頻，你需要在視頻內(nèi)容中包括文本軌道。

備注： 文本軌道對(duì)于潛在的任何用戶也很有用，而不僅僅是那些殘障用戶。例如，有些用戶可能無(wú)法聽(tīng)到音頻，因?yàn)樗麄兲幱卩须s的環(huán)境中 (如顯示體育游戲時(shí)的擁擠的酒吧),或者如果其他人在安靜的地方 (如圖書(shū)館),則可能不想打擾其他人。

這不是一個(gè)新概念 ––電視服務(wù)已經(jīng)關(guān)閉了字幕相當(dāng)長(zhǎng)的時(shí)間了：

許多國(guó)家/地區(qū)提供以英語(yǔ)為母語(yǔ)的字幕的英語(yǔ)電影，例如，DVD 上通常提供不同的語(yǔ)言字幕

不同類型的文本軌道具有不同的目的。你遇到的主要情況是：

實(shí)現(xiàn) HTML5 視頻文本軌道

使用 HTML5 視頻顯示的文本軌道需要用 WebVTT 編寫(xiě)，WebVTT 是一種文本格式，其中包含多個(gè)文本字符串以及元數(shù)據(jù)，例如你希望在視頻中顯示每個(gè)文本字符串的時(shí)間，甚至限制樣式/定位信息。這些文本字符串稱為提示。

典型的 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 媒體播放一起顯示，你需要：

下面是一個(gè)示例：

<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>

這將產(chǎn)生顯示字幕的視頻，如下所示：

有關(guān)詳細(xì)信息，請(qǐng)閱讀Adding captions and subtitles to HTML5 video。你可以找到與本文一起使用本文的the example,本文由 Ian Devlin 編寫(xiě) (請(qǐng)參閱source code)。此示例使用一些 JavaScript 允許用戶在不同的字幕之間進(jìn)行選擇。請(qǐng)注意，要打開(kāi)字幕，你需要按"CC"按鈕并選擇一個(gè)選項(xiàng) - 英語(yǔ)、德語(yǔ)或西班牙語(yǔ)。

備注： 文本軌道和轉(zhuǎn)錄也可以幫助你使用SEO,因?yàn)樗阉饕嬖谖谋旧嫌绕浞睒s。文本軌道甚至允許搜索引擎通過(guò)視頻直接鏈接到一個(gè)點(diǎn)部分。

其他多媒體內(nèi)容

以上各節(jié)未涵蓋你可能要放在網(wǎng)頁(yè)上的所有類型的多媒體內(nèi)容。你可能還需要處理使用其他可用技術(shù)創(chuàng)建的游戲、動(dòng)畫(huà)、幻燈片、嵌入式視頻和內(nèi)容，例如：

對(duì)于此類內(nèi)容，你需要根據(jù)案例處理輔助功能問(wèn)題。在某些情況下，它不是那么糟糕，例如：

然而，其他多媒體不是那么容易使訪問(wèn)。例如，如果你正在處理沉浸式 3D 游戲或虛擬現(xiàn)實(shí)應(yīng)用，那么為此類體驗(yàn)提供文本替代方案確實(shí)非常困難，你可能會(huì)認(rèn)為盲人用戶實(shí)際上并不在此類應(yīng)用的目標(biāo)受眾范圍內(nèi)。

但是，你可以確保此類應(yīng)用具有足夠的顏色對(duì)比度和清晰的顯示，以便對(duì)視力低下/色盲的人來(lái)說(shuō)可以感知，并且還可以使其鍵盤(pán)可訪問(wèn)。請(qǐng)記住，輔助功能就是盡可能多地做，而不是一直追求 100% 的無(wú)障礙，這通常是不可能的。

總結(jié)

本章概述了多媒體內(nèi)容的無(wú)障礙問(wèn)題，以及一些實(shí)用的解決方案。