path: root/files/zh-tw/learn/accessibility/what_is_accessibility/index.html

---
title: 何謂無障礙網頁？
slug: Learn/Accessibility/What_is_accessibility
translation_of: Learn/Accessibility/What_is_accessibility
---
<div>{{LearnSidebar}}</div>

<div>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</div>

<p class="summary">這篇文章給「到底什麼是無障礙網頁」的模塊，開了個好起頭：以下將包括我們該考慮什麼樣的用戶以及理由、不同的人要在 web 用什麼工具互動、還有如何令無障礙網頁成為 web 開發的一部分。</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">先決要求：</th>
   <td>基本資訊能力、還有對 HTML 與 CSS 有基本的理解。</td>
  </tr>
  <tr>
   <th scope="row">目標：</th>
   <td>熟悉無障礙網頁，包含它是什麼、還有它如何影響作為 web 開發者的你。</td>
  </tr>
 </tbody>
</table>

<h2 id="到底什麼是無障礙網頁？">到底什麼是無障礙網頁？</h2>

<p>無障礙是盡可能令更多人，使用你網站的實做：一般來說，我們會認為這屬於身心障礙者的範疇，但它其實會涵蓋其他群體：像是使用行動設備、或者網速很慢的人。</p>

<p>也可以把無障礙想成：所有人，不論他們的能力或環境如何，都要同等看待、並給予同等機會。就如同我們不能把坐在輪椅的人，排除在某棟物理大樓之外：目前的公共建築，通常都會有電梯或輪椅坡道；我們也不能排除視障或手機用戶，使用我們的網站。儘管我們生而不同，但我們都是人，因此，我們都擁有相同的人權。</p>

<p>無障礙是好事，但也是某些國家法律的一部分，也能開啟一些關係到你的服務或產品的市場。</p>

<p>無障礙與其所需之最佳實做將使大家受益：</p>

<ul>
 <li>提昇無障礙的語意 HTML 能增進 SEO，令網站更容易被找到、也更易於銷售。</li>
 <li>關注無障礙網頁會展現優良的倫理道德、以增進你的公共形象。</li>
 <li>無障礙網頁的一些作法也能令網站易於給其他族群使用，像是手機用戶、低網速……等等。事實上，任何人都能從此類改進中獲益。</li>
 <li>我們還要提提某些地區的法律規定嗎？</li>
</ul>

<h2 id="你在鎖定什麼樣的障礙者？">你在鎖定什麼樣的障礙者？</h2>

<p>身心障礙者和非身心障礙者一樣多元，他們的障別也是如此。重點是，不要光用自己使用電腦和 web 的角度去思考這件事：<em>你並不是無障礙網頁的用戶</em>。下文將解釋應當考慮的障別，還有他們訪問 web 內容的特殊工具（通常稱作 <strong>assistive technologies</strong>、<strong>AT</strong>、<strong>輔助工具</strong>、<strong>輔具</strong>）。</p>

<div class="note">
<p><strong>註</strong>：世界衛生組織的<a href="http://www.who.int/mediacentre/factsheets/fs352/zh/">殘疾與健康</a>指出「超過10億人，約佔世界人口的15%，患有某種形式的殘疾。」、且「1.1億至1.9億成年人有很嚴重的功能性障礙。」。</p>
</div>

<h3 id="視覺障礙">視覺障礙</h3>

<p>視覺障礙包括盲人、低度視覺、色盲……等等。這類的用戶會使用擴視器（screen magnifier，可能是物理擴視機、或是軟體的縮放功能：當代多數瀏覽器和作業系統都有這種功能），也有些人會用螢幕閱讀器（screen reader，朗讀數位文字的軟體）：</p>

