本文章是由機器翻譯。

建置 HTML5 應用程式

以 HTML5 設計協助工具

Rajesh Lal

下載代碼示例

如果你真正感興趣廣泛的聽眾，你就會想要在設計 Web 網站的可訪問性。 協助工具是使 Web 頁易於訪問，便於使用，並向所有人提供。 一般情況下，使用最新的技術使協助工具易於完成。 今天，這意味著使用 HTML5。

可訪問您的內容需要提供一系列廣泛的設備，如普通電腦使用的鍵盤或滑鼠，螢幕閱讀器，音訊的瀏覽器，設備具有有限的頻寬、 舊瀏覽器和電腦和手機和觸摸設備。 此外，應可到達的種類最廣泛的人，包括那些殘疾人士及長者等，以及低識字率或臨時生病，或誰更傾向于使用只有鍵盤或滑鼠的人。

殘疾協助工具的目的位址的四個關鍵領域如下：

• 聆訊
• 行動性
• 認知
• Visual

聽力問題意味著使用者不可能能夠聽到在 Web 網站上的任何聲音。 解決方案是使內容直觀使用文本替代為所有非文本內容，如 sub­標題和字幕。 如果可能的話包括轉錄的語音和手語、。

在這種情況下的流動性問題意味著不能使用滑鼠或鍵盤。 在 Web 上的流動性的解決方案是以使內容可操作性 ； 就是要使所有的功能可訪問從鍵盤單，以及與搖桿，語音辨識和音訊回饋，在可能的情況。 允許的標題和錨點與正確使用導航，使使用者能夠停止基於時間的內容。 不允許在頁面上的任何自動刷新。

認知困難影響內容本身，例如與文本和圖像的大小或顏色對比度。 華麗的圖形和字體類型也可以導致某些使用者的問題。 解決方案是使內容更易於理解。 使用易讀無襯線字體和允許字體調整大小。 使用高顏色前景色和背景之間的對比度。 避免自動刷新、 閃爍的圖像和自動播放的媒體和動畫。 使用多個可視提示和標準圖示來使內容更易於掌握。

視覺問題的範圍可以從沒有能力區分顏色到沒有能力在所有看到的內容。 這類問題的解決方案是使內容魯棒，以便它可以由使用者代理，可靠地解釋，並輕鬆地使用螢幕閱讀器訪問。 使用語義 HTML 和遵循的標準。 使用語法上正確的 HTML，並驗證您的頁面。 在適用的情況下，請使用 lang 屬性和 abbr 標籤。

總之，要易於訪問，web 內容需要作出直觀、 可操作、 可理解和強健。 這些屬性構成的全球資訊網協會 (W3C) 倒入模型，其中授權的資訊和正在呈現給使用者的 UI 元素必須是覺察到他們的感覺; 必須將它們操作 UI ； 一種方式 他們必須能夠瞭解資訊和如何使用的介面元素 ； 和內容是足夠健壯，使他們能夠訪問它使用不同的使用者代理，包括輔助技術 （ATs）。

現在，您瞭解協助工具的基礎，讓我們看看兩個非常重要的概念有關的可訪問 Web 設計：逐步增強和訪問的豐富互聯網應用程式 (ARIAs)。

逐步增強和詠歎調

逐步增強功能是促進協助工具使用語義的 HTML、 樣式表和腳本的 Web 設計方法。 這個想法是創建 Web 網站其中的基本內容是向每個人提供雖然更高級的內容和功能障礙者更多的功能、 更多的頻寬或更先進的工具。 當您創建一個網站時，您首先集中展示內容的最簡單的方式。 您設計使用語義結構化的 HTML 頁。 修改可視內容的所有演示文稿元素 （如粗體或斜體） 在外部樣式表中去。

語義 HTML 是指網頁中的 HTML 標籤應描述的內容就是要用它的意義，而不是其演示文稿的方式。 雖然後載入頁面以及樣式表進行分析和應用訪問，因此應通過外部連結 JavaScript 添加邏輯和 Web 頁的用戶端的行為，應該在 CSS 檔中，去裝修的內容有關的任何資訊。 漸進增強可以確保如果在 JavaScript 檔中有錯誤，仍然載入頁面與適當的樣式。 CSS 檔被忽略 （例如，通過螢幕閱讀器），如果 HTML 頁仍有的所有內容。

