為客戶設(shè)計(jì)一個(gè)成功的網(wǎng)站的關(guān)鍵部分是確保盡可能多的終端用戶可以訪問(wèn)和享受這個(gè)網(wǎng)站。

那么，如果你發(fā)現(xiàn)大約有10億人不能享受你的設(shè)計(jì)，你會(huì)怎么辦?即使這些人成功地點(diǎn)擊了一個(gè)鏈接并訪問(wèn)了你創(chuàng)建的網(wǎng)站，他們也可能無(wú)法理解正在出售什么或?qū)Ш降浇Y(jié)賬頁(yè)面。

根據(jù)世界銀行的統(tǒng)計(jì)，全世界有10億殘疾人。那是全球人口的15%。

盡管如此，許多設(shè)計(jì)師在創(chuàng)造吸引人的應(yīng)用或網(wǎng)站時(shí)，并沒有考慮到用戶的不同能力。除非您的客戶明確地告訴您，他們正在支持殘疾客戶，否則您可能根本不會(huì)考慮這些用戶。

學(xué)習(xí)如何融入包容性網(wǎng)頁(yè)設(shè)計(jì)的概念意味著你能給你的客戶提供更好的結(jié)果;你的客戶能接觸到的客戶越多，你的設(shè)計(jì)就會(huì)得到越多的贊揚(yáng)和正面評(píng)價(jià)。

那么，如何在設(shè)計(jì)選擇中引入可訪問(wèn)性呢?

什么是網(wǎng)站無(wú)障礙?

從廣義上講，包容性指的是賦予社會(huì)邊緣人群權(quán)力的活動(dòng)或行為。包容性的設(shè)計(jì)意味著讓你的內(nèi)容更容易被那些有精神或身體問(wèn)題的人訪問(wèn)，這些問(wèn)題可能會(huì)讓他們更難使用傳統(tǒng)網(wǎng)站。

最終，可訪問(wèn)性是包容性設(shè)計(jì)策略的主要目標(biāo)之一。當(dāng)您使網(wǎng)站或應(yīng)用程序更容易訪問(wèn)時(shí)，您需要調(diào)整UI和代碼的某些方面，以使站點(diǎn)對(duì)具有某些限制的人盡可能容易接近和可用。

根據(jù)網(wǎng)絡(luò)無(wú)障礙倡議，許多現(xiàn)代網(wǎng)站和網(wǎng)絡(luò)工具的設(shè)計(jì)沒有考慮到那些有殘疾的人的需求。這就造成了可訪問(wèn)性障礙，使得一些人幾乎不可能使用網(wǎng)站。

以下是一些可能影響終端用戶與網(wǎng)站或應(yīng)用交互方式的不同類型的殘疾:

認(rèn)知問(wèn)題:影響理解，使瀏覽網(wǎng)站更加困難;

聽覺問(wèn)題:阻止客戶聽視頻和音頻內(nèi)容;

神經(jīng)問(wèn)題:使站點(diǎn)上的某些術(shù)語(yǔ)和操作更加困難;

物理問(wèn)題:難以滑動(dòng)或敲擊某些工具;

語(yǔ)音問(wèn)題:語(yǔ)音UI設(shè)計(jì)的常見問(wèn)題;

視覺問(wèn)題:在高度視覺化的網(wǎng)站上阻止正面體驗(yàn)。

Web可訪問(wèn)性還可以讓在特定情況下遇到問(wèn)題的人的生活變得更容易。例如，肌肉有問(wèn)題的人在使用小屏幕上的按鈕和鏈接時(shí)可能會(huì)有困難。

那么，你如何讓你的設(shè)計(jì)更容易理解呢?

了解你的聽眾

包容性網(wǎng)頁(yè)設(shè)計(jì)不僅僅是把字體做大一點(diǎn)，然后期待最好的效果。為了提供真正的無(wú)障礙體驗(yàn)，你需要了解客戶的目標(biāo)人群?；ㄐr(shí)間瀏覽客戶的用戶角色，向他們?cè)儐?wèn)有關(guān)殘疾人的問(wèn)題，可以幫助您做出明智的決定。

例如，微軟的包容性設(shè)計(jì)工具包要求設(shè)計(jì)師識(shí)別排除性，檢查網(wǎng)站中可能無(wú)法訪問(wèn)的部分，并從多樣性中學(xué)習(xí)。

