在2018年里，網絡無障礙訴訟案件大幅增加，因為在某些國家的法律里無障礙是一項人權?，F在網站設計師們都會開始意識到無障礙網站是強制的。根據這一點的建議，我們這里整理了幾個最重要的網站設計技巧讓你的網站設計在可訪問性與包容性方面得到比較好的優化技術。

如果你決定全面檢測你的網站設計是否符合可訪問元素，同時也意識到你的網站設計需要徹底更新，這里有最熱門的網站設計工具和資源，希望可以你網站設計師的你帶來幫助。

1、定義可訪問性

包容性設計不僅僅意味著可訪問性

網站設計的可訪問性和包容性設計有時是可以互換引用的，但是沒有認識到它們之間的區別可能會產生嚴重的后果。無障礙設計就是消除障礙，讓所有用戶都可以使用我們設計的應用程序和網站。

在網站設計中使用更大的字體大小可以減少了“無法閱讀文本”的障礙——希望網站設計師能記住這一點。因此，網站設計師要么允許某些用戶切換到另一種“可訪問模式”，要么創建一個可訪問但獨立的版本，可以使用導航中的鏈接訪問?，F在，這不僅模糊了可訪問和不可訪問之間的界限，因為視力受損的用戶仍然必須找到這個“可訪問站點”，而且它一點也不包容，因為我們疏遠了這些用戶。他們被隔離，讓人感覺不同，最重要的是，我們需要設計和開發兩個版本的界面，花費額外的時間和e-ffort。

相反，我們可以簡單地設計一個單一的、更具包容性的界面，讓每個人都能使用更大的字體。畢竟，即使是沒有視覺障礙的用戶也能從更輕松地閱讀文本中獲益，這就是為什么包容性設計對殘疾人和非殘疾人用戶都是一種勝利。包容性設計不會削弱那些沒有殘疾的人的體驗。事實上，WCAG定義的絕大多數易訪問性規則——Web內容易訪問性指南，都是可用性提示，如果實現了這些提示，所有用戶都將從中受益。

2、簡化語言

書面文字占據了網絡的很大一部分，但如果有人看不懂，那就錯失了一個機會

當涉及到書面文字時，如果我們想要設計出迎合所有人的體驗，我們需要考慮的因素有很多。有詞語本身的簡單性，這可以影響閱讀困難的人，有排版，這可以影響視力受損的用戶，還有一致性，這可以影響那些認知障礙的人。當然，次優設計對那些沒有殘疾的人和殘疾的人產生的影響一樣大。

注意這些規則，如何改進排版，從而提高可讀性：

*將文本僅向左或向右對齊

*下劃線鏈接，以增加視覺對比

*強制行距至少為字體大小的1.5倍

*段落間距：至少1.5倍行距

*段落寬度：不超過80個字符

如何減少認知負荷：

*使用簡單的語言

*第一次使用時定義縮寫

*確保鏈接文本被有效地描述

*用相同的鏈接文本匹配相同的url

*使用清晰的標題邏輯地組織內容

3、優化色彩對比

顏色對比是關鍵——確保你做對了

色彩對比是衡量兩種設計元素的顏色彼此區別的程度，這個度量的單位是一個比率，并且有一個最小的比率作為目標。假設各種設計元素滿足WCAG定義的最小顏色對比度，我們不僅為視力受損的用戶提供了可讀性，還為那些沒有視力受損的用戶提供了更高的可讀性。這是我們使用幾乎為零的e-ffort設計的許多方法之一。

那么，最低要求是什么？我們如何檢驗它？首先，像斯塔克這樣的色彩對比度分析儀可以用來測量色彩對比度。然而，最低比率，我們需要目標取決于元素本身，即是否這是一個重要的UI元素，如一個圖標或表單字段，或者，如果文本元素，字體大小是否小或大，是更大的字體可讀性更強之前修補的對比。

以下是WCAG為背景文字訂定的色彩對比度要求：

*14pt加粗或18pt正常：4.5：1（7：1更好）

*14pt加粗或18pt普通，及以上：3：1（4.5：1更好）

