原文作者 | Bori Tenger 來源 | 摹客

正文

生活中難免會有這樣的場景，例如打電話告訴別人你開會快要遲到了。這聽起來是一個很簡單的操作，對嗎? 我也這么認(rèn)為。但隨即我又思考到另外一個問題，當(dāng)手中有一堆重物時又該如何進(jìn)行操作呢？此時，你只能聽到手機(jī)助手/電話傳來一些非常模糊的聲音；單手/無手操作這使得你無法瀏覽通訊錄…這些時候你會意識到網(wǎng)站易訪問性的必要性。

除了上述操作不便的場景，網(wǎng)站設(shè)計還要考慮用戶中的視覺障礙群體。只有全面考慮用戶群體的特點(diǎn)和需求進(jìn)行設(shè)計，才能設(shè)計出受用戶歡迎的網(wǎng)站。沒有考慮易訪問性需求的網(wǎng)站設(shè)計在某種程度上來說是不成功的，因為網(wǎng)站可訪問性是創(chuàng)建網(wǎng)站的良好設(shè)計的關(guān)鍵要求。

視覺障礙用戶

圍繞主題，本文中主要涵蓋了以下三個內(nèi)容: 什么是網(wǎng)站的易訪問性，為什么網(wǎng)站可訪問性很重要，如何保證/提高網(wǎng)站易訪問性。

什么是網(wǎng)站的易訪問性?

易訪問性是一種稱為包容性設(shè)計的方法論屬性，包容在這里意味著創(chuàng)造可供各類人群使用的產(chǎn)品。網(wǎng)站可訪問性包括設(shè)計讓障礙群體（身體/場景）可以舒適地使用網(wǎng)站，這類用戶可能在視覺、聽覺、神經(jīng)、認(rèn)知、言語或身體上有所損傷。

易訪問性設(shè)計是設(shè)計師工作流程中的一個核心所在。任何產(chǎn)品都需要面向不同的用戶群體。因此，我們必須充分考慮他們獨(dú)特的使用條件、情況和需求。為了使網(wǎng)站易于訪問，我們需要了解用戶的多樣性。學(xué)會從盡可能多的人身上學(xué)習(xí)，從不同的角度看問題。

易訪問性重要嗎?

是的，當(dāng)然重要。根據(jù)多樣性來看，不同類型的群體在使用我們網(wǎng)站的某些方面可能會遇到困難。易訪問性意識通過對人們的條件和動機(jī)提供有價值的見解，來幫助他們實(shí)現(xiàn)使用目的。實(shí)際上可訪問性還涵蓋了很多有用的方面。

無障礙設(shè)計思維并不僅限于為殘障人士提供解決方案，也可以提高網(wǎng)站的易訪問下，為其他用戶提供更好的用戶體驗。如果我們設(shè)計時考慮那些只有一只手臂的人，同時也可以幫助那些在生活中騰不開手或無手可用的人。因為每個人在不同的情境下都有特殊的操作需求。

除此之外，易訪問性還有利于網(wǎng)站SEO。如果你為搜索引擎優(yōu)化了一個頁面，它并不一定會帶來更好的易訪問性。但是如果你熟知易訪問性和SEO的關(guān)聯(lián)性，它可能會為你的網(wǎng)站帶來更好的整體效果。

兩者的關(guān)聯(lián)性包括：

• HTML語義化
• 清晰的頁面標(biāo)題和結(jié)構(gòu)
• 圖片alt屬性和標(biāo)題
• 鏈接錨文本
• 視頻和音頻內(nèi)容的文本

通常，易訪問性還能幫助我們避免意外地排除潛在用戶。如果我們想接觸到盡可能多的用戶，則必須采取一定的措施讓廣泛的訪問者樂于使用我們的網(wǎng)站。

色弱測試圖

提高網(wǎng)站易訪問性的實(shí)用指南

1. 提供文本替代非文本內(nèi)容

我們對網(wǎng)站上非文本內(nèi)容的感知完全基于我們的聽覺或視覺條件。當(dāng)電子學(xué)習(xí)課程在練習(xí)中使用純圖片內(nèi)容時，視力差的學(xué)生可能會錯過重要的信息。

同時，當(dāng)只提供沒有文本替代的視頻內(nèi)容時，我們也可能會失去聽覺障礙用戶的注意力。

對于有聽覺障礙的用戶，網(wǎng)站可以考慮使用屏幕閱讀器。當(dāng)我們添加屏幕閱讀器能夠捕捉到的適當(dāng)描述時，圖像也可以被訪問。根據(jù)圖像的用途，文本可以采用名稱的形式來標(biāo)記圖像的角色，也可以采用簡單的描述性標(biāo)識。

提示：屏幕閱讀器僅用于視覺目的的圖像——例如裝飾或插圖——超出了輔助技術(shù)的范圍，所以我們根本不需要對它們進(jìn)行標(biāo)記。

我們還需要為有聽力障礙的用戶提供視頻或音頻內(nèi)容的訪問。耳聾或重聽使用者在沒有字幕或文字記錄的情況下，信息獲取上可能會有困難，甚至無法感知。

