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

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

響應式設計原理

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

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

排版對比

提供足夠的空白區(qū)域

導航行為

動態(tài)功能（圖像滑塊，視頻等）

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

設計輔助功能

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

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

導航結構

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

目標購物網(wǎng)站導航

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

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

觸摸支持的UI

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

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

幻燈片

視頻播放器

燈箱/組合

下拉導航

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

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

內(nèi)容重新排列

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

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

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

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