所有現代作業系統具有它們自己的可訪問性 Api，其中每個是一套打開方法和公開的閱讀和分析文本瀏覽器介面。 Microsoft 版本是微軟積極協助工具 （MSAA），一部分的 UI 自動化 (UIA) 視窗 ； Linux 具有 IAccessible2 ； 和蘋果依賴于 Mac OS X 協助工具協定 — — 但它們都遵循的詠歎調標準由 W3C 定義 (bit.ly/OlD4lX)。 圖 1 顯示使用者如何可能與使用在設備 （如螢幕閱讀器訪問的 Web 頁進行交互。 這種設備使用協助工具的 Api 訪問 Web 頁。

圖 1 如何的使用者訪問的 Web 頁使用輔助技術

詠歎調是一部分的 W3C Web 協助工具倡議 （圍），並定義要使 Web 內容和 Web 應用程式更易於訪問的方式。 詠歎調用來改善與 HTML、 CSS、 JavaScript，AJAX 和相關的技術開發的動態內容和先進的 UI 控制項的協助工具。 ARIA 現正式 HTML5 規範的一部分，也嵌入在 JQuery、 道場和 YUI 等流行的 JavaScript 庫。 請參閱 bit.ly/b89BEJ 的詳細資訊。

詠歎調使用一組角色、 狀態和屬性公開 Web 頁的可利用性的 Api。 這些角色、 狀態和屬性分配的頁面元素，其中受到安非他明類興奮劑。 最新工具 — — 包括頜骨、 NVDA 和畫外音 — — 支援詠歎調。 讓我們以仔細看看詠歎調。

ARIA 角色

角色中有意義的方式指示元素的類型。 假設螢幕閱讀器遇到一個包含角色頁上的 HTML 元素 = 導航。 螢幕閱讀器會知道此 HTML 元素是用於導航和使用者將能夠訪問直接而不是所有的連結通過按 tab 鍵導航。

ARIA 角色屬性應用到 HTML 元素像這樣：

<div role="XXX"> </div>

在這裡"XXX"是一個值，取決於類型的 HTML 元素和其在頁面上的作用。 它可以使用值的數目 — — 如表單、 導航、 搜索或條 — — 基於它表示的內容。 有三種類型的角色：

• 具有里程碑意義的角色作為導航地標。
• 結構角色定義文檔的結構，並説明組織內容。
• 構件角色由獨立 UI 視窗小部件，以及是兩個或更多獨立小部件的容器的複合部件組成。

圖 2 顯示所有可用的詠歎調的作用值。 有八個具有里程碑意義的角色、 18 結構角色、 25 獨立介面構件角色和九個複合 UI 構件中詠歎調的角色。 你會發現更多的資料 bit.ly/S0HUvi。

圖 2 詠歎調的角色值

與角色不同，詠歎調狀態和屬性都可以設置為每個 HTML 元素的屬性。

詠歎調國家

詠歎調狀態是動態屬性的 HTML 元素的表示與物件關聯的資料，但並不會影響該元素的基本性質。 有兩種類型的詠歎調國家 — — 全球和構件 — — 如中所示圖 3。 全球各國可以應用於任何無論角色是否已應用於該元素的元素。 構件國家是需要使用者交互的 UI 小部件的屬性。

下面顯示詠歎調隱藏屬性：

<div aria-hidden="true">
  <p>Paragraph text here </p>
</div>

此代碼將隱藏從螢幕閱讀器的段落。

詠歎調屬性

詠歎調屬性類似于詠歎調國家但是相對靜態的頁面上，作為附加屬性的 HTML 元素。 構件屬性類似于構件國家但值不會更改頁的範圍內。 有 11 的全域屬性和 14 構件屬性 （請參見圖 3)。

圖 3 詠歎調狀態和屬性

