增強網站可訪問性的25種方法

進步部落格發表於2013-04-30
網站

　　隨著web使用量的增加和人們網路意識的增強，可訪問性（或“通用設計”）變得更加重要。可訪問性不僅取決於一個網站的程式碼，還受網站設計和內容的影響，這就是為什麼可訪問性、標準和可用性關係如此緊密。

　　網頁無障礙是一個龐大的課題，已自成一個領域。 但不要被它嚇到。無障礙並不是非常難以實施。它並不會像一些人想象的會有礙美觀或影響互動。這是一種高明的（smart）設計和開發方式。

　　讓我們來看看建立一個無障礙網站的25個重要技術。

　1.一致的佈局和結構

　　為了幫助使用者快速和輕鬆地瀏覽您的網站，你應該提供一個一致的佈局和結構。頁面的主要元素——banner、navigation、sidebar側欄，在整個網站中應該出現在的相同位置 。他們也應該標記一致，如使用同一標題結構（heading structure）。這有利於認知障礙者和使用螢幕閱讀器（用來處理螢幕上的內容，並大聲讀出）的使用者訪問。

　2.為圖片新增替代文字

　　不幸的是，雖然替代文字已是家喻戶曉，但它常常被忽視或不正確使用。影象元素的alt屬性為圖片提供了文字描述。當圖片不可見時——如碰到盲人使用者、搜尋引擎、影象禁用和壞鏈情況時，可以通過alt文字來訪問圖片的“內容”。下面是替代文字的一些最佳做法：

  1. 如果文字嵌入在影象中，將文字新增到alt屬性。
  2. 裝飾性圖片應該由CSS處理。如果不能由css處理，應加空alt屬性（例如<img src=”decor.jpg” alt=”" />）。這不僅能通過驗證，還能告知輔助技術該圖片不包含任何意義。
  3. 對於某些圖片，如圖表和插圖等，需要更長的描述。有多種方法可以新增長描述，例如：在行內增加內容，使用“D – Link”（譯者注：D表示description，該連結的連結文字為D，表示連結至詳細描述頁面 ，如<a href=”detail.html”>D</a>），或使用longdesc屬性（譯者注：HTML5已廢棄longdesc 屬性）。
  4. 如果一個連結只包含影象內容，那麼alt文字應描述連結的功能，而不是影象本身。

　3.使用頁面標題

　　頁面標題是一個網頁的基本構建塊。如前所述，它能為HTML文件提供一個一致的結構。例如，H1元素可能包含網頁或網站的標題，H2可能表示該網頁的標題。這不僅有助於螢幕閱讀器使用者瀏覽，而且使頁面易於明眼使用者閱讀。標題也有利於SEO（但不要濫用標題，谷歌會發現並懲罰你滴！）。

　　切勿僅依靠​樣式 （如加粗，增加字型大小）來建立標題。始終使用H1至 H6元素，然後使用css修改其外觀。如果使用者代理不能解析CSS，標題通常預設顯示一種格式，可以維持文件的視覺結構。

　　錯誤：<span style=”font-size:2em”> <b>我的網頁標題</b> </span>

　　正確：<h1>我的頁面標題</ H1>

　4.正確使用標題

　　標題也經常使用不正確。標題使用混亂，跳級使用標題。將你的文件想象為一份大綱，以下是一些指導原則：

  • 每個頁面只給一個H1元素（除非你使用HTML5）。
  • H1的內容與網頁標題相似。
  • 按順序使用標題。例如，H1應該是第一個，H4應該在H3之後。
  • 不要跳級使用標題。舉例來說，不要從H2跳至H4。

　　關於標題和文件結構的更多資訊，請檢視WebAIM的文章建立語義結構 。

　5.跳過連結

　　錨連結將游標從頁面的一個區域移動到另一個區域，“跳過”連結是一種特殊型別的錨連結。它對鍵盤使用者非常有益，允許鍵盤使用者跳過大塊的內容和連結，特別是導航選單。跳過連結通常放置在頁面頂部並指向主要內容，使用者訪問新頁面時不必每次都瀏覽banner和導航。鑑於現在的導航條連結數目較多，這樣可以節省一點時間。

　　千萬不要使用display:none屬性隱藏跳過連結，因為螢幕閱讀器也無法讀取這些內容。讓它可見，但如果你非要把它藏起來，可以用CSS給它一個負邊距（或類似的東西），當連結獲取焦點時將它顯式。Web Standards Project在其網站上很好的使用了該方法。

　　ARIA和HTML5提供了導航方法，跳過連結就過時了。但是，在這些新技術得到更廣泛的支援（和標題更好地執行）之前，在頁面頂部加上一個或兩個跳轉連結仍然是良好的做法。