在設(shè)計(jì)任何東西之前，問(wèn)問(wèn)自己是否可以:

解決任何獨(dú)特的需求，如視力問(wèn)題或聽力問(wèn)題;

更獨(dú)特的方法取代傳統(tǒng)的解決方案。例如，與其依賴顏色來(lái)突出顯示文本的一部分，你可以使用字體重量來(lái)代替嗎?這對(duì)色盲的人來(lái)說(shuō)可能是理想的;

創(chuàng)造一些既能吸引殘疾人也能吸引殘疾人的東西。

設(shè)計(jì)一個(gè)干凈清晰的布局

任何網(wǎng)站設(shè)計(jì)都應(yīng)該首先關(guān)注清晰度。

不管你的設(shè)計(jì)是否考慮到包容性，目標(biāo)應(yīng)該是盡可能提供簡(jiǎn)單直接的體驗(yàn)，避免在設(shè)計(jì)過(guò)程中出現(xiàn)任何錯(cuò)誤。

例如，沒有人喜歡充滿不合理的導(dǎo)航標(biāo)志的凌亂設(shè)計(jì)。你需要一個(gè)網(wǎng)站充滿了可以理解的鏈接，在任何屏幕上都容易點(diǎn)擊的按鈕，以及易于閱讀的大字體。

當(dāng)你為一個(gè)網(wǎng)站或應(yīng)用程序創(chuàng)建一個(gè)新元素時(shí)，問(wèn)問(wèn)自己如何才能讓來(lái)自各種背景的客戶生活得更輕松。例如，Parramatta park使用了出色的對(duì)比度、清晰的字體和理想的元素大小，以確保其網(wǎng)站盡可能讓客戶感到易于使用。

請(qǐng)注意按鈕是如何清晰和容易按下的。在任何屏幕上，顏色都是明亮和吸引人的，導(dǎo)航也很簡(jiǎn)單。記住，當(dāng)你設(shè)計(jì)一個(gè)包含型原型時(shí):

測(cè)試導(dǎo)航選項(xiàng)，確保它們易于使用;

不要讓屏幕太擁擠，記住在減少認(rèn)知負(fù)荷時(shí)少即是多;

確保你的設(shè)計(jì)在任何屏幕上都易于使用。

簡(jiǎn)化語(yǔ)言

一個(gè)包容性網(wǎng)站的視覺元素應(yīng)該盡可能的簡(jiǎn)單易懂。然而，重要的是不要忘記你處理書面文字的方式。

使用簡(jiǎn)單的術(shù)語(yǔ)而不是復(fù)雜的行業(yè)術(shù)語(yǔ)對(duì)那些有閱讀問(wèn)題的人來(lái)說(shuō)有很大的不同。還有排版方面的問(wèn)題需要考慮，從字體的顏色、字體與所選背景的對(duì)比，到字體的清晰度。

記住，在意象和語(yǔ)言方面的次優(yōu)設(shè)計(jì)也會(huì)影響那些沒有殘疾的人。遵循簡(jiǎn)單性的基本規(guī)則可以為任何訪問(wèn)您網(wǎng)站的人提供更好的體驗(yàn)。

確保你:

為視覺對(duì)比度添加下劃線、粗體或調(diào)整大小的鏈接;

加強(qiáng)適當(dāng)?shù)男芯?，字體大小約為1.5倍;

啟用一致的段落間距;

使用簡(jiǎn)單的語(yǔ)言，減少認(rèn)知負(fù)荷;

使用縮寫時(shí)要描述它們;

使用清晰的標(biāo)題來(lái)邏輯地結(jié)構(gòu)內(nèi)容;

例如，看看Nomensa網(wǎng)站上的文字設(shè)計(jì)選擇。大量的空白讓內(nèi)容更容易閱讀。簡(jiǎn)單的詞是可以理解和吸引人的。甚至字體的選擇也模仿徽標(biāo)，同時(shí)提供可讀性。

優(yōu)化網(wǎng)頁(yè)設(shè)計(jì)顏色

包羅萬(wàn)象的網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)會(huì)來(lái)也會(huì)去。然而，色彩和對(duì)比對(duì)你的決定總是至關(guān)重要的。