屬性類型	Global	構件
詠歎調國家	詠歎調忙 詠歎調-已禁用 詠歎調抓起 詠歎調隱藏 詠歎調無效	listitem 數學 注意 演示文稿 區域 行 rowheader 分隔符號 工具列
詠歎調屬性	詠歎調-原子 詠歎調控制項 詠歎調-describedby 詠歎調-dropeffect 詠歎調興旺 詠歎調-haspopup 詠歎調標籤 詠歎調-labelledby 詠歎調生活 aria 擁有 詠歎調有關	詠歎調-自動完成功能 詠歎調-haspopup 詠歎調標籤 詠歎調級 詠歎調多行 詠歎調-可多選 詠歎調方向 詠歎調 readonly 詠歎調需 詠歎調排序 詠歎調-valuemax 詠歎調-valuemin 詠歎調-valuenow 詠歎調 valuetext

這裡是詠歎調需構件屬性的一個示例：

<label for="username">User name:</label>
<input id="username" type="text" aria-required="true">

這使得表單所需的輸入的欄位。

圖 3 總結了所有的詠歎調國家和屬性。 訪問 bit.ly/OlbLeh 的詳細資訊。

您現在有了一些熟悉詠歎調和其角色、 狀態和屬性，您可以使用它來創建一個逐步增強可訪問的 Web 網站。

創建可訪問的 Web 網站

一個典型的 Web 網站包含多個元件。 讓我們看看如何創建以下、 保持協助工具的每個心靈和使用 HTML5 和詠歎調：

1. Homepage
2. 帶有徽標的頁眉區
   • 導航功能表
   • 主圖形
   • 主要內容
   • 區塊
   • 連絡人表單
3. FAQ 頁面
4. 關於視頻頁

圖 4 演示我將創建的網站的基本結構。

圖 4 網站地圖的網站示例

圖 5 顯示了典型的主頁佈局為基於產品或服務的網站。 若要創建它，我第一次使用 HTML5 逐步增強，然後使它可以訪問的設備。

圖 5 標準佈局為主頁的

正如您所看到的我已經確定在頁面中的元素的數目：標頭，導航、 調用到行動，主要的圖形，簡要內容、 資訊和頁腳的塊的歡迎消息。

之後逐步增強的原則，我創建一個順序的 HTML5 頁來容納這些元素，使用元素 <header>、 <nav>、 <figure>、 <article>、 <section>、 <aside> 和中所示的 <footer> 圖 6。

圖 6 HTML5 網頁

<!doctype html>
<html lang="en">
<head><title>HTML5 Home Page</title></head>
<body>
  <header><!-- header -->
  <a href="/"><img src="images/logo.png"></a>
  </header>
<nav><!-- navigation -->
<ul>
  <li><a href="/">Home</a></li>
  <li><a href="/contact">Contact</a></li>
  <li><a href="/faq">FAQ</a></li>
  <li><a href="/about">About</a></li>
</ul>
</nav>
<div><!-- main content -->
<section>
  <figure><img src="images/maingraphics.png">
  <figcaption>Welcome image.
More help on image<a href="#/">Help</a></figcaption>
  </figure>
</section>
<section>
  <h2><a href="Action" target="_blank">Subscribe</a></h2>
  <article>
  <h2>Welcome!</h2>
  <p><strong>Lorem Ipsum </strong>is simply dummy text of the printing and … </p>
  </article>
</section>
</div>
<aside><!-- info blocks -->
  <h4>Promotion</h4><ul><li>items</li></ul>
  <h4>Awards</h4><ul><li>items</li></ul>
  <h4>News</h4><ul><li>items</li></ul>
</aside>
<footer><!-- footer -->
  <div>Copyright © 2012</div>
  <div><a href="">Privacy Policy</div>
</footer>
</body>
</html>

此代碼支援最新的瀏覽器，和任何 HTML5 元素不支援預設為 <div> 元素。 例如，如果 <header> 元素不支援，瀏覽器將取代 <div>，就像這樣：

<header><!-- header -->
<a href="/"><img src="images/logo.png"></a>
</header>
<div><!-- header -->
<a href="/"><img src="images/logo.png"></a>
</div>

