網站可訪問性最佳實踐：網頁設計師必備指南

網站可訪問性考慮了用戶在如何以各種身份體驗網站方面的需求。例如，在開發更易於訪問的網站時，考慮用戶將如何僅使用螢幕閱讀器與網站進行互動，或者行動不便的用戶如何導航網站都是需要考慮的場景。不太可能每個網站設計者都可以選擇與真實用戶測試其網站的可訪問性。幸運的是，網頁設計師可以遵循一些網站可訪問性指南，以確保他們創造的用戶體驗不僅令人愉悅，而且可供更多人使用。 

本文介紹關於如何創建更易於訪問的網站。

為什麼可訪問性很重要？

殘疾不應阻止一個人使用網站，網站不應成為任何人使用的負擔。擁有可訪問的網站意味著所有用戶，尤其是殘障用戶，都將擁有公平的體驗，能夠輕鬆完成任務並訪問所需的訊息。設計人員和開發人員有責任在考慮所有潛在用戶的情況下創建這些數位產品。 

殘疾與情境和臨時限制

為殘障人士提供無障礙設施通常會以意想不到的方式使非殘障人士受益。雖然暫時性或情境/環境限制與殘疾不同，但人們經常會意外地嘗試以通常不是為他們設計的方式導航空間、產品或工具。情境或環境限制，例如父母在抱著嬰兒時試圖用一隻手使用手機，或暫時限制，例如某人因喉炎而無法說話，可能不如認識到患有自閉症的人的生活經歷那麼重要。殘障人士每天都要面對。然而，認識到這些不同的體驗可能有助於進一步理解為什麼擁有可訪問的網站、產品和應用程式應該是設計策略的重要組成部分，而不是事後的想法。 

為可訪問性設計不是為小眾用戶群設計；它在設計時考慮了各種潛在用戶，甚至是您可能沒有預料到的用戶。

Web可訪問性的基礎知識

可訪問性指南：WCAG 2.1合規性

行業標準的Web可訪問性指南縮寫為WCAG（Web 內容可訪問性指南）。只要有新訊息可用，這些指南就會更新，最新的指南隨後會發布在W3C（全球資訊網聯盟）網站上。W3C 是一個國際社區，它「開發開放標準以確保Web的長期發展」，並致力於讓每個人都儘可能地訪問網際網路和其他數位產品。 

他們指南的最新版本是WCAG 2.1，其中僅包含對WCAG 2.0的補充。可訪問性合規性分為三個級別（A、AA和AAA）。每個級別都比前一個級別更易於訪問，其中級別 A 是必要的最低要求（但不是完全可訪問），而AAA是最優化的可訪問性級別。 

例如，為了確保用戶能夠在網站上導航並找到他們正在尋找的內容，頁面必須具有的要求之一（除其他外）是描述頁面內容以滿足 A 級要求的標題標準。進入AA級標準，其中一項要求是頁面必須包含標題和標籤來描述主題或目的。進一步進入AAA級標準，其中一項要求是頁面必須使用部分標題來組織頁面內容。 

有很多指南可以滿足所有WCAG標準，但是，隨著更多的實踐，它將成為第二天性。

8 個Web輔助功能提示 

滿足可訪問性指南需要滿足許多要求，但請牢記以下提示，以確保您滿足網站上不同元素的基本要求。

1. 標題結構

Web可訪問性最重要的部分之一是將用戶定向到網站和他們與之互動的內容。這是合併標題結構至關重要的地方。 

雖然通過更改字體大小在網站上直觀地製作標題很容易，但如果這些標題沒有標記為這樣，則螢幕閱讀器將無法特別識別網站的結構。沒有確定的標題結構也會使您面臨網站各個頁面不一致的風險。為避免遇到這些問題，請為您的網站設置一個結構，以便標題的層次結構清晰。這看起來像是有一個專門的H1、H2、H3 等等，不僅在視覺上反映，而且還嵌入到網站的原始碼中。這不僅對使用螢幕閱讀器的用戶有幫助，而且還可以確保整個網站的一致性，為每個人提供更好的體驗。

作為獎勵，擁有專用的標題結構可以讓搜尋引擎更好地掃描您的網站，從而獲得更好的SEO。明確建立了文本層次結構（例如H1、H2等）

2. 連結

用戶對他們在數位空間中所看到和互動的內容有著明確的期望，而連結是多年來一直以相同方式運作的事物之一。例如，在閱讀正文時，可以安全地假設連結的文本帶有下劃線並且可能與其他文本的顏色不同。因為這是用戶的期望，開發人員和設計人員應該接受它，而不是出於風格原因而背離它。下劃線文本的視覺指示器為用戶提供了決定是否與元素互動的提示，並確保他們不會錯過訊息。

此外，連結文本在具有描述性時更易於訪問。像「了解更多」和「點擊這裡」這樣的短語並沒有讓用戶清楚地知道他們將通過連結遇到什麼。但是，使用諸如「查看我們的 UX 資源」之類的連結文本可以讓用戶更好地了解單擊連結時會發生什麼。

連結的行內文本可以從正文中清楚地識別出來

所有超連結都清楚地說明了連結指向的用戶

3. 圖像