通過(guò)確保您的設(shè)計(jì)元素滿足WCAG定義的最小顏色對(duì)比度，意味著您為視力受損用戶提供了可讀性支持，并改善了非視力受損用戶的體驗(yàn)。

對(duì)于在這方面需要額外幫助的設(shè)計(jì)師，斯塔克等工具可以幫助衡量顏色對(duì)比。該工具還提供了一系列旨在支持可訪問(wèn)性的其他工具。

請(qǐng)記住，您需要訪問(wèn)的最小比率將取決于您正在設(shè)計(jì)的元素。WCAG建議以下準(zhǔn)則:

圖形對(duì)象(圖表)比例為3:1;

3:1比例的焦點(diǎn)，活動(dòng)狀態(tài)，懸停;

3:1比例的可點(diǎn)擊項(xiàng)目和表單組件。

當(dāng)你在研究Stark等應(yīng)用的顏色對(duì)比策略時(shí)，一定要考慮色盲用戶的需求。世界上4。5%的人看待顏色的方式和其他人不一樣。如果你發(fā)現(xiàn)在堅(jiān)持客戶的品牌指導(dǎo)方針的同時(shí)很難實(shí)現(xiàn)正確的對(duì)比，也可以嘗試下劃線和加粗元素。

考慮視頻和音頻元素

最后，現(xiàn)在越來(lái)越多的公司選擇在網(wǎng)站中嵌入視頻和音頻內(nèi)容。這些視覺和聽覺工具可以提供關(guān)于品牌及其功能的有用信息。然而，您可能很難僅通過(guò)視頻和音頻向某些客戶傳遞重要信息。

視頻內(nèi)容的字幕對(duì)于聽力受損的人來(lái)說(shuō)可能是至關(guān)重要的。您可能需要考慮在預(yù)先錄制的視頻中添加文本，以便有聽力障礙的人能夠訪問(wèn)。這些文本和字幕對(duì)那些無(wú)法通過(guò)智能手機(jī)或電腦獲取音頻的人也很有幫助。

文本還可以幫助那些有視覺障礙的人，方法是讓文本到語(yǔ)音工具向用戶描述一些內(nèi)容。這樣，每個(gè)人都能獲得有用的信息。例如，看看這段來(lái)自華盛頓大學(xué)的視頻。它確保每個(gè)人都能理解內(nèi)容中的內(nèi)容。如果你為客戶添加抄本到你的網(wǎng)站頁(yè)面，你也可以幫助他們從改進(jìn)的SEO也受益。成績(jī)單比視頻和播客提供更多的關(guān)鍵詞排名機(jī)會(huì)。

無(wú)障礙設(shè)計(jì)優(yōu)先

設(shè)計(jì)師要想在提供真正具有包容性的UI環(huán)境方面表現(xiàn)出色，他們就必須像為自己這樣的人創(chuàng)建界面一樣，善于為殘疾人創(chuàng)建網(wǎng)站。作為設(shè)計(jì)師，我們盡量做到包容，但我們很容易陷入讓網(wǎng)站更容易使用的想法。

如果你能站在與你不同的人的立場(chǎng)上，先考慮一些不尋常的需求，那么你就會(huì)發(fā)現(xiàn)你為每個(gè)用戶提供了更強(qiáng)大、更有吸引力的體驗(yàn)。

例如，不要先為與你有相同視覺需求的人設(shè)計(jì)一個(gè)網(wǎng)站，然后再考慮對(duì)色盲或視力有問(wèn)題的人進(jìn)行調(diào)整，而要先考慮殘疾人的需求。

你可以通過(guò)查看Vasilis Van Gemert的博客文章“危機(jī)方法”來(lái)了解更多關(guān)于把不尋常的需求放在首位的知識(shí)。

可訪問(wèn)性有利于業(yè)務(wù)

包容性的網(wǎng)頁(yè)設(shè)計(jì)，或者無(wú)障礙設(shè)計(jì)，都是關(guān)于最大化你的客戶可以獲得的潛在受眾。無(wú)論最終用戶處于何種情況，您都應(yīng)該確保利用了包容性設(shè)計(jì)。

如果你能向你的客戶證明，你可以滿足所有客戶的需求，你就可以打開更多的受眾和更多的機(jī)會(huì)。