可訪問響應(yīng)式Web設(shè)計(jì)的終極指南

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

響應(yīng)式設(shè)計(jì)原理

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

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

排版對(duì)比

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

導(dǎo)航行為

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

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

設(shè)計(jì)輔助功能

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

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

導(dǎo)航結(jié)構(gòu)

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

目標(biāo)購物網(wǎng)站導(dǎo)航

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

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

觸摸支持的UI

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

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

幻燈片

視頻播放器

燈箱/組合

下拉導(dǎo)航

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

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

內(nèi)容重新排列

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

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

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

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