<body>
<a href="#mainContent">Skip to main content</a>
<div>[banner]</div>
<div>[navigation]</div>
<div id="mainContent">[page content here]</div>
</body>

　6.連結內容

　　由於一些輔助技術會在一個單獨的網頁展示連結，連結文字的內容是非常重要的。這聽起來簡單，但有時可能具有挑戰性。下面的規則不僅有利於增強可訪問性，同樣對可用性和搜尋引擎優化也是有意的：

  • 一個連結在脫離語境時仍然有意義；
  • 連結文字在它出現的頁面上應該是唯一的（即不同資源不要使用相同的連結文字）；
  • 連結文字千萬不要使用“點選此處”或“更多”；
  • 不要使用一個長URL作為連結文字（螢幕閱讀器會全部讀出來，使用者會很煩躁的）。

　　下面的文字，使用者必須折回來去理解連結的去向。

　　不好： To learn more about the bat species, click here.

　　下面的更加簡潔，即使脫離上下文也有意義。

　　好多了：If you’re interested, learn more about thebat species. 。

　7.連結感知

　　如果一個連結不是以預設方式開啟時，應告知使用者，即在同一瀏覽器視窗的網頁之外開啟。包括連結在新視窗開啟，連結至非HTML檔案，如PDF和視訊檔案。

　　告知使用者的方式有多種，根據殘疾型別和瀏覽器支援程度使用一種或多種方式。

　　你可以使用下面的程式碼在連結至PDF檔案的連結旁邊顯示一個圖示。注意的是，除了作為一種視覺提示，圖示包含一個alt屬性，連結擁有一個title屬性，兩者可提供補充資訊：

<a href="about_bats.pdf" title="open PDF document"> <img src="icon_pdf.png" alt="PDF
document" />learn about bats</a>

　8.謹慎使用title屬性

　　title屬性用於新增補充資訊很方便，但它仍只是補充。當書寫標題文字時，即“tooltip”，假設前提是使用者不會總是看它。許多螢幕閱讀器預設情況下不能識別title屬性，大多數使用者無法感知到。正如我們上一節看到的，我們可以使用title屬性之外的方法表明一個連結的目標異與尋常。

　9.保留下劃線

　　僅僅因為你可以，並不意味著你應該。在這種情況下，連結不要亂用下劃線。網路上表明文字是超連結的慣例就是下劃線，不要刪除它。贊成下劃線的觀點在這個看似古老的辯論中已逐漸失去地位，因為無障礙意識的缺乏和創作“最好”設計的激烈競爭。

　　談到無障礙，保留下劃線的主要原因是這樣的連結對色盲使用者仍然是可見的。當下劃線被去除而且連結顏色對比度不夠時，即使是我也很難將連結和純文字區別開。如果一個網頁中文字是黑色和連結是深藍色或紫色，即使可以區分兩者，但對眼睛會造成很大的壓力。

　　導航選單可以例外。只要連結的功能對使用者是顯而易見的，移除下劃線是可以的。

　　另外，不要對純文字使用下劃線。如果你想強調一個詞，請使用強調元素（<em>）。

　10.表單

　　要使Web表單可訪問，就要標記（label）欄位。大多數段已經被標記，因此只要把label元素附加到相關文字上就可以了。賦予欄位一個唯一的ID，並通過label元素的for屬性引用該ID。如下下例：

<label for="firstname">First Name:</label> <input name="firstname" id="firstname"type="text" />

　　這是一個“顯式”標記的例子。你也可以使用一個“隱式”標籤（即無需使用for和id屬性），但它會更嚴格，因為表單元素必須要包含在label元素內。檢視HTML label的規範。

　　另一個有用的技術是設定fieldset和legend，尤其當表單很長時。fieldset 將表單元素組合在一起，legend給表單組命名。這使得表單更容易閱讀、瀏覽和填寫。在下面的例子中，欄位first name和last name被分組在name下，address 和city 欄位分組在location下：

<form action="foo.php">
<fieldset>
<legend>Name</legend>
<label for="firstname">First Name:</label> <input name="firstname" id="firstname"
type="text" />
<label for="lastname">Last Name:</label> <input name="lastname" id="lastname" type
="text" />
</fieldset>
<fieldset>
<legend>Location</legend>
<label for="address">Address:</label> <input name="address" id="address" type=
"text" />
<label for="city">City:</label> <input name="city" id="city" type="text" />
</fieldset>
</form>