要允許工具承認的航行地標和文檔的結構部分，添加以下角色的每個元素，如中所示圖 7：

• 頭作用 = 橫幅
• 導航的作用 = 導航
• 主內容作用 = 主
• 部分角色 = 區域
• 第條作用 = 條
• 一邊的作用 = 互補
• 頁腳作用 = contentinfo

圖 7 添加角色

<!doctype html>
<html lang="en">
<head><title> Accessible HTML5 Home Page</title></head>
<body>
  <header role="banner"><!-- header -->
  <a href="/"><img src="images/logo.png"></a>
  </header>
<nav role="navigation"><!-- navigation -->
<ul>
  <li><a href="/">Home</a></li>
  <li><a href="/contact">Contact</a></li>
  <li><a href="/faq">FAQ</a></li>
  <li><a href="/about">About</a></li>
 </ul>
</nav>
<div id="maincontent" role="main"><!-- main content -->
<section>
 <figure><img src="images/maingraphics.png">
 <figcaption>Welcome image.
More help on image<a href="#/">Help</a></figcaption>
 </figure>
</section>
<section role="region">
  <h2><a href="Action" target="_blank">Subscribe</a></h2>
  <article role="article">
  <h2>Welcome!</h2>
  <p><strong>Lorem Ipsum </strong>is simply dummy text of the printing and … </p>
  </article>
</section>
</div>
<aside role="complementary"><!-- info blocks -->
  <h4>Promotion</h4><ul><li>items</li></ul>
  <h4>Awards</h4><ul><li>items</li></ul>
  <h4>News</h4><ul><li>items</li></ul>
</aside>
<footer role="contentinfo"><!-- footer -->
  <div>Copyright © 2012</div>
  <div><a href="">Privacy Policy</div>
</footer>
</body>
</html>

將為所有的瀏覽器樣式的應用，第一步是要讓所有的 HTML5 元素塊級元素在樣式表中，像這樣：

<style>
header,footer,nav,article,aside,section,figure,figcaption{display:block;}
</style>

我包括詠歎調角色，所以對於每個特定的元素應用樣式：

<style>
  header[role="banner"]{/* Styles for banner */}
  header{/* Styles for other headers */}
  #maincontent[role="main"]{ /* Styles for main content */}
  nav[role="navigation"]{/* Styles for navigation */}
  section[role="group"]{/* Styles for section */}
  article[role="article"]{/* Styles for article */}
  aside[role="complementary"]{/* Styles for info blocks */}
  footer[role="contentinfo"]{/* Styles */}
</style>

按順序解析 HTML 頁，是頁的因為放置的 JavaScript 檔的最佳地方是頁的底部後在頁腳。 這樣就可以完全獨立于 JavaScript 的網站 — — JAVA­腳本函數具現化的文檔已準備就緒且完全載入後才。 下面的代碼顯示在我的示例中插入的指令檔：

< 頁腳作用 ="contentinfo"><! — — ><! — — 頁腳-->

<div> 版權所有 © 2012年 </div>

<div> < a href =""> 隱私權原則 </div>

</footer>

< 腳本類型 ="文本/javascript" src="jquery.min.js">< / 腳本 >

< 腳本類型 ="文本/javascript" src="main.js">< / 腳本 >

</body>

</html>

創建可訪問的連絡人表單

表單是一個組成部分的基於 Web 的互動，和 HTML5 有了一些新的輸入的類型和援助協助工具的屬性。 圖 8 列出的那些有關 HTML5 表單。

圖 8 表單輸入類型和屬性

輸入的類型	輸入類型 = 日期時間 輸入類型 = 本地日期時間 輸入類型 = 日期 輸入類型 = 月 輸入類型 = 時間 輸入類型 = 周 輸入類型 = 數	輸入類型 = 範圍 輸入類型 = 電子郵件 輸入類型 = url 輸入類型 = 搜索 輸入類型 = 電話 輸入類型 = 顏色
屬性	自動完成 自動對焦 form 形成 formenctype formmethod formnovalidate	formtarget list 多個 pattern 預留位置 required 一步

