昨天是周日，陪著弟弟去看了徐崢的電影《我不是藥神》，電影拍的很實際、很走心、很現實，強忍著淚水還沒哭出來。在深圳網站制作公司工作的我認為，從電影中看出來的是人們在面臨生活壓力下安全感缺失，在陽光照射不到的角落如同被拋棄，甚至是冷的瑟瑟發抖，那么《我不是藥神》產品中就表達了這部電影的可觀看性。

早前看過一個蘋果的宣傳片《apple不為多數人，也不為少數人》，這部宣傳片和《我不是藥神》的群體很類似，容易被人忽視的小眾群體就是我們今天的主要對象。

數字產品的可訪問性是構建可供廣泛人群使用的數字內容和應用的實踐，包括具有視覺，運動，聽覺，語言或認知障礙的個人。

使網站為所有人設計，被人過度神話了，認為那樣做既困難成本也高，但實際上并非如此。從設計初期就開始考慮產品可訪問性，其實并不會增加額外的功能或內容，因此也不應該會有額外的成本和努力。

但是，要修復一個已經無法訪問的網站可能就需要費一番精力了。我以前在CarbonHealth工作時，我們使用aXE插件來檢查了網站的可訪問性。我們發現僅在主頁上就28個違規行為需要解決。雖然聽起來很復雜，但我們發現這些問題并不難以糾正，只是需要花費一些時間和成本來研究這些問題，最后差不多幾天功夫我們就全部解決了。

我想分享一些我們曾用過的簡單步驟，來改善你的網站可訪問性。這些原則將側重于網站和移動端。

在開始之前，先來談談為什么做這些優化很重要。

一、為什么設計需要考慮可訪問性

作為設計師，我們有能力和責任確保每個人都能訪問我們設計的內容，無論其能力，背景或使用場景如何。做好產品可訪問性可以為每個人帶來更好的體驗。

美國有超過5600萬人（近五分之一）和全世界超過10億殘疾人。在2017年，有814起網站可訪問性訴訟在聯邦和州法院提起。僅這兩項數據就可以讓我們相信設計可用性的重要性。

可訪問性還有一個很好的商業案例：研究表明，可訪問的網站有更好的搜索結果，能夠覆蓋更多的受眾，對SEO友好，下載時間更快，同時還鼓勵使用更好的代碼結構，他們也總是會有更好的可用性。

以下講到的7個方面是很容易做到，可以幫助你的產品更接近滿足Web內容可訪問性規范（WCaG2.0）aa級標準。同時建議最好也去研究下最常用的輔助功能——包括屏幕閱讀器，屏幕放大器和語音識別工具。

1.增加足夠的顏色對比度

顏色對比是一個經常被忽視的Web可訪問性問題。如果對比度低，弱視的人很難從背景顏色中讀取文本。在關于視力損傷和失明的情況說明書中，世界衛生組織（WHO）估計有2.17億人患有中度至重度視力障礙。因此，考慮文本和背景之間的充分對比是至關重要的。

根據W3C規定，文本與其背景之間的對比度應該至少為4.5比1（符合aa級別）。對于較大和較重的字體，比率相對寬泛一些，因為它們在較低對比度下也能容易閱讀。比如使用的字體為18pt或14pt粗體，則最小對比度將降至3比1。

有些工具可以幫你快速檢查。如果你使用的是Mac，建議使用對比應用（https://usecontrast.com），使用此工具可以使用顏色選擇器立即檢查對比度。如果您想獲得更詳細的分數，我建議您在WebaIM顏色對比檢查器上輸入顏色值。此工具將計算常規和較大文本，得出級別（a，aa，aaa）的分數。你可以更改顏色值并實時查看結果。

2.不能僅使用顏色來區分關鍵信息

當你在傳達重要的事情、響應動作或提示時，不要把顏色作為唯一的視覺線索。弱視或色盲的人可能很難理解你的內容。

嘗試使用顏色以外的符號，例如文本標簽或圖案。在界面上顯示錯誤時，不要太依賴顏色，添加圖標或在消息中寫上一個標題。考慮為段落中的鏈接文本添加視覺提示（如字體加粗或增加下劃線），以便鏈接能突出顯示。