在您的網站上包含圖像時，要記住的一件重要事情是如何標記圖像。Alt文本（也稱為alt標籤和alt描述）用於描述網頁原始碼中的圖像，以便用戶無需實際查看圖像即可了解圖像中的內容。（如果您曾經訪問過某個網站並且圖像未加載但其位置有文本，那麼這就是替代文本。）替代文本對於通過螢幕閱讀器與網站互動的用戶特別有用，因為他們能夠了解圖像傳達的內容。請記住要注意這些替代文本描述中的詳細訊息量。如果圖像主要用於裝飾用途，簡短而簡單的描述是合適的，而不是可能用於頁面更重要圖像的稍長描述。

所有圖片都附有替代文字

替代文本對圖像類型進行了適當的描述

4. 音訊和影片

W3C 有很多關於如何使音訊和影片更易於訪問的指南。要記住的重要一點是，應該始終有一個可用的文本選項。包括字幕或附有所有音訊和影片文件的文字記錄對於可訪問性至關重要。失聰、聽力障礙或什至只是在無法收聽音訊的環境中（例如，在沒有耳機的嘈雜捷運車上）的用戶將感謝他們能夠輕鬆地使用您的內容。 

將創建隱藏式字幕作為影片創作過程中的常規步驟。更好的是，將字幕嵌入到您的影片中，這樣無論影片最終出現在哪個平台上，用戶都可以閱讀它們而無需打開或關閉字幕。在音訊文件中包含轉錄本也是一個好主意。雖然這些確實需要時間來開發，但讓您的用戶可以使用抄本為他們提供了另一種以最適合他們的方式使用您的內容的途徑。例如，在NPR的網站上，他們的許多節目都附有文字記錄，供用戶在無法收聽時閱讀。

所有影片都包含字幕

用戶可以輕鬆獲得音訊內容的抄本

5. 顏色

顏色可用於向數位世界中的用戶傳達多種訊息。例如，紅色通常與危險或錯誤相關，而綠色則與好事相關，或者意味著任務已經完成。但是如果用戶有色覺缺陷怎麼辦？如何在顏色之外有效地傳達相同的訊息？在這些情況下，包括其他溝通內容，如明文和圖標，可以確保用戶理解您的訊息，而不僅僅是依靠顏色。您還應該考慮添加圖案或紋理以指示視覺差異，例如Trello已在其平台中實施。

同樣，確保整個網站的元素和背景之間的強烈色彩對比是可訪問性的關鍵組成部分。強烈的對比度可以讓視力有缺陷的用戶更好地看到螢幕上的內容。有許多工具可以通過提供對沒有色覺缺陷的人來說不太明顯的對比度來確定顏色組合是否符合WCAG（例如這個線上對比度檢查器）。在提交之前檢查顏色組合始終是一個很好的經驗法則，以確保用戶能夠有效地與您的網站進行互動。

顏色並沒有單獨用於向用戶傳達重要訊息

圖案或紋理用於指示圖表、圖形等的視覺差異。

元素具有符合WCAG的強烈色彩對比。

6. 排版

開始創建或更新網站設計時要考慮的一個基本要素是排版。網站排版應該能夠以清晰易懂的方式為用戶提供他們需要的訊息。對於仍能看到螢幕但可能無法在網頁上清楚地看到所有細節的弱視用戶來說，易讀性尤其重要。

選擇易於使用的字體包括特別注意字符是否相互區分以及字體是否有足夠的字母間距。無障礙設計的一些額外排版最佳實踐包括將文本左對齊（對於從左到右閱讀的語言），確保文本可以輕鬆調整大小，並確保每行的行長度約為66個字符（文本除外）有更多空間）。 

為了幫助解決難以訪問的排版問題，一些組織開發了更易於訪問的字體，例如來自盲文研究所的這種字體，使設計師可以更輕鬆地使他們的網站易於訪問。還建議設計師選擇更大的字體大小，以使文本更易於閱讀和字符更易於區分。 

字體清晰易讀，字符之間具有明顯的特徵

大文本體左對齊

文本可以輕鬆調整大小，網頁仍然按預期運行

7. 導航和網站結構

有很多關於如何正確開發網站的訊息，以便用戶使用鍵盤導航而不是一隻滑鼠。但是，設計人員在設計階段也需要注意這些用戶。這在設計網站導航時尤為重要。使用滑鼠的人通常會用眼睛掃描網站，然後單擊導航項，而使用鍵盤進行導航的人通常會使用「tab」鍵進行導航，以便在使用頁面之前了解頁面上的內容。如果一個網站的導航很長，那麼鍵盤用戶很容易對大量的選項感到沮喪，以便找到他們想要訪問的訊息。為避免這種情況，請確保您的網站導航僅包含將用戶帶到他們想去的地方的必要項目。此外，請確保網站的原始碼遵循導航最佳實踐 讓人們輕鬆地在網站上使用鍵盤，而無需瀏覽不必要的項目。

8. 表格

表單似乎是一種不需要太多指導的簡單設計模式。然而，最近出現了採用極簡主義方法的表單，一旦用戶開始打字，就沒有明確定義的邊界或標籤。這使得看似簡單的表單對於許多用戶來說不必要地難以互動。與其刪除關鍵邊界和邊框來簡化表單設計，不如記住保留基本元素。他們工作是有原因的！ 

表單欄位具有明確定義的邊界和邊框

表單欄位有清晰的標籤