視頻內(nèi)容不僅需要提供精確的同步字幕，也要支持用戶根據(jù)個人需要或喜好來切換字幕。當(dāng)音頻內(nèi)容具有全文抄本時，用戶就可以訪問它。我們可以將它們放在單獨(dú)的web頁面上或作為可下載文件提供。

請記住，不僅殘障用戶需要視頻字幕或音頻記錄，其他用戶都可能在處于類似的情景中訪問/使用網(wǎng)站。在嘈雜的環(huán)境中訪問者會非常感謝以上的解決方案。

當(dāng)你為非文本內(nèi)容提供文本替代時，有感知障礙的人可以清楚準(zhǔn)確地獲得你提供給他們的所有信息。

2. 思考顏色使用和對比策略

顏色可以幫助我們強(qiáng)調(diào)頁面中我們想要展示的區(qū)域，吸引用戶的注意，以促進(jìn)其獲取重要信息。但如果你只是采用普通的顏色方案，視力差或色盲的用戶很難完全理解頁面/網(wǎng)站內(nèi)容。

顏色并不是強(qiáng)調(diào)內(nèi)容或提示警告的唯一途徑。

當(dāng)設(shè)計具有不同背景顏色的元素時，也可以考慮使用圖案。因為不是每個人都能正確地區(qū)分顏色，所以使用不同的圖案也能幫助用戶區(qū)別信息。

當(dāng)你用顏色標(biāo)記元素時，要注意使用足夠的亮度差異。色盲或視力差的用戶可以通過強(qiáng)烈的明暗對比感知視覺元素。這樣也可以幫助所有用戶在惡劣的條件下訪問網(wǎng)站，例如，用戶試圖在強(qiáng)烈的陽光下填寫表格。

除此之外，使用元素之間的線厚和尺寸對比，例如加粗CTA文本，都會有所幫助。

我們需要文字顏色和背景之間有足夠的對比。這包括關(guān)于顏色或漸變背景、圖像、按鈕、圖表和地圖的文本。這有助于對比度敏感度低、視野狹窄或色盲的人獲得信息。

3. 允許訪問鍵盤導(dǎo)航

有行為障礙的人不能用鼠標(biāo)和鍵盤進(jìn)行導(dǎo)航，例如盲人用戶可以在瀏覽網(wǎng)頁時也能使用鍵盤。因此，網(wǎng)站上的所有功能應(yīng)該既支持鼠標(biāo)觸發(fā)，也可以用鍵盤操作。

殘障用戶鍵盤

鍵盤導(dǎo)航主要關(guān)注導(dǎo)航過程中活動的元素。只有當(dāng)用戶始終知道他們在頁面上的確切位置時，才會提供完整的體驗。因此，保持鍵盤焦點(diǎn)對頁面導(dǎo)航的所有元素可見，并確保焦點(diǎn)順序遵循一個精確的序列。

4. 不要使用降低易訪問性的表單占位符

在表單設(shè)計中，我們必須注意在表單字段中放置的所有信息。一些屏幕閱讀器不能識別這段文字，從而不被展示。因此，盲人或有視力障礙的用戶可能會完全忽略標(biāo)簽或提示。

最好的解決方案是將內(nèi)容放置在連接字段之外。當(dāng)我們想節(jié)省空間時，這些內(nèi)容又會占據(jù)一定空間。在本例中，我們可以使用浮動標(biāo)簽，這些標(biāo)簽出現(xiàn)在字段中，直到字段成為焦點(diǎn)。之后，它會粘在文件的邊框上。

占位符文本通常位于表單字段中。它提供了所需信息的額外提示或示例。當(dāng)我們從易訪問性的角度忽略占位符時，會出現(xiàn)許多問題。

首先，占位符文本中較低的色彩對比度會使視障用戶的可讀性變得更差。占位符文本需要非常好的短期記憶，因為當(dāng)我們開始輸入時，它們通常會消失。多動癥患者可能有記憶問題，在讀入占位符文本時就容易忘記提示信息。

我們可以幫助用戶——無論是否有視力障礙——通過將標(biāo)簽和提示放在表單字段之外來獲取它們。我們也可以忽略提示而不是以占位符文本的形式出現(xiàn)。

5. 仔細(xì)測試噪音、運(yùn)動和閃光

上文中我提到了讓用戶自主控制網(wǎng)站上的視頻或音頻內(nèi)容的重要性。但這并不意味著我們都喜歡把控制權(quán)掌握在自己手中。移動或嘈雜的內(nèi)容真的會讓部分用戶不知所措。自閉癥患者可能會經(jīng)歷由于噪音或快速運(yùn)動而造成感官超負(fù)荷。

如果主頁不以自動播放視頻或背景音頻開始，我們可以很容易地留住這些用戶。因此，我們需要為用戶提供自主暫停、停止或調(diào)整該內(nèi)容音量的能力。

色彩光點(diǎn)

小結(jié)

我希望本指南能幫助你了解一些無障礙思維，避免在設(shè)計網(wǎng)站時陷入用戶盲目性的陷阱。易訪問性能夠幫助我們提供良好的用戶體驗，提高用戶停留時間，吸引或留住用戶。

感謝你的閱讀支持 · 歡迎留言互動