可訪問響應式Web設計的終極指南

可訪問的網站支持所有瀏覽器類型和所有用戶。這是W3C的一個重要話題，它每年都在不斷增長。設計可訪問性很難。有許多目標和要求需要考慮。但即使是朝著正確方向邁步的網站設計，也會讓世界變得與眾不同。在本指南中，我想考慮可訪問性的價值，因為它與響應式設計有關。大多數網頁設計師已經采用了響應式布局，因此如果您可以在工作流程中添加輔助功能，則可以覆蓋更廣泛的受眾。

響應式設計原理

響應式布局的目標是在每個設備上都能很好地運行。無論屏幕尺寸或分辨率如何，您的響應式設計都應始終可用。關注網站每個方面的可用性，這可能更容易從移動優先開始，因為您正在設計有限的功能，然后升級到支持更寬屏幕尺寸的桌面。在此過程中，您還將考慮可訪問性以及人們如何在較小的屏幕上使用您的網站。您的移動布局是否應增加文字大小？

在設計具有響應性和可訪問性的網站時，您需要考慮某些主題。以下是一些要考慮的要點：

排版對比

提供足夠的空白區域

導航行為

動態功能（圖像滑塊，視頻等）

創建響應式和可訪問的站點時，必須考慮所有這些功能。這兩個主題沒有直接關聯，但是當它們組合在一起時，它們創造了一個和諧的UI，適合每個人。

設計輔助功能

有充分的理由通過可訪問性核對清單來考慮您的網站應該如何訪問。這可能與屏幕閱讀器的圖像上的alt標簽等基本功能有關。它還可能與視力受損的用戶的顏色對比有關。

在設計內容之前，您應首先考慮您愿意支持哪種類型的可訪問性問題。現在考慮沒有鼠標或鍵盤的智能手機和平板電腦用戶。如果您的布局具有響應性，那么它將適合這些較小的觸摸屏設備。但布局是否可用？頁面的某些區域需要比其他區域更多的關注。但如果你愿意將你的腳趾放入可觸及性，我建議你從小開始慢慢移動。

導航結構

盡可能嘗試將所有導航菜單恢復為盡可能簡單。為響應式設計提供多級下拉列表并不總是最好的。有些網站更傾向于使用面包屑來進行多級網站設計，以便更輕松地瀏覽網站。這使用戶可以在需要時訪問子鏈接，但會將鏈接隱藏在鏈接與內容無關的頁面上。下拉菜單也可以使用。但是，對于可能不是瀏覽互聯網專家的用戶，您必須要更加小心和體貼。但是在較小的屏幕上，此菜單會轉換為標記為“按類別瀏覽”的單個鏈接。當用戶點擊它時，它將打開一個二級菜單，其中所有類別都列為鏈接。

目標購物網站導航

這不像典型的下拉菜單那樣工作，而是轉換為側滑菜單。此效果有效，因為每個鏈接都有一個大的可點擊區域，而不是添加到主菜單上的小子菜單圖標。如果您正在構建具有鍵盤輔助功能的導航，則導航順序非常重要。這可以通過CSS進行操作，并且有很多指導可以幫助完成此任務。該的tabindex屬性也是鍵盤導航非常重要。

另一種技術是跳轉到導航鏈接，許多網站都有屏幕閱讀器和沒有CSS的瀏覽器。這在較小的響應式布局中效果最佳，其中導航傾向于保留在一個位置（通常是頁眉或頁腳）。關于響應式導航設計，可以參考文章可訪問響應式Web設計的終極指南詳細內容

觸摸支持的UI

觸摸支持對于Web可訪問性至關重要。有些互聯網用戶沒有臺式電腦，所以他們唯一的在線方式就是通過觸摸屏設備。您網站上的所有元素都應通過觸摸或滑動進行交互。鍵盤可訪問性與觸摸支持同樣重要，盡管它們針對不同的客戶。網頁上的許多動態元素都需要用戶交互。他們中的大多數都是通過桌面/筆記本電腦環境中的鼠標點擊進化而來。

如果您的布局要響應，那么您的動態元素也應該如此。以下是應支持觸摸輸入的動態元素的一些示例。

幻燈片

視頻播放器

燈箱/組合

下拉導航

困難的部分是在所有觸摸屏設備上獲得足夠的支持。簡單的部分是你可以找到大量的免費資源，為你做到這一點。JavaScript近年來發展迅速，默認情況下，許多幻燈片插件都帶有觸摸支持。

關于智能手機需要記住的一件事是他們缺乏懸停事件。點擊元素通常被認為是活動事件，因此在觸摸設備上準確處理事件非常重要。還要考慮填充如何影響導航鏈接。鏈接上的額外填充使用戶可以更輕松地點擊和瀏覽網站，但它也占用更多空間。你應該找到所有鏈接的最佳位置，它們足夠大，但不會太大，以至于它們超過了屏幕。

內容重新排列

重新排列內容，以便訪問者可以快速瀏覽網站。為線條高度和邊距大的文本留出空間。考慮布局中的對比度也是明智之舉。文本應該非常容易閱讀，并且可以從遠處輕松瀏覽。

您只需在字段中輸入背景顏色和前景色即可獲得比率轉換。這可能是您可以為您的網站測試的最簡單的事情之一。檢查顏色非常容易，并且更容易修復它們以獲得更高的對比度。只需移動擦洗條，使文本變暗或使背景變亮（反之亦然）。

我想對內容做的最后一點是HTML的組織。禁用CSS后，您的用戶只會獲得原始HTML頁面。這可能不是很漂亮，但從可訪問性的角度來看，它通常更容易使用。如何編寫HTML將影響刪除CSS時布局的顯示方式。這是一個非常微妙的變化，它可能不會影響大多數瀏覽您網站的人。但對那些受益的少數人來說，這是值得的。

網站建設中響應式設計的主題是巨大的，Web可訪問性甚至更大。我希望本指南通過解釋它們如何協同工作來提高可用性來涵蓋這兩個主題的絕對必要性。在這些區域慢慢來，并愿意在需要時分支。但是，如果您只遵循本指南中的建議，您仍然會擁有一個令人難以置信的網站，該網站看起來很棒，并且可以全面正常運行。