Accessible multimedia

多媒體和輔助功能

到目前為止，在這個(gè)模塊中，我們已經(jīng)查看了各種內(nèi)容以及需要做什么以確保其可訪問(wèn)性，從簡(jiǎn)單的文本內(nèi)容到數(shù)據(jù)表，圖像，原生控件(如表單元素和按鈕)，甚至更復(fù)雜的標(biāo)記結(jié)構(gòu) (使用 WAI-ARIA 屬性)。

這篇文章另一方面看另一個(gè)一般類(lèi)的內(nèi)容，可以說(shuō)不容易確保 - 多媒體的可訪問(wèn)性。 圖片，視頻， JavaScript)。例如，它可以用于繪制圖形，制作照片組合，甚至執(zhí)行動(dòng)畫(huà)。您可以(并且應(yīng)該)在畫(huà)布?jí)K中提供替代內(nèi)容。該內(nèi)容將在不支持的舊版瀏覽器 畫(huà)布和禁用JavaScript的瀏覽器"> < canvas> 元素，F(xiàn)lash電影等不容易被屏幕閱讀器理解或通過(guò)鍵盤(pán)導(dǎo)航， 給他們一個(gè)幫手。

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

簡(jiǎn)單的圖像

我們已在 HTML:良好的無(wú)障礙基礎(chǔ)文章中介紹了HTML圖片的簡(jiǎn)單文字替代方法，您可以參考此處的完整詳細(xì)信息。 簡(jiǎn)而言之，您應(yīng)該確保在可能的情況下，可視內(nèi)容具有可供屏幕閱讀器拾取和閱讀其他用戶的替代文字。

例如:

<img src="dinosaur.png"
     >

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

實(shí)現(xiàn)基于Web的音頻/視頻控制不應(yīng)該是一個(gè)問(wèn)題，對(duì)吧？ 讓我們調(diào)查。

原生HTML5控件的問(wèn)題

HTML5視頻和音頻實(shí)例甚至帶有一組內(nèi)置的控件，允許您直接控制媒體直接開(kāi)箱。 例如(請(qǐng)參閱 native-controls.html ="external">源代碼和 live a>):

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

controls屬性提供播放/暫停按鈕，搜索欄等 - 您希望從媒體播放器的基本控制。 在Firefox和Chrome中看起來(lái)像:

alt ="">

alt ="">

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

• They are not keyboard accessible, in any browser except for Opera
• Different browsers give the native controls differing styling and functionality, and they aren't stylable, meaning that they can't be easily made to follow a site style guide.

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

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

HTML5視頻和音頻共享一個(gè)API - HTML媒體元素 - 它允許您將自定義功能映射到按鈕和其他控件 - 兩者都是您自己定義的。

讓我們從上面的視頻示例，并添加自定義控件到他們。

Basic setup

首先，請(qǐng)獲取我們的 custom- controls-start.html ， custom -controls.css ， rabbit320.mp4 / a>和 rabbit320.webm 文件 并將它們保存在硬盤(pán)驅(qū)動(dòng)器上的新目錄中。

創(chuàng)建一個(gè)名為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 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 basic setup

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

我們首先需要存儲(chǔ)對(duì)每個(gè)控件的引用 - 將以下內(nèi)容添加到JavaScript文件的頂部:

var playPauseBtn = document.querySelector('.playpause');
var stopBtn = document.querySelector('.stop');
var rwdBtn = document.querySelector('.rwd');
var fwdBtn = document.querySelector('.fwd');
var timeLabel = document.querySelector('.time');

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

var player = document.querySelector('video');

它保存了對(duì) HTMLVideoElement和HTMLAudioElement元素都繼承此接口。"> HTMLMediaElement 對(duì)象，它有幾個(gè)有用的屬性和方法可以在其上 用于將功能連接到我們的按鈕。

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

player.removeAttribute('controls');

這樣做這種方式，而不僅僅是不包括controls屬性在第一位有優(yōu)點(diǎn)，如果我們的JavaScript失敗，任何原因，用戶仍然有一些控件可用。

Wiring up our buttons

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

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

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

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

stop()函數(shù)HTMLMediaElement接口添加 HTMLElement支持與音頻和視頻通用的基本媒體相關(guān)功能所需的屬性和方法。HTMLVideoElement和HTMLAudioElement元素均繼承此接口"> HTMLMediaElement ， 我們 pause()，并同時(shí)將 currentTime 設(shè)置為0。

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

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

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