　　其他建議：

  • 在很長的下拉選單中，使用optgroup元素將相關條目分組。
  • 除了使用label元素，你也可以將表單欄位和文字標記關聯起來，通過使用ARIA的aria-labelledby屬性。
  • 伺服器端和前端都要驗證表單。
  • WCAG2不推薦使用隱式表單標記，推薦使用顯式標記 。
  • 表單要儘可能短。不要問你不需要的資訊。
  • 說明提示資訊如果不包含在特定表單元素內，輔助閱讀裝置處在表單模式下就可能讀不出來。例如，提示使用者該欄位是“必填項”的說明應該包含在label內。

　11.鍵盤可訪問所有連結

　　許多人是不使用滑鼠的。一些輔助技術依賴於鍵盤輸入或虛擬鍵盤而不是滑鼠或指標裝置。出於這個原因，連結不應要求只有滑鼠才可訪問。一定要遵從標準，連結應當是擁有href屬性的a元素。

　　這似乎是顯而易見的，但是在網路中總能碰到這類錯誤程式碼。這是Plain Old Semantic HTML (POSH，譯者注：倡導使用通過驗證的、語義的、無障礙的、結構良好的HTML)和逐步增強（PE）（見本文第15節：“三層”）的理念。執行POSH和PE的最好方式是確保連結可通過鍵盤訪問（同樣會帶來其他的好處）。

　　為了增強連結的行為，可以為連結新增了一個鉤子，如class或ID；然後使用JavaScript通過DOM來訪問這個鉤子。這樣HTML仍保持語義、輕量和整潔。 下面有幾個提示：

  • 不要使用雙擊處理程式（onDblClick），因為鍵盤不能執行這個行為。
  • 如果您使用onmouseover和onmouseout JavaScript處理程式，同時使用onfocus和onblur以適應鍵盤。
  • 如果你必須使用JavaScript，把連結的tabIndex值設為-1將其插入到tab序列中。TabIndex為0時事件div可被鍵盤訪問。

　12.顯示連結焦點

　　當連結獲得焦點時突出顯示它們（視覺上）。這可以指示明眼鍵盤使用者他們在頁面上的位置。同樣，滑鼠懸停時提供視覺反饋。切勿使用css刪除連結的預設外框——a{outline:0}——除非你移除了連結功能。CNN是一個很好的反例 。使用tab在其網站上瀏覽，你會很快迷失方向，因為你看不到獲得焦點的連結的視覺提示。相比之下， Accessible Twitter保留了預設的外框，併為表單域和按鈕事件增加了獨特的焦點效果。

　13.新增ARIA Landmark Roles

　　無障礙富網際網路應用（ ARIA ）是一個相對較新的W3C規範，提供了使現代應用程式對輔助技術可訪問的方法。作為第一步，嘗試在文件里加入“landmark roles”。這是描述網頁片斷（sections）的特殊屬性，如內容區，導航和搜尋。這為螢幕閱讀器使用者提供了一個很好的瀏覽方式（雖然ARIA在一些螢幕閱讀器-瀏覽器組合中沒有完全支援）。在下面的例子中，4個landmark roles建立了一個基本的網頁結構：

<div role="banner">
[header content]
</div>
<div role="navigation">
[nav content]
</div>
<div role="main">
[main content]
</div>
<div role="c​​ontentinfo">
[footer content]
</div>

　　ARIA的更多資訊，請閱讀Opera開發者網站上的“ Introduction to WAI ARIA“。

　14.驗證標記

　　驗證HTML和CSS對可訪問性是有益的。雖然不一定要非常完美，但通過驗證是終極目標。 無效的HTML或CSS會給輔助技術帶來問題，即使在瀏覽器中的表現是好的。

　　下面是驗證程式碼的更多好處：

  • 健壯的網頁更容易在各種瀏覽器和裝置中工作。
  • 易於維護一致編碼的頁面更容易建立、維護和解決問題。
  • 可靠的網頁渲染和執行更可信。
  • 通過驗證的程式碼更容易支援瀏覽器和裝置的未來版本。

　　記住，技術上的通過驗證的文件並不能保證其可訪問性。一個完全通過驗證的文件，如果它的語義完全是錯誤的話，將損害文件的可訪問性。例如：標題結構不合理，使用blockquote來縮排文字，在佈局表格中使用summary屬性。為了驗證您的程式碼，你可以使用W3C的標記驗證服務和CSS校驗服務 。許多開發者工具上，如由The Paciello Group開發的Web Accessibility Toolbar，提供這些服務的快捷方式。

　15.三層分離，逐步增強

