發行項
04/14/2015

本文章是由機器翻譯。

現代化應用程式

設計及開發無障礙現代化應用程式

Rachel Appel 技術還有什麼意義 — — 互聯網、應用程式和各種形式的媒體 — — 除非是一個人類的益處？不幸的是，還有大量的軟體在那裡，不會惠及全體人民。設計師、管理和開發者通常更關注安全和性能比協助工具。可訪問性通常是在軟體中，較低的優先順序，如果甚至是一個優先事項。

可訪問性應是更高的優先順序。WebAIM 估計 20%的網路使用者有需要的協助工具或依靠輔助技術。那是超過 6000 萬人民在僅美國就有可能使用您的 Web 網站或應用程式或消耗您的內容的困難。對於大多數 Web 網站和應用程式，而丟失的客戶的直接等於失去的收入。我的 PDF，"輔助的重要性"，說明了無障礙設計的很多其他原因（下載它在 bit.ly/1CIx4k4)。

可訪問性的 Abc

當設計和開發在頭腦中的可訪問性，請考慮廣泛類別的缺陷：

視覺：有視覺障礙範圍從低視力的盲目性，包括光譜的紅綠色盲的人。
聽力：聽力受損的人可能是聽力困難或完全失聰。
電動機：有很多人肢體殘疾。一些遭受的總損失或使用的肢體。其他人可能有神經病變的事故或疾病。有運動障礙的人可能一共需要專門的輸入的設備。
認知：人有學習障礙，包括多動症、誦讀困難，往往很難消費資訊，具體取決於其演示文稿。

很多人需要某種形式的輔助技術。輔助技術是任何工具或技術用於協助在日常活動中，使他們更容易或不可能。人們很少考慮眼鏡是一種輔助的技術，但他們是 — — 儘管在低端的技術規模。一些技術使用者根本無法正常工作沒有他們的眼鏡。常用的輔助技術包括盲文讀者，嘴棍棒、頭魔杖、自我調整鍵盤、語音辨識軟體等。

可訪問的內容和設計

你會發現最容易的設計通常被認為是偉大的設計。太多的網站都有太多的廣告塞進的內容，這極大地擾亂了讀者的流的流動。別人有難使用功能表和導航方面。佈局和 Web 網站或應用程式中的導航時重要的考慮因素，考慮協助工具需要人。

當組織內容，將其拆分為不同的部分，用明確的標題。電影、音樂和動畫應包括標題或謄本，作為他們的內容的一部分。大多數的電影-今天提供軟體允許您輸入成績單的字幕。

好的設計也意味著一貫的、明確的導航方案。JavaScript 的級聯功能表往往難以為使用者提供沒有殘疾。他們為那些有運動障礙更糟。在頂部，或者下一個 Web 頁的一側的連結最好工作。在手機應用程式，你會想要去與目標設備的導航方案。更多關於導航視窗中 8.x 版，請看我的 2013 年 8 月專欄"導航要素在 Windows 應用商店應用程式"(msdn.microsoft.com/magazine/dn342878)。

字體應該是大而清晰。像腳本字體都是更難閱讀。有很多事情，可以引起一種字體以不是很清楚的幾封信。一是學習的紊亂症，導致無法區分字母看起來很像。估計的 5%的人口有讀寫障礙。面對非困難者的一種方法的字母看起來翻轉和落後到讀寫困難者。

利用這一知識關於讀寫困難者，人們對在 dyslexiefont.com 創建略有改變字母，所以他們更容易讀寫困難者閱讀的字體。到目前為止，字體測試人員報告他們喜歡它。你可以選擇不使用 dyslexiefont，這是確定。這並不意味著你要冷落困難者。但是，一定要選擇是盡可能容易閱讀的字體。

你可能想要重新考慮更改您的字體，如果您的應用程式為目標的企業家。字體顏色也應該有高對比。高對比的一個好例子是帶有深色或黑色文本的淺色或白色的背景。完全相反也是正確的。在深色背景上使用淺色文本也很不錯。通常它是生死攸關的喜好和風格，若要使用，只要有足夠的對比度。

你不能出錯，移動第一個設計策略。移動-第一次設計通常迫使你最好盡可能利用空間。大多數手機和小平板電腦只有幾英寸的空間的內容。這意味著應用程式通常只提供了最關鍵的資訊。在這種情況下，只是沒有餘地垂直廣告。

有您可以按照其他還有助於確保可訪問性的好的設計實踐。想想最受歡迎的新聞和社交網站，在網站上。其中許多人不能訪問，只可由訪問或很小的程度。他們通常包含快顯視窗會礙事，可以完全停止螢幕閱讀器和人類相似。這些相同的快顯視窗經常有微小的關閉按鈕，很難找到，而且無法按一下或點擊 — — 即使是使用主流的裝置。