<ul>
 <li>有些是商業軟體，例如 <a class="external external-icon" href="http://www.freedomscientific.com/Products/Blindness/JAWS">JAWS</a>（Windows）和 <a class="external external-icon" href="http://www.gwmicro.com/window-eyes/">Window Eyes</a>（Windows）。</li>
 <li>也有些是自由軟體，例如 <a class="external external-icon" href="http://www.nvaccess.org/">NVDA</a>（Windows）、<a class="external external-icon" href="http://www.chromevox.com/">ChromeVox</a>（Chrome、Windows、Mac OS X）、<a class="external external-icon" href="https://wiki.gnome.org/Projects/Orca">Orca</a>（Linux）</li>
 <li>還有些是系統內建，例如 <a class="external external-icon" href="http://www.apple.com/accessibility/osx/voiceover/">VoiceOver</a>（Mac OS X 與 iOS）、<a class="external external-icon" href="https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started">Narrator</a>（Microsoft Windows）、<a class="external external-icon" href="http://www.chromevox.com/">ChromeVox</a>（Chrome OS）、<a class="external external-icon" href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">TalkBack</a>（Android）。</li>
</ul>

<p>熟悉螢幕閱讀器是個好主意；你得設定好螢幕閱讀器、還要會使用它，以理解其工作原理。請參見<a href="/zh-TW/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">cross browser testing screen readers guide</a>以深入理解。以下影片提供了簡單的體驗。</p>

<p>{{EmbedYouTube("IK97XMibEws")}}</p>

<p>在統計方面，世界衛生組織表明：「全球視力受損人數約2.53億：3600萬人患有盲症，2.17億人有中度至重度視力損害。」（請參見<a href="http://www.who.int/mediacentre/factsheets/fs282/zh">視力損害和盲症</a>）。如果網站編寫不正確，你的網站就會失去如此龐大的和重要的用戶群：這大約是全美國的總人口數。</p>

<h3 id="聽覺障礙">聽覺障礙</h3>

<p>聽覺障礙者、或聾人，是指聽力低落、或毫無聽力的群體。聽覺障礙者通常會用輔具（請參見<a href="https://www.nidcd.nih.gov/health/assistive-devices-people-hearing-voice-speech-or-language-disorders">Assistive Devices for People with Hearing, Voice, Speech, or Language Disorders</a>），但沒有給電腦/web使用的專門輔具。</p>

<p>不過，請記得有專門技術，會針對有聲內容，提供閱讀的替代文字。有簡單的文本記錄（text transcript）、也有能在影片出現的追蹤文字（text track），例如字幕。接下來將有文章深入探討。</p>

<p>聽覺障礙者也是龐大的人口，世界衛生組織在<a href="http://www.who.int/mediacentre/factsheets/fs300/zh">耳聾和聽力損失</a>指出：「全球有3.6億人患有殘疾性聽力損失」。</p>

<h3 id="行動障礙">行動障礙</h3>

<p>有運動障礙的人，可能是純粹身體問題（例如： 肢體殘缺或癱瘓）或是四肢無力、失去控制等神經或遺傳疾病。他們可能難以使用滑鼠做出精確的手部動作，甚至可能只能使用<a href="http://pattersonmedical.com/app.aspx?cmd=getProductDetail&amp;key=070_921118261">頭指針（head pointer）</a>操作電腦。</p>

<p>這些殘疾也可能是老化的結果，而不是受到創傷或疾病，或可能是硬體的限制——有些使用者可能沒有滑鼠。</p>

<p>通常影響開發者開發網站的需求是要能使用鍵盤操作網頁——我們會在後續的文內討論使用鍵盤操作網頁。雖然這個需求有些麻煩，但這是一個很好的主意，請開發者嘗試看看。例如：你可以使用 Tab 鍵在表單中切換填寫項目嗎？你可以在我們的<a href="/zh-TW/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">跨瀏覽器測試中找到更多關於使用鍵盤控制網頁的相關資訊</a>。</p>

<p>統計數據顯示，許多人有行動障礙。 美國疾病控制和預防中心的<a href="http://www.cdc.gov/nchs/fastats/disability.htm">殘疾統計數據（涵蓋範圍為非法人的18歲以上成人）</a>顯示，在美國，有身體機能障礙者佔成人人口的 15.1% 。</p>

