Accessible multimedia

多媒體和輔助功能

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

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

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

簡單的圖像

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

例如:

<img src="dinosaur.png"
     >

可訪問的音頻和視頻控制

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

原生HTML5控件的問題

HTML5視頻和音頻實例甚至帶有一組內(nèi)置的控件，允許您直接控制媒體直接開箱。 例如(請參閱 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中看起來像:

alt ="">

alt ="">

但是，這些控件存在問題:

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

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

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

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

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

Basic setup

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

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

我們在視頻下方插入了一些簡單的控制按鈕。 這些控制當(dāng)然不會做任何事情默認(rèn); 添加功能，我們將使用JavaScript。

我們首先需要存儲對每個控件的引用 - 將以下內(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');

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

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

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

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

player.removeAttribute('controls');

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

Wiring up our buttons

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

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

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

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

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

接下來，我們的快退和快進按鈕 - 添加以下塊到代碼的底部:

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

這些都很簡單，只需在每次點擊 currentTime 時添加或減少3秒即可。 在真正的視頻播放器中，您可能需要一個更精細的查找欄或類似的。

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

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

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

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

Further reading

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

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

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

音頻成績單

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

在實際創(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)謄本所需的時間上會有所不同。 如果你付信譽良好的公司做轉(zhuǎn)錄，你可能會迅速完成，并達到高品質(zhì)。 如果你不想為它付費，你可能會以較低的質(zhì)量和/或慢慢完成它。

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

腳本示例

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

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

音頻描述

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

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

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

視頻文本軌道

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

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

alt ="">

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

alt ="">

有不同類型的文本軌道具有不同的目的。 你會遇到的主要是:

• 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

實施HTML5視頻文本軌道

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

典型的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媒體播放一起，您需要:

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

這里有一個例子:

<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)詳情，請參閱為HTML5視頻添加字幕和翻譯字幕。 您可以在Github上找到與本文相關(guān)的示例， 由Ian Devlin撰寫(請參閱源代碼 。)這個例子使用一些JavaScript來讓用戶在不同的字幕之間進行選擇。 請注意，要打開字幕，您需要按"CC"按鈕并選擇一個選項 - English，Deutsch或Espa?ol。

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

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

• HTML5 canvas
• Flash
• Silverlight

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

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

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

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

概要

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