其它的採用循序的快顯視窗。當你終於擺脫一個彈出式功能表；另一個需要它的地方。這是令人沮喪。許多人具有可訪問性需要拒絕訪問這些網站，因為他們只是不值得的麻煩。

避免閃光燈效果、閃爍效果或圖像閃爍不發出警告。這造成扣押的風險。另外，這些是通常令人討厭的除非他們特別本該是光學錯覺或視覺把戲。

Don不使用者顏色來傳達您的資訊給使用者。例如，許多形式使用紅色的字體來表示必填的欄位。色盲的人無法看到這種差別。Don不只是用了一句"點擊這裡"作為連結文本。這根本不會説明螢幕閱讀器。使用描述性的東西代替。

程式可以存取碼

那裡程式設計的技巧，你可以用來開發可訪問的 Web 網站和應用程式。作為開發人員，您需要與輸入和輸出進行交互。這意味著你應該牢記，不同的人需要不同的方式與您的軟體，而不是只是滑鼠和鍵盤進行交互。

對於那些主要或專門使用鍵盤的人，確保欄位選項卡訂單的率直和順序。你應該也貼上標籤欄位和元素（例如按鈕使用 HTML < 標籤 > 元素。這將確保更清晰。圖像應具有 alt 屬性設置為描述性的東西尚未簡潔。螢幕閱讀器不能神奇地讀取圖像，所以他們使用 alt 標籤來描述圖像的攔截器。

HTML5 包含一組稱為語義元素的元素。這些點是使人類和機器可以輕鬆地閱讀和理解 HTML 元素。語義元素描述其內容很像 XML。例如，任何人都可以理解以下的語義元素只靠讀它們：標題、圖、條、頁腳、標題、摘要、時間、導航、馬克和主，僅舉幾例。

對於那些依賴螢幕閱讀器跳過連結是大救星。跳轉的連結讓讀者通過導航元素和廣告在網站上，直接進入所需的內容。不必坐通過多個令人痛苦的沒有必要反覆運算的選擇和廣告都不好玩。Don不強制使用者坐這種痛苦的經歷。緊接 < 身體 > 元素是主跳過導航連結在哪裡，如以下代碼所示：

<body>
<a href="#maincontent">Skip to main content</a>
<nav><!-- navigation here --></nav>
<main id="maincontent">
<p>The quick brown fox jumps over the lazy dog.</p>

當螢幕閱讀器看見跳轉的連結時，它著重于跳轉的連結是指通過其 id 的元素。這就意味著在前面的示例中，跳轉的連結指向 < 主要 > 元素的 id 為"網站導覽。"因為跳過連結必須是第一個元素和許多設計師喜歡跳轉的連結到別的地方去，你可以隱藏它，但使其可見到一些 css 的輔助技術，在此代碼中所示：