協助工具、 表單應限於單一用途。 連絡人頁應包含僅連絡人表單，並沒有其他牽。 這使它更加容易在設備使用的人。

它也是重要的是要使用的適當的輸入的類型。 這提高了設備支援該屬性的使用者體驗。 例如，輸入類型 = 數可以顯示數位小鍵盤，行動裝置，同時輸入類型 = url 顯示一個特殊的".com"按鈕中的許多智慧手機的虛擬鍵盤。

您使用以及 id 標籤中的屬性中的屬性的輸入的元素，如下：

<label for="useremail">Your E-mail:</label>
<input id="useremail" name="useremail" type="email" value=""/>

這將標籤映射到中的輔助設備的輸入元素。 您也可以執行此更具描述性的方式，使用的詠歎調 describedby 屬性。 例如，如果您有一些説明文本的每個輸入欄位，您可以它捆綁起來與輸入文本：

<label for="useremail">Your E-mail:</label>
<input id="useremail" type="email" value="" aria-describedby="helpemail"/>
<p id="helpemail">Your email address will be used for further communication</p>

下一步添加的預留位置和必需的 HTML5 特性 （詠歎調需 ="true"）。 預留位置屬性允許您顯示看起來像什麼有效的輸入和所需的屬性使得在輸入框中所需的欄位：

<label for="useremail">Your E-mail:</label>
<input id="useremail" type="email" placeholder="john@msn.com" required
aria-required="true" value="" aria-describedby="helpemail"/>
<p id="helpemail">Your email address will be used for further communication</p>

請注意該預留位置不是標籤。 並請記住如果您使用一個星號與文本來表示必填的欄位，星號由螢幕閱讀器讀取每個欄位後，為視障人士提供差 UX。 相反，使用必需的詠歎調欄位屬性，它告訴 AT 設備欄位是必需的並使用一種背景顏色或圖像，而不是星號來向使用者指示的。

您還可以添加自動對焦屬性，加以援手將焦點設置到該表單的第一個元素。

圖 9 顯示了創建可訪問的連絡人 HTML5 表單、 代碼和圖 10 顯示連絡人表單。

圖 9 創建 HTML5 連絡人表單

<div id="contact" role="main"><!-- main content -->
  <!-- content -->
    <section id="content">
      <article>
        <h2>Contact <span>Form</span></h2>
        <form id="contacts-form" action="" method="post">
          <fieldset>
            <div class="field">
              <label for="name" >Name </label>
              <input id="name" placeholder="John Smith" autofocus required
                aria-required="true" type="text" value="" />
            </div>
            <div class="field">
              <label for="email">E-mail</label>
              <input id="email" placeholder="john@msn.com" type="email" required
                aria-required="true" value=""/>
            </div>
            <div class="field">
              <label for="website">Website</label>
              <input id="website" placeholder="http://website.com"
                type="url" />
            </div>
            <div class="field">
              <label for="message">Message</label>
              <textarea id="message"
                placeholder="Write your message Here!" required
                aria-required="true" ></textarea>
            </div>
            <div><a href="#" onclick="submit()">Send Your Message!</a></div>
          </fieldset>
        </form>
      </article>
    </section>
</div>

圖 10 在瀏覽器中的連絡人表單頁

更新可以是困難的殘疾人，但活區域可以使輔助設備更新意識到當你使用的詠歎調生活狀態、 日誌和警報的角色屬性：

• 詠歎調生活 ="off"：更新不公佈 (該區域不是活的)
• 詠歎調生活 ="有禮貌"：更新使用者空閒時公佈
• 詠歎調生活 ="武斷"：更高的優先順序，但更新不一定立即宣佈
• 角色 ="登錄"，角色 ="地位"和作用 ="通知"對不同類型的消息

這裡是這融入的 HTML 代碼的簡單方法：

<div id="liveregion" role="log" aria-live="polite">

現在讓我們看看 FAQ 頁面具有可訪問的內容。

使用圖像創建可訪問的 FAQ 頁面