<h3 id="認知障礙">認知障礙</h3>

<p>最後一類，可能是最廣泛出現的殘疾——認知障礙。認知障礙廣義可涵蓋從精神疾病到學習困難，包含<a href="https://www.nimh.nih.gov/health/topics/attention-deficit-hyperactivity-disorder-adhd/index.shtml">ADHD（注意缺陷多動障礙）</a>、<a href="https://www.nimh.nih.gov/health/topics/autism-spectrum-disorders-asd/index.shtml">自閉症</a>患者、<a href="https://www.nimh.nih.gov/health/topics/schizophrenia/index.shtml">思覺失調</a>以及許多其他相關疾病。這些與記憶、解決問題能力、理解能力與注意力等問題相關的疾病，都大大影響病患的日常生活。</p>

<p>這些疾病會影響病患使用網站，而最常見的問題就是他們會在理解如何完成網頁操作、記憶以往完成網頁操作的過程、以及經歷各種不同的操作流程與不一致的佈局/導覽列/其他頁面功能時，增加許許多多的挫敗感。</p>

<p>與其他網路無障礙問題不同，我們無法快速解決認知障礙引起的網路操作問題；<br>
 你唯一能做的就是設計網站時，盡可能符合邏輯性、一致性與可用性，例如：</p>

<ul>
 <li>頁面一致 － 導覽列、頁眉、頁腳和主要內容區塊在每一個頁面都位在相同的位置。</li>
 <li><span class="short_text" id="result_box" lang="zh-TW"><span>網站內工具設計精良，易於使用。</span></span></li>
 <li>多個階段的流程（例如註冊），被細分有邏輯性的步驟，並提醒使用者如何進行流程，以及他需要多長的時間才能完成流程。</li>
 <li>工作流程是合乎邏輯的、簡單的，並且盡可能減少需要與網站互動的流程<br>
  例如：註冊和登入網站常常就是很複雜且不必要的。</li>
 <li>適量呈現頁面資訊，盡量讓頁面呈現的資訊不要過多或過密。</li>
 <li>適當的用語，頁面呈現的用語須標準或通俗易懂，不要充滿不必要的行話或俚語。</li>
 <li>內容的重點處適時以某些方式（例如：使用螢光色標示）突顯出來。</li>
 <li>使用者操作錯誤的地方也需要標示出來，並且提供相關訊息或解決方法，幫助使用者解決錯誤。</li>
</ul>

<p>上述這些並不是「無障礙技術」，但他們是很好的設計理念。他們會讓使用者受益良多，因此他們應該成為你開發網站的工作標準之一。</p>

<p>康乃爾大學 <a href="http://www.disabilitystatistics.org/StatusReports/2014-PDF/2014-StatusReport_US.pdf">2014 年的殘疾報告</a>顯示，2014 年美國 21 歲至 64 歲的人中，有 4.5% 的人有認知障礙。</p>

<div class="note">
<p><strong>注：</strong>WebAIM 的<a href="http://webaim.org/articles/cognitive/">認知頁面</a>提供了更多資訊，值得一讀</p>
</div>

<h2 id="專案引入無障礙">專案引入無障礙</h2>

<p>有一個很常見的迷思，就是在專案管理方面，無障礙屬於昂貴的「外加」成本。如果有以下情形的話，這個迷思<em>的確會</em>發生：</p>

<ul>
 <li>針對明顯有障礙的網站，想要「重寫」為無障礙網站。</li>
 <li>在專案後期才想到無障礙網頁相關問題時。</li>
</ul>

<p>如果在專案初期就考慮到無障礙網頁，大多數無障礙內容的成本可以最小化。</p>

<p>當在規劃專案時，將無障礙測試納入你的測試中，就像測試其他功能一樣（例如：移動裝置 UI 測試）。<br>
 及早測試、經常測試，理想情況是運行自動化測試以檢測缺少的功能（例如：圖片缺少<a href="/zh-TW/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Text_alternatives">替代文字</a>、不好的連結文字 － 請參見 <a href="/zh-TW/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Element_relationships_and_context">Element relationships and context</a>），並做一些測試，為了讓殘疾人士能夠操作更複雜的網站功能。例如：</p>