如果只使用顏色來區分數據，那么具有更復雜信息（如柱狀圖和曲線圖）的元素就特別難閱讀。使用其他視覺元素來傳達信息，如形狀、標簽和大小。還可以嘗試將多種模式進行組合，以使差異更明顯。Trello的色盲模式就是一個很好的例子。啟用后，通過添加紋理標簽能讓網站變得更容易訪問。

一個很好的技巧是將你設計的內容以黑白模式打印出來，看看你是否仍然可以理解其中的所有內容。你還可以使用ColorOracle這樣的應用，它可以實時顯示具有常見色覺障礙的人看到的內容。這些提示可幫助你確保站點中的信息障礙與顏色無關。

3.設計可用焦點狀態

你是否注意到有時會出現在鏈接，輸入框和按鈕周圍的藍色輪廓這些藍色輪廓稱為焦點指示符。默認情況下，瀏覽器使用CSS偽類在元素選中時顯示這些輪廓。你可能會發現這些默認焦點指示符不是很漂亮，然后一門心思的想要隱藏掉它們。但是，如果你去掉了這些默認樣式，請務必將其替換為其他內容。

焦點指示符可幫助人們了解哪個元素具有鍵盤焦點，并幫助他們在瀏覽站點時清楚自己的位置。這些都是對盲人，需要屏幕閱讀器，行動不便，受過腕管損傷以及喜歡這種導航的高級用戶有用的技術。甚至我們中的一些人也會使用鍵盤作為他們瀏覽網頁的主要方式。

應該可以聚焦的元素有：鏈接，表單字段，小部件，按鈕和菜單項。他們需要有一個焦點指示符，使它們看起來與周圍的元素不同。

你可以設計一個符合你網站風格的焦點指示符，并與你的品牌保持風格一致。創建一個高度可見的狀態，并具有良好的對比度，使得它從其他內容中脫穎而出。

4.在表單和輸入項外添加標簽和說明

僅使用占位符文本作為標簽是設計表單時大的錯誤之一。當位置有限或想讓設計更簡單和現代時，我們可能會想要順應這種趨勢。占位符文本通常是灰色的，對比度不高，因此很難閱讀。如果你像我一樣，你通常會忘記你在寫什么，所以一旦文本消失，很難知道這些字段是什么。

使用屏幕閱讀器的人通常使用Tab鍵瀏覽表單以跳過表單控件。依賴<label>元素讀取控件，通常會跳過任何非標簽文本（如占位符文本）。

始終幫助人們了解他們應該做什么，并以一種明確的形式給出。最好是標簽不會消失，即使這個人正在輸入信息；人們不應該失去他們的寫作背景。當設計師在他們的表單中隱藏描述時，其實是犧牲了可用性而追求簡潔。

這種做法并不意味著你必須用不必要的信息來混淆你的設計，只是確保提供必要的線索。太多的指導性文本可能和太少的問題一樣。目標是確認每個人有足夠的信息來完成他們的任務而沒有障礙。

5.為圖片和其他非文本內容準備有用的替代文本

弱視的人經常利用屏幕閱讀器來「聽」網頁。這些工具會將文本轉換成語音，這樣人們就可以在網站上聽到單詞。

有兩種方法可以顯示替代文本：

在圖片的屬性<alt>中；

在圖片本身的背景或環境中。

嘗試描述圖片中發生的事情，以及它對故事的重要性，而不僅僅是說「圖片」。

如果圖片純粹是裝飾性的，或者由于上下文已經解釋了內容而變得多余。嘗試添加一個空的<alt>屬性將使屏幕閱讀器跳過它。如果不寫任何替代文字，一些屏幕閱讀器將讀取文件名，這樣的用戶體驗會很糟糕。

谷歌正在研究一種圖像字幕人工智能，它能以94%的準確度描述照片（https://petapixel.com/2016/09/23/googles-image-captioning-ai-can-describe-photos-94-accuracy）。這個模型是開源的，仍在研究中，希望我們能看到它在不同的產品中使用。與此同時，我們應該在我們的內容中手動添加描述圖像含義和功能的文本。

6.在內容上使用正確的標記

標題，標記內容開始的地方。它們是給文本加上的標簽，用來定義其風格和目的。標題還創建了頁面內容的層次結構。