FAQ 頁是許多 Web 網站的訪問次數最多的網頁之間。 FAQ 可能包含文本、 表、 連結、 圖像和標題，和所有這些都應是可訪問。 讓我們看看如何可以完成此操作。 第一，HTML 內容應包含唯一的語義的 HTML 標籤，而任何裝飾元素應該在樣式表中去。 所以，而不是：

<i>italics</i>

您使用：

<em>emphasized</em>
  <cite>citation</cite>

和而不是：

<b>bold</b>

您使用：

<strong>strong</strong>

請注意這些元素添加到內容的含義，並且由螢幕閱讀器以不同的方式解釋。 例如，某些螢幕閱讀器將更改為 <strong> 行情 元素而不是 <b> 元素。

它也是重要的是要正確地使用標題相關的標題元素，如 <h1>，<h2> 等等。 理想情況下，您應使用一個 <h1> 在頁和多個小標題作為所需的標題。 請確保您有結束標記為每個 HTML 元素。 此外請確保正確關閉所有的有序和無序的清單。 標準做法也表明你小寫的所有標記和正確地嵌套它們。 圖 11 給出了示例。

圖 11 FAQ 頁面標記

<h1>FAQ</h1>
  <h2>List of frequently asked questions</h2>
    <ul>
    <li><a href="#q1">Accessible Text</a></li>
    <li><a href="#q2">Accessible Tables</a></li>
    <li><a href="#q3">Accessible Links</a></li>
    <li><a href="#q4">Accessible Images</a></li>
    <li><a href="#q5">Accessible Titles</a></li>
    </ul>
  <h2 id="q1">Accessible Text</h2>
    <h3>Semantic HTML</h3>
    <h3>Proper hierarchy</h3>
    <h3>Localized content</h3>
    <h3>Acronym</h3>
    <h3>Font-size</h3>
    <h3>Color</h3>
  <h2 id="q2">Accessible Table</h2>
  <h2 id="q3">Accessible Links</h2>
  <h2 id="q4">Accessible Images</h2>
  <h2 id="q5">Accessible Titles</h2>

若要創建當地語系化的內容，您可以設置在全球 <html> 中使用的 lang 屬性頁的語言 元素：

<html lang="en">

對於在不同語言中的內容，在 <p> 內使用郎 或者 <span> 元素，像這樣：

<p><span lang="la">Carpe diem </span>(seize the day)</p>

和使用縮寫詞 abbr 標籤：

<p>The <abbr title="World Wide Web Consortium">W3C</abbr> was founded in 1994.</p>

您的字體大小應該始終是內容的相對的。 永遠不要使用絕對或固定的大小，這就限制了瀏覽器的字體縮放功能。 使用下列方法之一來增加或減少從瀏覽器的預設字型大小：

• 百分比 （%）
• em （相對於大寫的 M 的大小）
• ex （相對於 X 資本的大小）
• 關鍵字 （小型、 中型、 較大、 較小、 較大和等等）

以下為範例：

font-size:100%;
  line-height:1.125em;

顏色應作為視覺説明的內容和不應提出資訊單獨使用­資訊。 前臺和後臺之間高顏色對比度是重要的是要使頁面可訪問的。 W3C 建議 4.5 至 1 為普通文本和較大的文本 3 對 1 的對比度。

表單驗證，個別的輸入的元素可能會顯示為彩色，表示發生了錯誤，這可能不是對色盲使用者可見的背景。 請確保您有多個相同的資訊，如標籤指示該錯誤提示。

當您在樣式表中使用的顏色時，設置要使用互補色的背景色元素。 有些人可以閱讀更多輕鬆黑色背景，所以允許更改的頁面顏色較暗的主題。 以下為範例：

body {
  font-family:Arial, Helvetica, sans-serif;
  font-size:100%;
  line-height:1.125em;
  background-color:#212222;
  color:#242424;
}

標準表一般有一個標題列和可能是頁腳行，但區分這些不可能用簡單的表格標記。 HTML5，不過，帶來了許多有用的新標記：

• <caption> 是的表標題
• <details> 顯示附加的詳細資訊，使用者可以查看或隱藏需求
• <summary> 被宣佈之前由螢幕閱讀器讀取真實表資料
• <thead> 指示表格表頭行
• <tfoot> 指示表頁腳行