這些是UI元素的需求：

*圖形對象（如圖表）：3：1

*焦點、懸停和活動狀態：3：1

*可點擊圖標和表單元素：3：1

上面提到的Stark應用程序也可以模擬我們為不同色盲類型的用戶所做的設計——畢竟，世界上4.5%的人有很多潛在的用戶。如果你發現很難在正文中實現與鏈接的最佳對比度，請在它們下面劃線以使鏈接更容易被發現，因為一些色盲用戶根本看不到顏色對比度！

4、幫助用戶修復錯誤

讓人們知道他們做錯了什么

錯誤常常會導致混亂，特別是當用戶不知道他們到底做了什么，或者如何修復時。錯誤是不可避免的，特別是對于現代的用戶來說，他們帶著自己的心智模型，急匆匆地投入到界面中，這就是為什么幫助用戶克服錯誤對于包容性是至關重要的。

自然，最常見的情況下，用戶可能犯錯誤是當填寫表單，并經常由于各種各樣的障礙，即難于理解的認知障礙，導致錯誤的數據輸入一個馬達殘疾，等等。首先，如果我們可以通過編程來解決用戶的錯誤，那么危機就可以避免。一個實際的例子是，如果URL提交還沒有添加https：//，那么可以將https：//添加到URL提交中，而不是強迫用戶自己修改URL提交。

使用表單標簽描述輸入字段，使用占位符描述可接受的輸入

考慮以下其他減少表單錯誤的技巧：

*總是使用表單標簽來描述輸入字段

*和占位符來顯示可接受輸入的示例

*啟用自動填充和自動完成功能，以減少輸入要求

以下是一些幫助用戶改正錯誤的建議：

*實時清晰顯示表單錯誤

*讓用戶在提交之前驗證他們的輸入

*重要且經常被遺忘：不要讓用戶覺得自己很愚蠢！

5、注意“跳轉到主要內容”

這可能是一個模糊的可訪問性特性，所以要特別注意

跳轉到主內容是一個相對模糊的可訪問性特性，針對那些使用屏幕閱讀器導航ui的用戶。您可能從未聽說過這個特性；這就是它的包容性。屏幕閱讀器，或者僅僅是那些主要使用鍵盤導航ui的用戶，使用tab鍵通過tab鍵點擊目標。如果沒有禁用，那么在桌面web瀏覽器中選擇表單字段時很可能會遇到這種情況，因為這比單擊要容易得多。

跳轉到主內容是一種可訪問性增強，通過繞過主導航幫助這部分用戶避免重復——這是通過讓第一個選項卡項有一個跳轉到主內容的鏈接來實現的。對于那些不使用屏幕閱讀器的用戶來說，這個鏈接是模糊的，因為這個鏈接只顯示過一次選項卡。試著用谷歌搜索一些東西，然后按tab鍵！

同樣重要的是要直觀地指出當前關注的是哪個元素，因為選項卡索引可能會轉移到一個意想不到的位置（選項卡索引因此屏幕閱讀器從上到下讀?。?。當tab - through tap目標為：focus狀態時，瀏覽器就知道自動設置元素的樣式。就CSS代碼而言，這常?？雌饋硐褚粋€藍色的box-shadow：，但實際上它是outline：，所以請確保不要覆蓋這個網站設計樣式！

6、不產生壓力

不要忘記以犧牲設計為代價的用戶

沒有人喜歡感到壓力，但對于那些有運動或認知障礙的人來說，壓力可能會引發焦慮。多年來，隨著越來越多的任務可以通過設備來完成，界面變得更加動態。遺憾的是，太多的動態體驗是設計師試圖以可用性為代價使ui更具想象力的結果。一個有用的建議是簡化布局并刪除不必要的動態元素。

這包括傳送帶、彈出窗口、提醒和分散注意力的動畫。