<ul>
 <li>日期選擇器是否可以提供給螢幕閱讀器的人使用？</li>
 <li>如果內容動態更新了，視障人士是否能馬上收到資訊？</li>
 <li>使用鍵盤或觸控式介面的人能順利操作我的 UI 按鈕嗎？</li>
</ul>

<p>你應該記錄自己網站中有問題的地方，並努力讓這些地方變成無障礙或考慮解決方案 / 替代方案，並持續進行測試。文字內容（你可以在下一章看到更多資訊）要做到無障礙很簡單，但是如你想要在網站中放上更多絢麗的 3D 圖形，那應該要怎麼做呢？<br>
 你應該評估專案的預算，並考慮有什麼解決方案可以讓這些絢麗的 3D 圖形容易被存取。<br>
 例如：你可以支付高額的費用，讓那些多媒體內容轉錄成無障礙設備可存取的資訊，雖然昂貴，卻是可行的方案。</p>

<p>雖然要實現 100% 無障礙網頁是一種難以達成的理想，世事難料，你總是會遇到一些不常見的問題，導致某個使用者難以使用網頁，但你還是應該盡可能做到無障礙網頁。如果你打算使用WebGL製作的炫麗的 3D 圓餅圖，可以撰寫替代的文字，來傳達圖表的資訊。或者你可以只使用表格來傳達資訊而不使用3D 圓餅圖，這樣每個人都可以一目了然表格傳達的資訊、網頁傳輸編碼更快、CPU使用率更低，並且更容易維護。</p>

<p>但是如果你是一個有趣的 3D 藝術畫廊網站開發者，那麼期待這些藝術品能夠傳達給視障人士，就不太合理，因為圖畫這類的藝術品本身就是透過視覺作為傳達訊息的媒介。</p>

<p>為了表明你對無障礙網頁的關心，請在你的網站上發佈無障礙網頁聲明，並詳細說明你為無障礙網頁做了哪些事情、採取了哪些步驟。如果有人抱怨你的網站存在無障礙問題，請他們回報給你們，並嘗試解決。</p>

<div class="note">
<p><strong>注</strong>：我們的 <a href="/zh-TW/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems article</a> 包含了應該進行詳細測試的無障礙網頁規範。</p>
</div>

<p>總而言之：</p>

<ul>
 <li>在專案初期就考量到無障礙網頁、還要測試得早而多。一如其他錯誤，無障礙網頁問題在越晚發現時，麻煩也越大。</li>
 <li>謹記無障礙網頁，是對大家都有利的。例如說，精實的語意標記不只對螢幕閱讀有利，也利於快速載入與效能，從而對大家有利，尤其對行動設備、或是網速過慢的人。</li>
 <li>再網站上標明支援無障礙網頁，並鼓勵身心障礙者參與。</li>
</ul>

<h2 id="無障礙網頁的指引與法律">無障礙網頁的指引與法律</h2>

<p>有一些針對無障礙網頁的檢查清單和指引能夠用做測試，它們乍看之下可能令人眼花撩亂。我們建議你只要專注熟悉的基本領域、並理解指引裡面，與你最相關的高層次結構。</p>