圖 12 演示代碼示例 HTML 表是可以訪問的設備。

圖 12 可訪問的表

<h4>Table with Caption, Summary and Details</h4>
<table>
  <caption>
    <strong>Lorem Ipsum.</strong>
    <details>
      <summary>Help</summary>
      <p><strong>Lorem Ipsum </strong>is simply dummy text of the printing and </p>
     </details>
  </caption>
  <thead>
    <tr>
      <th>Table header column 1</th>
      <th>Table header column 2</th>
      <th>Table header column 3</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Table footer column 1</td>
      <td>Table footer column 2</td>
      <td>Table footer column 3</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Table data column 1</td>
      <td>Table data column 2</td>
      <td>Table data column 3</td>
    </tr>
  </tbody>
</table>

當創建連結，避免使用泛型的"按一下此處"和"查看更多"連結。 使用 title 屬性和有意義的錨文本。 這裡有一個正確的方法來添加連結：

<p>Designandmethod.com has an article on accessibility.
See the <a title="click for more information at the Design & Method Web site" href="http://designandmethod.com">Big picture at Design and Method</a></p>

小心使用 ASCII 符號。 當您有多個頁面時，避免使用較大-大於和小於-比符號 (> 和 <) 向前和向後轉到下一組專案。 相反，使用清晰的文本，如"下一步 10 項"和"上一頁 10 專案"。請注意它可能似乎邏輯使用更大-比 breadcrumb 導航，但不幸的是，螢幕閱讀器中的符號將讀取"下一步 >>"作為"下一步、 大於、 大於，"這不是有用。 如果您的設計要求使用 CSS 背景圖像">."

最後，應該強調的連結。 這有助於色盲使用者確定的文本是一個連結。 您可以在使用裝飾的樣式表中：

{
  text-decoration: underline;
  display:block;
  border-bottom:1px solid #000;
}