　　為了有效地實施標準，使網站更易於訪問，你必須通過使用HTML、CSS和JavaScript，把內容、樣式（或表現）和行為分離。這是前端開發的三個層次。這種分離也使漸進增強 （PE）更加可行，漸進增強使網站在舊瀏覽器和技術上優雅降級。

　　“Hijax”（Jeremy Keith）是漸進增強的一個很好的例子，即使JavaScript不可用時，使網頁仍具有AJAX的功能。一個偉大的經驗法則是：“從一開始就計劃AJAX，但最後實施。”要了解更多Hijax，請閱讀2006年keith的演講：“ Hijax：AJAX逐步增強 。“

　16.列表使用list元素

　　聽起來很簡單，但列表經常被標記錯誤。無序列表、有序列表和定義列表（注：HTML5稱為描述列表）用來標記列表。無序列表（<ul>）適用於普通的專案符號列表和導航連結。有序列表（<ol>）基本上是編號列表，用於顯示一個過程的步驟。當編寫一個無序列表時，不要把符號圖片內嵌在內容中。而是用CSS定義樣式。

　　錯誤:

<p><img src="bullet.jpg" />Burger King<br />
<img src="bullet.jpg" />Taco Bell</p>

　　正確:

<ul>
<li>Burger King</li>
<li>Taco Bell</li>
</ul>

　　定義列表（<dl>）是由定義條目（<dt>）和定義資料（<dd>）組成。通常，一個條目被分配一個或多個資料元素。一個明顯的例子就是詞彙表：單詞被標記為定義條目，其定義則是定義資料。下面是一個定義列表顯示三種標記語言的縮寫和全稱：

<dl>
<dt>SGML</dt>
<dd>Standard Generalized Markup Language</dd>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>XHTML</dt>
<dd>Extensible HyperText Markup Language</dd>
</dl>

　　有時一個詞可以有一個以上的定義，反之亦然。下面單詞“theater”的列表，它的替代拼寫和多種定義：

<dl>
<dt>Theatre</dt>
<dt>Theater</dt>
<dd>A building, part of a building or outdoor area for housing dramatic
presentations, stage entertainments or motion-picture shows.</dd>
<dd>A theatrical or acting company.</dd>
<dd>A place of action; field of operations.</dd>
</dl>

　17.不要僅使用色彩來傳達意思

　　許多人都有一定的視力障礙，比如色盲。據報導，美國男性中百分之七有某種形式的色盲。所以，你不能僅使用顏色傳達意思。比如“選擇紅色按鈕”，這樣的說明對辨識這種顏色有困難的使用者是沒有幫助的。相反，確保每一條指令是指目標物件的一個特定的非色彩特徵，如它的形狀（如八角形）或文字（如”stop”)。另一種方法是對目標物件新增形狀，如八角形，或者紋理。想要了解更多資訊和解決方案，請檢視我們是色盲（We Are Colorblind） 。

　18.色彩對比

　　確保你的設計有足夠的顏色對比，這對低視力和色盲使用者有益。WCAG 2.0 AAA級要求最小對比度為7:1，AA級的建議是4.5:1或更高。這些比率是根據前景色和背景色的色彩亮度公式計算而來的。下面是一些可用來檢查顏色對比度的工具：

　19.正確標記資料表格

　　編碼恰當可以使資料表對所有人都可訪問。首先給表格新增caption元素或summary屬性，兩者都新增更好。caption元素是表格的標題，summary屬性描述表格的內容和結構，通常只有螢幕閱讀器使用者可以訪問（其與HTML5的相關性目前正在討論之中。）

　　標記表格表頭單元格使用<th>而不是普通的<td>。然後，為表頭單元格新增scope屬性。如果表頭在頂部行，控制下面的單元格，scope的屬性值設為col。如果表頭在左邊列，控制右側的單元格，則屬性值為row。這裡有一個很好的例子，來自文章“Bring on the Tables “：

<table summary="The number of employees and founding years of some
imaginary companies.">
<caption>Table 1: Company data</caption>
<tr>
<th scope="col" abbr="Company">Company Name</th>
<th scope="col" abbr="Employees">Number of Employees</th>
<th scope="col" abbr="Founded">Year Founded</th>
</tr>
<tr>
<td scope="row">ACME Inc</td>
<td>1000</td>
<td>1947</td>
</tr>
<tr>
<td scope="row">XYZ Corp</td>
<td>3000</td>
<td>1973</td>
</tr>
</table>

　　在複雜資料表格中（比如多級表頭），在單元格中要新增headers和id屬性。關於這個技術的更多資訊，請訪問 Web Usability檢視Complex Data Tables。