大字號的標題有助于讀者更好地理解內容的順序。同樣，屏幕閱讀器也使用標題標簽來閱讀內容。這樣，弱視的人通過閱讀內容中的每個標題來獲得頁面的大致內容。

在開發站點時使用適當的結構元素很重要。HTML元素向瀏覽器傳達它們包含的內容類型，瀏覽器應如何呈現或處理這些內容。頁面的組件和結構形成內容樹。讀取內容樹是屏幕閱讀器的強大功能，它們被盲人使用，使得他們可以「聽」頁面內容。

不正確使用標記會影響可訪問性。不要僅將HTML標記用于樣式效果，屏幕閱讀器通過標題結構（真正的標題，而不僅僅是大字號和粗體樣式的文本）按層次結構瀏覽網頁。使用你網站的用戶可以收聽所有標題的列表，按標題類型跳轉內容，或直接導航到頂級標題<h1>。

7.支持鍵盤導航

鍵盤可訪問性是Web可訪問性的最關鍵方面之一。有運動障礙的人，依賴于屏幕閱讀器的盲人，沒有精確肌肉控制的人，甚至高級用戶都依賴鍵盤來導航內容。

如果你像我一樣，經常使用鍵盤上的Tab鍵來瀏覽網頁上的交互元素：鏈接，按鈕或輸入項。我們前面討論的焦點狀態提供了當前選擇的組件的可視化指示器。

當你瀏覽頁面時，交互元素的順序很重要，導航必須有邏輯且直觀。選項卡順序應遵循頁面的閱讀順序：從左到右，從上到下——標題，主導航，內容按鈕和輸入項，最后是頁腳。

一個好的做法是僅使用鍵盤測試你的網站。使用Tab鍵選擇鏈接和表單。使用Enter鍵測試以選擇元素。驗證所有交互式組件是否可控且有序。如果你可以在沒有鼠標的情況下瀏覽所有網站，那么你的網站就做的很棒了!

最后一點，但并非不重要。請注意導航的大小——包括鏈接的數量和文本的長度。對于有運動障礙的人來說，通過長菜單進行切換可能會很困難。對于使用屏幕閱讀器的人來說，聽冗長的鏈接可能很麻煩——盡量保持簡潔。提供aRIaLandmarks或HTML5結構元素（如<main>或<nav>）將使導航更容易。

二、超越這些準則

這七條準則是一個很好的開始，如果你想要做更多的事情來使你的產品更容易訪問，我鼓勵你去做以下一些事：

確立一個可訪問性審查制度，使用審查制度來確定你的產品是否與輔助技術兼容并符合WCaG2.0aa級別標準。使用審查結果修復問題并進行再次測試。

任命審查員。你可以任命你公司的人做經常性的無障礙審查，可以是你的Qa團隊中的某個人。如果找不到有經驗的人，你可以雇傭一個外部供應商來做。

讓可訪問性成為你設計研究的一部分。在做研究時，驗證你關于可訪問性的假設是否正確，以及是否存在任何改進的潛在機會。招募殘疾人可能需要做更多的工作，請毫不猶豫地聯系協會和社區，人們愿意提供幫助。

總結

作為設計師，我們有責任倡導無障礙設計。有了它，我們使技術能為所有人服務，不管他們的能力、經濟狀況、年齡、教育或地域。

做有責任感的設計師，設計有價值的產品。

可用性：產品是否容易上手，用戶能否完成任務，效率如何，以及這過程中用戶的主觀感受可好，是從用戶的角度來看產品的質量。可用性好意味著產品質量高，是企業的核心競爭力。

可訪問性：Web內容對于殘障用戶的可閱讀和可理解性。

無論用戶是否殘障，都得通過用戶代理（Useragent）來訪問Web內容。因此要提高可訪問性，首先得考慮各種用戶代理：桌面瀏覽器、語音瀏覽器、移動電話、車載個人電腦等等。在Google，專門聘請了一些殘障雇員，來幫助提高產品的可訪問性。

分享名稱：快速提高產品的可訪問性的七個原則
文章路徑：http://m.newbst.com/news44/139094.html

成都網站建設公司_創新互聯，為您提供企業網站制作、面包屑導航、微信小程序、標簽優化、靜態網站、手機網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