<ul>
 <li>首先，W3C 針對無障礙網頁的一致性，發布了龐大而詳盡、並包含精確而不講明具體技術的準則文件。它們通常稱作 <a href="https://www.w3.org/WAI/intro/wcag.php">Web Content Accessibility Guidelines</a>（WCAG，無障礙網頁內容指引），無論從哪個角度來說，讀起來都不是普通的長。整個準則能分為以下四大類：它指定如何實做可感知、可操作、可理解、還有健壯（perceivable, operable, understandable, robust）的內容。要取得簡易指引並開始學習，可以去參閱 <a href="https://www.w3.org/WAI/WCAG20/glance/Overview.html">WCAG at a Glance</a>。你不需要學習 WCAG 的一切：只要了解主要的關注領域，並使用各種技術和工具來高亮任何不符 WCAG 標準的領域就型（參閱以下）。</li>
 <li>你的國家或地區可能有特別立法，以管理這方面人口的需求：例如美國的 <a href="http://www.section508.gov/content/learn">Section 508 of the Rehabilitation Act</a>、德國的 <a href="https://www.einfach-fuer-alle.de/artikel/bitv_english/">Federal Ordinance on Barrier-Free Information Technology</a>、英國的 <a href="http://www.legislation.gov.uk/ukpga/2010/15/contents">Equality Act</a>、義大利的 <a href="http://www.agid.gov.it/agenda-digitale/pubblica-amministrazione/accessibilita">Accessibilità</a>、還有澳洲的 <a href="https://www.humanrights.gov.au/world-wide-web-access-disability-discrimination-act-advisory-notes-ver-41-2014">Disability Discrimination Act</a>……等等。<br>
  （譯註：針對繁體中文，台灣有<a href="https://www.handicap-free.nat.gov.tw">基於《身心障礙者權益保障法》的無障礙網頁開發規範</a>、香港有<a href="https://www.ogcio.gov.hk/tc/community/web_mobileapp_accessibility/promulgating_resources/handbook/doc/Web_Accessibility_Handbook.pdf">基於《殘疾歧視條例》的無障礙設計指引</a>）</li>
</ul>

<p>因此，儘管 WCAG 有所指引，你的國家可能還是有管理無障礙網頁、或最少針對公眾無障礙服務（可能包含了網站、電視、物理空間……等等）的法案。最好先看看所處地區的法律管轄權。如果不好好檢查內容是否無障礙，當身心障礙者投訴時，你可能會面臨法律問題。</p>

<p>聽起來很可怕，但只要在開發時，如上所述地把無障礙網頁議題當作高度優先就可以了。如果真的有疑問，請諮詢合格的專業律師。我們不是律師，所以不會提供更深入的意見。</p>

<h2 id="無障礙網頁_API">無障礙網頁 API</h2>

<p>瀏覽器使用特殊的<strong>accessibility API</strong>（由各自的作業系統底層提供）對輔助技術（AT）提供有用的信息：輔助技術傾向使用語義訊息，因此這種訊息不包含樣式化資訊、或是 JavaScript。這種資訊建構成一個稱為 <strong>accessibility tree</strong> 的訊息樹（tree of information）。</p>

<p>不同的作業系統有不同的 accessibility API：</p>

<ul>
 <li>Windows: MSAA/IAccessible, UIAExpress, IAccessible2</li>
 <li>Mac OS X: NSAccessibility</li>
 <li>Linux: AT-SPI</li>
 <li>Android: Accessibility framework</li>
 <li>iOS: UIAccessibility</li>
</ul>

<p>如果由 web app 裡面，HTML 元素提供的原生語意訊息出問題了，你可以把它用做 <a href="https://www.w3.org/TR/wai-aria/">WAI-ARIA 規範</a>的補充：它會把語意訊息添加到 accessibility tree 以增進無障礙功能。你可以在 <a href="/zh-TW/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA 基礎</a>文章學習 WAI-ARIA。</p>

<h2 id="結論">結論</h2>

<p>本文應當使你對無障礙網頁有著概括性的認知、明白其重要性、並在知道如何在工作流程中安排它。你也該對知道如何實做無障礙網頁的細節有興趣。我們將在下個章節開始闡明為什麼 HTML 是無障礙網頁的好基礎。</p>

<p>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</p>

<h2 id="在本模塊">在本模塊</h2>

<ul>
 <li><a href="/zh-TW/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></li>
 <li><a href="/zh-TW/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></li>
 <li><a href="/zh-TW/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li>
 <li><a href="/zh-TW/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li>
 <li><a href="/zh-TW/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></li>
 <li><a href="/zh-TW/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li>
 <li><a href="/zh-TW/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li>
</ul>