.skiplink-offscreen {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

正如你所看到的它是絕對位置的類別選取器值屬性設置為-10000px。它的氾濫是隱藏的。該代碼定位使用此選擇器在使用者將永遠不會看到它，但螢幕閱讀器會的元素。螢幕閱讀器跳過元素具有隱藏或顯示內容設置為隱藏或根本沒有。這就是為什麼你應該用這個小小的手腳。

詠歎調與發展

訪問富互聯網應用程式 (ARIA) 是一套標準的屬性可以應用於 HTML 的標記，説明有效地工作的輔助技術。與詠歎調，您可以定義元素的其狀態、屬性或角色。從這一資訊，螢幕閱讀器可以確定軟體做什麼。

例如，核取方塊可能有詠歎調檢查狀態。或元素可能承擔一個功能表的作用。這位狀態或角色相關的額外資訊有助於構建更好的代表性的 Web 頁內容的螢幕閱讀器。這些屬性不更改的元素，但他們做更多是語義的性質的行為的元素。語義標記容易對人和機器都能理解。例如，下面的代碼顯示一篇文章是語義，所以螢幕閱讀器可以更好地識別相關的內容，並向使用者傳達的一段：

<article>
<section aria-labelledby="ProgrammingBestPractices">
  <h2 id="ProgrammingBestPractices">Best Practices for Programmers</h2>
  <ol>
  <li>Take a few minutes a day to refactor small portions of code.</li>
  <li>Learn a new programming language every year.</li>
  </ol>
</section>
</article>

您可以將此語義和訪問標記擴展到 HTML 表單。螢幕閱讀器需要知道哪些元素標籤或描述表單欄位和哪些欄位作為一個群體在一起。按鈕和核取方塊的狀態是其他螢幕閱讀器必須知道的事情。好的表單設計意味著知道腳本是如何影響輔助技術。你可能想要重新考慮自動將焦點設置到控制項或表單控制項的狀態動態更改的代碼。

使用 HTML < 標籤 > 要對單個標籤的單個表單元素的標籤的元素。然而，將會有的時間當你需要標籤元素有多個標籤，如在表中。這是沒有問題。詠歎調 labelledby 屬性適用于這些情況。會做的標籤的元素的給 ids 組中設置的每個元素的詠歎調 labelledby。您可以使用 < 標籤 > 元素和唱腔 labelledby 屬性在同一表單中。除非他們圖像按鈕，還有標籤提交或重新開機按鈕，沒有必要。然後一定要設置的 alt 屬性。

每個表單具有所需元素和特定的限制，他們會接受的資料類型的元素。大多數表單上運行一些 JavaScript 在所需的和約束的欄位上執行驗證。他們這樣做之前將所有的資料發送回伺服器進行處理，因為它是更好地通知使用者錯誤，宜早不宜遲。螢幕閱讀器很難分辨什麼發生在頁面中時運行的腳本。若要變通解決此問題，使用的唱腔所需和唱腔不正確屬性，如中所示圖 1。

圖 1 帶有唱腔的可訪問 HTML 表單屬性

<form>     
  <div>
    <label for="name">* Name:</label>
    <input type="text" id="name" aria-required="true" />
  </div>
  <div>
    <label for="checkboxGroupLabel">* Language</span>
    <ul role="radiogroup" aria-labelledby="checkboxGLabel">
      <li role="checkbox"><input type="checkbox" value="C#"
        name="language" aria-checked="false" />C#</li>
      <li role="checkbox"><input type="checkbox" value="JavaScript"
        name="language" aria-checked="false" />JavaScript</li>
      <li role="checkbox"><input type="checkbox" value="Python"
        name="language" aria-checked="false" />Python</li>
    </ul>
  </div>
  <div>
    <span id="yearsLabel">* Years Experience</span>
    <select name="YearsExperience" aria-labelledby="yearsLabel" >
      <option value="1">1-5 Years</option>
      <option value="6">6-10 Years</option>
      <option value="10">10-20 Years</option>
      <option value="20">20+ Years</option>
    </select>
  </div>
  <div>
    <input type="submit" alt="Submit" />
  </div>
</form>

也會顯示在圖 1 是詠歎調要求的例子，詠歎調 — — labelledby，以及使用角色。你只加入了一些額外的但不顯眼的 HTML。它不會耗費大量的精力，並提供了豐厚的回報。

輔助技術必須處理多個靜態元素。JavaScript，AJAX 調用和水療風格的應用程式所有頻繁更改的內容的 Web 網站和應用程式。此有時動態腳本直接阻礙了螢幕閱讀器。JavaScript 驗證運行之後，必須重置一些 ARIA 特性，如詠歎調無效，的狀態。

測試可以存取碼

通過下載螢幕閱讀軟體，並嘗試為自己的輔助技術來測試你的工作。閉上你的眼睛，仿佛你盲目使用螢幕閱讀器。獲取您使用輔助技術的使用者的回饋也是一個偉大的方式看到你已經建立了如何訪問軟體。某些螢幕閱讀器，您可以下載並使用包括：

NVDA： nvaccess.org
大白鯊的視窗： bit.ly/1yJkxuV
視窗 — — 眼睛： gwmicro.com
畫外音的 OS x： bit.ly/1JuA1q9

一旦你測試過的讀者，WebAIM 具有全面的核對表和頁掃描器，稱為 Web 可訪問性評價工具（簡稱波），將錯誤、警告和其他資訊可訪問性狀態頁的報告。它很容易使用。去 wave.webaim.org ，然後輸入您要掃描的 URL。波顯示目標頁面內聯和詮釋麻煩點，您可以更改以改進協助工具的元素。圖 2顯示掃描器中行動，因為它標記 MSDN 雜誌上的一些專案 1 月 2015年問題頁。

圖 2 MSDN 雜誌後運行通過波掃描器

點擊任何注釋的元素，波將顯示錯誤的資訊或有關該元素的中繼資料。掃描器來看一切從失蹤的標籤和 alt 屬性對比問題。它標記他們為錯誤或警告，以便你可以首先改變更重要的問題。您可以運行一個單機版的波，或您可以向您自動的 QA 流程添加 API。

接近尾聲了

無障礙設計通常是每個人都更好的設計方法。非無障礙設計錯過的有相當比例的人口，所以它只是一個明智的商業決定要付出努力，使您的軟體。教科文組織統計研究所應清楚地標記，很容易找到的選項，以及使步驟完成一項任務，簡單明瞭。當您設計的協助工具時，您自動獲得一種使用方便、簡單的系統，工作好好地為大家。

Rachel Appel 是 20 多年的經驗，在 IT 行業顧問、作者、導師和前微軟員工。她說話在一流的行業會議，如Visual Studio活！，DevConnections，混合和更多。她的專長在於內開發對齊業務和技術集中在微軟開發堆疊上，打開 Web 的解決方案。阿佩爾的更多資訊，請訪問她的網址 rachelappel.com。

感謝以下 Microsoft 技術專家，檢討這篇文章：FrankLa 墓葬