這些都很簡(jiǎn)單，只需在每次點(diǎn)擊 currentTime 時(shí)添加或減少3秒即可。 在真正的視頻播放器中，您可能需要一個(gè)更精細(xì)的查找欄或類(lèi)似的。

注意，當(dāng)按下Fwd按鈕時(shí)，我們還檢查 currentTime 是否大于總媒體 duration ，或者媒體是否正在播放。 如果任一條件為真，我們只需停止視頻，避免用戶界面出現(xiàn)錯(cuò)誤，如果他們嘗試在視頻未播放時(shí)快進(jìn)，或快進(jìn)超過(guò)視頻結(jié)尾。

最后，將以下代碼添加到代碼的末尾，以控制顯示的時(shí)間:

player.ontimeupdate = function() {
  var minutes = Math.floor(player.currentTime / 60);
  var seconds = Math.floor(player.currentTime - minutes * 60);
  var minuteValue;
  var secondValue;

  if (minutes<10) {
    minuteValue = "0" + minutes;
  } else {
    minuteValue = minutes;
  }

  if (seconds<10) {
    secondValue = "0" + seconds;
  } else {
    secondValue = seconds;
  }

  mediaTime = minuteValue + ":" + secondValue;
  timeLabel.textContent = mediaTime;
};

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

Further reading

這為您提供了如何向視頻/音頻播放器實(shí)例添加自定義播放器功能的基本概念。 有關(guān)如何向視頻/音頻播放器添加更復(fù)雜的功能(包括舊版瀏覽器的Flash后備功能)的詳情，請(qǐng)參閱:

• Audio and video delivery
• Video player styling basics
• Creating a cross-browser video player

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

音頻成績(jī)單

為了向聾人提供音頻內(nèi)容的訪問(wèn)，你真的需要?jiǎng)?chuàng)建文本記錄。 這些可以以某種方式包含在與音頻相同的頁(yè)面上，或包含在單獨(dú)的頁(yè)面上并鏈接到。

在實(shí)際創(chuàng)建抄本方面，您的選擇是:

• Commercial services — You could pay a professional to do the transcription, see for example companies like Scribie, Casting Words, or Rev. Look around and ask advice to make sure you find a reputable company that you'll be able to work with effectively.
• Community/grass roots/self transcription — If you are part of an active community or team in your workplace, then you could ask them for help with doing the translations. You could even have a go at doing them yourself.
• Automated services — There are automated services available, for example when you upload a video to YouTube you can choose to generate automated captions/transcripts. Depending on how clear the spoken audio is, the resulting transcript quality will vary greatly.

與生活中的大多數(shù)事情一樣，你傾向于得到你付出的東西; 不同的服務(wù)在準(zhǔn)確性和生產(chǎn)謄本所需的時(shí)間上會(huì)有所不同。 如果你付信譽(yù)良好的公司做轉(zhuǎn)錄，你可能會(huì)迅速完成，并達(dá)到高品質(zhì)。 如果你不想為它付費(fèi)，你可能會(huì)以較低的質(zhì)量和/或慢慢完成它。

發(fā)布音頻資源，但是承諾稍后發(fā)布文本是不行的 - 這樣的承諾通常不會(huì)保留，這將損害您和您的用戶之間的信任。 如果您所呈現(xiàn)的音頻類(lèi)似于面對(duì)面的會(huì)議或現(xiàn)場(chǎng)演唱，可以在演奏期間記錄筆記，與音頻一起完整發(fā)布，然后尋求幫助清理筆記。

腳本示例

如果您使用自動(dòng)服務(wù)，則可能需要使用該工具提供的用戶界面。 例如，請(qǐng)查看音頻錄音示例1 ，然后選擇更多> 腳本。

如果您正在創(chuàng)建自己的用戶界面來(lái)呈現(xiàn)您的音頻和相關(guān)的成績(jī)單，您可以隨意做，但將它包含在可顯示/可隱藏的面板中可能是有意義的; 請(qǐng)參閱我們的 audio-transcript-ui 示例(也 請(qǐng)參閱源代碼)。

音頻描述

如果您的音頻伴有視覺(jué)效果，您需要提供某種類(lèi)型的音頻描述來(lái)描述額外的內(nèi)容。

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

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