要使圖像可訪問，開始與有意義的 alt 屬性和使用空的 alt (alt =""） 用於裝飾的圖像。 一定要包括標題屬性 — — 它顯示為工具提示，並且如果 alt 屬性不是可由螢幕閱讀器簽。 如果找到了，alt 鍵和標題都沒有屬性，在設備將宣佈的圖像的名稱，所以一定要給圖像有意義的名稱。

使用角色 = 演示文稿為圖像或不是與設備有關的任何元素。 如果您要包括圖像地圖，每個區域使用 alt 鍵。 您還可以使用的圖和 figcaption 標記的圖像。 使動畫的圖像減至最低 ； 他們可以為癲癇患者導致緝獲量。

下面的示例演示如何使圖像可訪問：

<figure><img src="images/maingraphics.png" alt="Example screen shot" title="main graphics showing screenshot example"><figcaption>Image with caption.</figcaption></figure>

這裡是一個影像地圖的代碼：

<area shape=rect coords=0,0,10,10 href="example.htm" alt="example">

創建可訪問內容的最後一個點是包括相關關鍵字的標題開頭。 在開始可説明視障的使用者更快地通過他們撇去有簡明的標題與相關的關鍵字。

在以下示例中，具有冗余"如何製作"中每個標題似乎更具可讀性，但螢幕閱讀器將重複那些第一次三個字的每個標題，也難以快速流覽內容的使用者。 使用精確和相關關鍵字的標題開頭，使得更易於訪問：

<a href="#q1"><!--How to make content Accessible-->Accessible Content</a>
<a href="#q2"><!--How to make links Accessible-->Accessible Links</a>
<a href="#q3"><!--How to make images Accessible-->Accessible Image</a>
<a href="#q4"><!--How to make titles Accessible-->Accessible Titles</a>

現在讓我們看一個關於頁面添加到可訪問的 Web 網站的快速看 — — 一個包含音訊和視頻。 讓我們看看所需要，使音訊和視頻元素可以訪問。

關於音訊和視頻頁的可訪問

假設我想要我關於頁面來包含的視頻解釋建國我的 Web 網站。 <audio> 和 <video> 在 HTML5 中的標記可以容易地嵌入多媒體內容在 Web 頁中，但這樣做會創建訪問的挑戰內容為那些非母語學習者、 失聰或聽力障礙、 失明、 或任何人可能已經斷開揚聲器或將在喧鬧的環境中。 有這些挑戰的每個具體的指引。 下面是一些如何使音訊和視頻內容可訪問：

• 在 HTML 格式中包括文本成績單的音訊或視頻。
• 包括瀏覽器不支援媒體標籤替代內容。
• 控制項應至少有一個開/關按鈕。
• 媒體應自動啟動，但應該是使用者啟動。
• 提供下載媒體檔案的連結。
• 提供字幕 （字幕或字幕） 使用視頻/音訊軌道。

字幕通常是在視頻中，這可以説明使用者瞭解內容說出的單詞的時間對齊轉錄。 對於聾的使用者，題注是更好的解決方案，因為它們包括抄錄的噪音、 聲音效果、 音樂和之類的以及說出的話。

現在，我們具有標題和副標題支援使用跟蹤元素和下列格式：

• WebVTT 為視頻內容加字幕
• SMPTE TT，加上字幕的計時文本格式
• SRT，字幕檔

對於視頻仍然是進展中的工作，但在這裡是一個示例，請注意該協助工具支援：

<video controls>
<source src="video-file.mp4" type="video/mp4"/>
<track src="en.vtt" kind="subtitles" srclang="en"
label="English p subtitles" default/>
<track src="en.ttml" kind="captions" srclang="en"
label="English p captions" default/>
</video>

雖然沒有對媒體進行精確控制，HTML5 已經顯示的媒體元件用於控制項的控制項屬性。 這些控制項是由鍵盤訪問：

• 空格鍵播放和暫停之間進行切換。
• 左、 右箭頭 5 秒風視頻向前和向後。
• CTRL + 左的箭頭或右箭頭風視頻向前或向後的 60 秒。
• 首頁 + 左的箭頭或右方向鍵將跳到開頭或結尾的視頻。
• 如果音量按鈕具有焦點，向上和向下箭頭增加和減小音量。

在 Visual Studio 2012 中的協助工具支援

你會樂於知道 Visual Studio 2012 使協助工具更容易。 現在有智慧感知詠歎調角色、 屬性和屬性中的 HTML 元素如中所示圖 13 和圖 14。

圖 13 智慧感知支援 Visual Studio 2012 年詠歎調角色

圖 14 詠歎調屬性支援的智慧感知

創建可訪問的 Web 頁後，您需要檢查，以確保它實際上符合協助工具要求。 與 Visual Studio 2012，你可以如此輕易頁上按右鍵，選擇檢查協助工具，如中所示圖 15。

圖 15 您可以檢查協助工具的 Web 頁在 Visual Studio 2012 年

然後，您選擇您想要針對檢查的 Web 內容協助工具準則或 WCAG，級別：優先順序 1 或優先 2 （見 bit.ly/S0Nb66)。 您還可以對訪問板條 508，指的是由美國政府的康復法案第 508 條中定義的標準檢查 (section508.gov)。 一旦選擇了該準則，Visual Studio 2012 檢查所有的 HTML 元素，並對任何錯誤或警告在頁中，顯示一個詳細的報告，如下所示在圖 16。

Visual Studio 2012 年圖 16 Web 內容可訪問性報告

您現在已經學習了如何創建可訪問的 Web 網站使用 HTML5，和你已經看到如何幫一些 Visual Studio 2012 協助工具。 這些應該是有用的附加物，向您的工具箱，因為您流覽協助工具的 Web。

Rajesh Lal 在諾基亞工作，是對 HTML5 和 Web 技術充滿熱情。在 Windows 小工具、 Web 組件、 移動 Web 和 Silverlight 技術上，他寫了多個書籍。要討論軟體設計和方法中的協助工具，請訪問 dsgnmthd.com/accessibility。關於作者的資訊，請檢查 iRajLal.com。

感謝以下技術專家對本文的審閱：藝術巴斯，Lakshmi C. Chava 和鄧尼斯 Lembrée