接下來，讓我們看看如何在網站設計中使這些元素能對殘疾人開放。首先，我們需要對需要關注的自動播放媒體增加一定程度的控制，因為這可能會給那些有認知障礙的人增加額外的認知負荷，讓他們感到不舒服。WCAG 2.0定義的規則是，如果媒體運行超過三秒，那么它應該是可控的。任何其他可以自動滾動、閃爍或以其他方式移動而無需用戶與之交互的東西，例如動畫和旋轉木馬，如果持續時間超過5秒，也應該是可控的。

如果媒體運行超過3秒，則應該是可控的

一般來說，用戶不喜歡意外的移動/媒體，最好避免它。請注意，同樣的規則也適用于每秒閃爍超過三次的元素，特別是當它是高對比度和紅色時，因為這可能導致癲癇發作！

關于聊天消息、警報、提醒、新聞提要等，用戶應該能夠限制它們的頻率，以便自己有更多的時間來閱讀和理解正在通信的內容，而且還建議用戶使用esc鍵輕松地消除任何警報或可見障礙。執行任務的壓力有時是不可避免的，因為一些接口，比如銀行接口，可能會因為安全原因超時，因此這些警報必須是顯而易見的。在這種情況下，需要更多時間的禁用用戶應該提供這樣做的機會，讓界面知道用戶沒有放棄它，并錯誤地將數據暴露出來。

7、繼電器與開發人員

不僅僅是網站設計師需要對網絡友好

當涉及到增強可訪問性時，開發人員應該分擔一半的責任，特別是當涉及到使用戶界面對屏幕閱讀器友好時。為屏幕閱讀器優化網站設計主要發生在幕后，對非殘疾用戶沒有任何影響，這使得這些網站對所有能力的用戶都非常包容。對于那些想知道的人來說，屏幕閱讀器通過有聲朗讀屏幕上的內容來幫助視力受損的用戶。但是圖像呢？沒有文本標簽的圖標呢？屏幕閱讀器在沒有文本描述的情況下如何準確地傳達設計元素？這些輔助技術如何快速地將焦點轉移到搜索和導航等關鍵地標上？這正是開發人員需要解決的問題。

沒有附帶文本的設計元素可以使用HTML在幕后進行描述，這里有一個很棒的清單，你會想要添加書簽。

讓我們來看看一些關鍵的方面：

*使用語義HTML元素

*使用ARIA地標角色向HTML元素添加更多上下文

*在這里聲明（正確的）語言（WCAG指南）

*始終形成元素

*使用“alt文本”（錯誤！未指定文件名）用于圖像的文本替代（此處提供指導）

*提供無JS后備，永不使用內聯腳本

8、選擇簡單的手勢

我們不僅僅用鼠標來導航——想想手指操作

選擇簡單的手勢而不是復雜的手勢將贏得非殘疾用戶的支持，同時使殘疾用戶可以訪問ui。手勢在應用程序和網站之間往往是不同的。首先是用戶期望問題；例如，在觸摸屏應用程序上進行滑動交互是相當正常的，但用戶通常不會想到在網站上進行滑動，甚至在移動網站上也不會。除此之外，對于殘疾用戶來說，除了簡單的點擊和點擊之外，還有什么需要技巧的嗎？

答案是肯定的，但對于非殘疾用戶來說，這也有點讓人望而生畏。是說你試過旋轉谷歌地圖嗎？這是一個非常挑剔的經歷，對于那些有運動障礙的人來說，這幾乎是不可能完成的任務。由于谷歌映射沒有提供使用可單擊按鈕旋轉的替代方法，因此該功能既不可訪問也不包含。

因此，我們需要逐個問自己，‘我們網站設計中真的需要這種復雜的姿態嗎？例如，一個靜態的垂直堆棧是否可以像滑動旋轉木馬一樣工作？在這兩種情況下，我們都會讓內容以任何一種方式溢出視圖端口，那么滑動旋轉木馬真正實現了什么？對于非殘疾用戶來說，滑動功能是否可以逐步增強？在這種情況下越簡單越好。

與此同時，請務必確保網站設計中的tap目標至少為44px2，以便它們易于單擊和點擊，同時也可用于視覺可視性，并且間距合理，以減少錯誤單擊的數量。

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.zz235.com/21645.html