視頻文本軌道

為了讓聾人，盲人或其他群組的用戶(例如低帶寬用戶或不了解視頻錄制語(yǔ)言的用戶)訪問(wèn)視頻，您需要在視頻內(nèi)容中添加文字軌道。

這不是一個(gè)新的概念 - 電視服務(wù)已經(jīng)有相當(dāng)長(zhǎng)的時(shí)間可用的字幕:

alt ="">

然而，許多國(guó)家提供以他們自己的母語(yǔ)編寫(xiě)的字幕的英語(yǔ)電影，并且不同的語(yǔ)言字幕通常在DVD上可用，例如

alt ="">

有不同類(lèi)型的文本軌道具有不同的目的。 你會(huì)遇到的主要是:

• Captions — There for the benefit of deaf users who can't hear the audio track, including the words being spoken, and contextual information such as who spoke the words, if the people were angry or sad, and what mood the music is currently creating.
• Subtitles — Include translations of the audio dialog, for users that don't understand the language being spoken.
• Descriptions — These include descriptions for blind people who can't see the video, for example what the scene looks like.
• Chapter titles — Chapter markers intended to help the user navigate the media resource

實(shí)施HTML5視頻文本軌道

用于使用HTML5視頻顯示的文本軌跡需要用WebVTT編寫(xiě)，該文本格式包含多個(gè)文本字符串以及元數(shù)據(jù)，例如視頻中您希望每個(gè)文本字符串顯示的時(shí)間，甚至有限的樣式/定位信息。 這些文本字符串稱(chēng)為線索。

典型的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.

  ...

要使這個(gè)顯示與HTML媒體播放一起，您需要:

• Save it as a .vtt file in a sensible place.
• Link to the .vtt file with the <track> element. <track> should be placed within <audio> or <video>, but after all <source> elements. Use the kind attribute to specify whether the cues are subtitles, captions, or descriptions. Furthermore, use srclang to tell the browser what language you have written the subtitles in.

這里有一個(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>

這將導(dǎo)致顯示字幕的視頻，如下所示:

>

有關(guān)詳情，請(qǐng)參閱為HTML5視頻添加字幕和翻譯字幕。 您可以在Github上找到與本文相關(guān)的示例， 由Ian Devlin撰寫(xiě)(請(qǐng)參閱源代碼 。)這個(gè)例子使用一些JavaScript來(lái)讓用戶在不同的字幕之間進(jìn)行選擇。 請(qǐng)注意，要打開(kāi)字幕，您需要按"CC"按鈕并選擇一個(gè)選項(xiàng) - English，Deutsch或Espa?ol。

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

以上部分不包括您可能想要放在網(wǎng)頁(yè)上的所有類(lèi)型的多媒體內(nèi)容。 您可能還需要處理游戲，動(dòng)畫(huà)，幻燈片，嵌入式視頻和使用其他可用技術(shù)創(chuàng)建的內(nèi)容，例如:

• HTML5 canvas
• Flash
• Silverlight

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

• If you are embedding audio content using a plugin technology like Flash or Silverlight, you can probably just provide an audio transcript in the same manner as we already showed above in the Transcript examples section.
• If you are embedding video content using a plugin technology like Flash or Silverlight, you can take advantage of captioning/subtitling techniques available to those technologies. For example, see Flash captions, Using the Flash-Only Player API for Closed Captioning, or Playing Subtitles with Videos in Silverlight.

然而，其他多媒體并不容易訪問(wèn)。 例如，如果你正在處理一個(gè)身臨其境的3D游戲或虛擬現(xiàn)實(shí)應(yīng)用程序，真的很難提供文本替代這種體驗(yàn)，你可能會(huì)認(rèn)為盲人用戶并不真正在這樣的應(yīng)用程序的目標(biāo)觀眾包括。

然而，你可以確保這樣的應(yīng)用程序具有足夠好的顏色對(duì)比度和清晰的表現(xiàn)，所以它是可感知的那些低視力/色盲，并使它鍵盤(pán)可訪問(wèn)。 記住，無(wú)障礙是關(guān)于盡可能多的做，而不是努力100％的可訪問(wèn)性，所有的時(shí)間，這通常是不可能的。

概要

本章提供了多媒體內(nèi)容的輔助功能問(wèn)題的摘要，以及一些實(shí)用的解決方案。