　　此外，即使使用table佈局一個頁面或頁面的一部分不會直接訪問性，但最好使用純CSS，而表格留給表格式資料使用。

　20.宣告變更內容

　　網頁上的內容動態變化時一定要提醒使用者。ARIA Live Regions是一個相對較新的技術，它可以很容易的為螢幕閱讀器使用者處理這種任務。為內容可能更新的元素新增aria-live屬性。屬性值可選off,，polite 和 assertive。預設值是off，所以一定要明確設定此值。

　　你可以將變化通知給明眼使用者，通過使更新內容的背景逐漸消失，或者使用JavaScript生成一個提示覆蓋在內容上。

　　總之，在自動重新載入頁面或頁面跳轉至其他頁面之前一定要告知使用者。

　21.關於Flash…

　　根據螢幕閱讀器使用者的反映， 在網路上Flash是最難訪問的技術之一。Adobe已經竭力使建立可訪問的Flash內容 成為可能，但坦白說，開發人員在實踐中很少使用它。

　　有節制地使用Flash，並竭力使你的Flash內容可訪問。如果做不到的話，就要提供一個訪問內容的替代方式。

　　“ Assistive Technology Boogie “（連結到Flash檔案）是一個很好的具有可訪問性的flash。這個flash可以通過鍵盤操作，提供了標題，還有一個音訊描述。

　22.提供音訊文字

　　給所有音訊提供文字，以幫助耳聾或有聽力障礙的使用者。音訊文字也有其他的好處：使用者可以選擇訪問內容的方式。使用者的裝置可能沒有音訊功能，或他們的喇叭或耳機趕巧壞了。也可能使用者在圖書館或者不可喧譁的工作場所。更何況，音訊文字對SEO 是非常有益的。

　　標記音訊文字有多種方法，被廣泛採用的方法是使用一個定義列表。說話者的名字標記為定義條目（dt），說話者的話語標記為定義資料(dd)。

<dl>
<dt>Mark</dt>
<dd>How are you?</dd>
<dt>Jane</dt>
<dd>I’m fine, thank you.</dd>
</dl>

　　HTML5曾建立了dialog元素，但後來又去掉了。目前規範建議使用段落元素來標記會話。

　23.提供字幕

　　你應該為視訊和多媒體內容提供同步字幕，理由和提供音訊文字一樣。這裡有一些資源可幫助你入門：

　24.恰當的語言

　　“恰當的”語言通常意味著易於理解的語言。如果說“有趣”和“詼諧”的意思一致的話，那應該使用前者。易於理解的語言對有認知障礙和非母語的使用者是有幫助的。下面是一些提示：

  • 寫短句子;
  • 寫短的段落;
  • Favor the active over the passive voice;
  • 避免使用行話，俚語和成語;
  • 解釋技術術語;
  • 提供不常見縮略語的全名。

　　當然，對於涉及技術或複雜主題概念的網站來說，比如火箭科學，”恰當“比”易於理解“更重要。要了解更多資訊，請參閱SlideShare上的由4 Syllables製作的“ Web Accessibility for Writers “。

　25.使用多種方法測試

　　使用多種方法來測試一個網站的可訪問性。也不要僅僅依靠自動化工具，因為你應該檢查的很多東西在本質上是主觀的，如語言、tab順序和連結文字。測試一個網站的最好方法來是讓有輔助技術經驗的使用者使用它。

　　下面是需要做的一些事情：

  • 拔掉你的滑鼠，只用鍵盤來瀏覽網站;
  • 至少在兩個自動化測試工具上檢測網站，如WAVE ， Cynthia Says和A-Prompt ;
  • 使用前面提到的色彩對比工具;
  • 禁用css和JavaScript，檢視網站內容;
  • 檢查標題結構;
  • 在多個瀏覽器和裝置上瀏覽網站;
  • 使用一種web無障礙工具條;
  • 使用單眼閱讀諸如顏色語言，方向性語言（“上方”，“向左”）的內容

　關於作者

　　Dennis E.Lembree是一位造詣頗深的web開發者，曾就職於多家公司，包括福特、谷歌、迪斯尼和RIM。他是Web Axe 的作者，一個關注web無障礙的播客和部落格。Lembree先生也是備受讚譽的 Web應用程式Accessible Twitter的作者。他曾在多個會議上演講，包括Accessing Higher Ground， INDATA輔助技術會議和第25屆國際技術與殘疾人會議。Lembree先生來自美國密歇根州東南部，並曾在佛羅里達州奧蘭多生活。他現在與妻子和兩個兒子居住在加州庫比提諾。

　　英文原文：25 Ways To Make Your Website Accessible

相關文章