設計無障礙網頁重點

為無障礙設計,特別是為屏幕閱讀器設計,是每個網頁設計師需要具備的技能。無障礙性的重要性怎麼強調都不過分。

在這篇文章中,我們將回顧你需要知道的關於為屏幕閱讀器設計的基本要點。通過了解基礎知識,你將更好地準備創建最無障礙的網站。

雖然每個屏幕閱讀應用的工作方式可能有些不同,但它們的功能確實相似。它們還提供了額外的設置選項,以便根據用戶的喜好進一步定制。

 

一、無障礙環境的三個組成部分

 

可訪問性可以分為三個部分。
內容、視覺設計和開發。我們將觸及所有這些部分,因為它們是如此的相互關聯和同等重要。作為一名設計師,你的工作可能是專注於視覺無障礙性(和色彩無障礙性)。
然而,了解無障礙性與內容和開發的關係也是至關重要的。這樣,你才能更好地倡導無障礙性,並能更快地發現無障礙性問題。

 

二、SEO布朗尼點

 

許多瀏覽器,尤其是谷歌,會懲罰那些無法訪問的網站,這已經不是什麼秘密了。像圖像的alt文本和適當的標題層次結構是SEO檢查器首先會標記的事情之一。因此,除了用戶體驗之外,還有一個額外的好處,就是確保你的網站是可訪問的。

但你想想看。搜索引擎不希望將訪問者引導到他們不會使用的網站,這違背了搜索的目的。有很多網站不在乎搜索引擎的例子,比如網絡應用或在線產品,這很好。 SEO不應該是創建無障礙網站的唯一動機。對於那些依賴搜索引擎結果流量的網站來說,這應該是一個可愛的好處。

 

三、標題、標題和整體文案

 

讓我們從內容及其背景和對用戶的意義開始。因為大多數網站內容還是以書面形式出現,這是一個很好的開始。

 

1. 使用符合上下文的頁面標題

每個網頁都需要有自己的標題,這樣可以讓所有的訪問者將網頁與其他網頁區分開來。它通常與網頁的第一個標題相同。一個好的做法是把頁面名稱放在第一位,然後是網站名稱,如公司或組織名稱。此外,如果頁面是一個多步驟流程的一部分,如註冊或結賬流程,包括步驟號,如3的步驟1。

 

2. 使標題實用化

標題是任何頁面的重要元素。首先,它們打破了大塊的文本。第二,它們提供了後面內容的上下文。第三,它們便於掃描。最好的標題是有意義的,並為頁面的內容提供了很好的結構。對於使用屏幕閱讀器瀏覽您網站的訪客來說,它們至關重要。標題應該讓他們深入了解下面的內容。這就是為什麼短而精的標題是最好的。

倒金字塔寫作結構的成功是有原因的。確保你正在使用的內容遵循這種模式。而且,確保你也能正確組織和設計這些內容。

有些屏幕閱讀器會在閱讀文本本身之前宣布 “標題一”、”標題二 “等。

 

3. 使用有意義的鏈接(和按鈕)文案

對於鏈接來說,這一般是很好的建議,但鏈接文案在斷章取義時需要有意義。像 “提交 “或 “點擊這裡 “這樣的鏈接文案並不具有信息量,斷章取義的文案是沒有意義的。鏈接文案需要為即將發生的事情設定一個預期。你要把用戶帶到哪裡?通過點擊鏈接(或按鈕),他們要做什麼、看到什麼或完成什麼?盡可能的明確,你就會有一個有意義的鏈接。

 

4. 提供明確的指導

對於交互式元素,如表單,尤其如此。你不僅要提供明確的指示以避免錯誤信息,還要確保你的錯誤信息也一樣清晰易懂。一般來說,要避免使用技術術語。不要忘記描述輸入要求。

我相信大家都見過太多臭名昭著的密碼字段,這些字段沒有給出任何說明,當你沒有猜對這些說明時,就會產生錯誤。當依靠讀屏器來了解出錯的地方和原因時,就更難弄清楚了。
這正是為什麼必須要有明確的指示。否則,在最好的情況下,你正在煩擾你的潛在客戶。在最壞的情況下,網站是字面上的人轉換或訪問重要信息的方式。

 

5. 編寫和構建簡潔的內容

我們已經提到了標題的倒金字塔。對於內容也很重要! 使用短小精悍、直接的交流是關鍵。避免使用技術或行業專用術語。避免使用複雜的單詞或短語。如果需要,提供一個詞彙表。第一次使用縮略語時,請對其進行擴展以確定其含義。稍後會有更多關於縮略語的內容)。

使用子彈和其他文字樣式(如粗體或斜體)來組織內容,區分其部分,並強調不同的信息。

 

6. 注意同音字

如果可能的話,在你的文案中避免使用同音字。這些詞根據上下文的不同而發音不同,如 “讀 “和 “讀 “或 “合同 “和 “合同”。
不幸的是,屏幕閱讀器並不總是理解上下文,並且可能會將單詞發音錯誤。

 

7. 屏幕閱讀器和標點符號

首先,屏幕閱讀器對某些標點符號的停頓,包括。
· 句號
· 分號
· 逗號
· 問號
· 感嘆號
· 段落結尾
屏幕閱讀器對其他文字處理方式也有很好的反應,比如列表和文字、裝飾。
要知道,屏幕閱讀器在能發音的情況下,會盡量念出縮寫詞,否則會拼出字母。常見的縮略語,如 “NASA”,他們會這樣發音。而他們會把 “NFL “讀成字母N-F-L。

圖片和多媒體
如果一個內容不是書面的,那它將是一個圖像或其他多媒體文件。讓我們來介紹一下如何與它們合作以實現屏幕閱讀器無障礙的一些關鍵要素。

 

8. 圖片上的Alt文字

如果有的話,屏幕閱讀器會讀取圖片的alt文字。如果沒有的話,大多數屏幕閱讀器會完全跳過它,然而,根據用戶的偏好,有些屏幕閱讀器還可以讀取訪問者的文件名。你沒有辦法隱藏有圖片的事實。一定要花時間包含一張圖片的描述性摘要–從社交媒體圖標到照片,以及中間的所有內容。
一些屏幕閱讀器如JAWS會在圖片前加上 “圖文 “或 “圖文鏈接”,如果圖片也鏈接到某個地方,也會在圖片前註明。

 

9. 錄音謄本和標題

如果您使用的是視頻、音頻文件或其他多媒體,請準備好使用它們的文字稿或字幕。許多互聯網用戶有聽力障礙,而其他用戶則沒有工作的揚聲器。無論哪種方式,重要的是你要在多媒體文件中包括正在說的內容,但也要包括任何其他額外的聲音提示,如背景或噪音或音樂。如果有人在屏幕外掉了東西,如果有人在尖叫、哼唱或喘息,或者當有人進入或離開一個房間時,它發出了聲音,請註明。基本上,包括任何和所有聽覺線索的描述。

額外的屏幕閱讀器功能?
讓我們來談談你可能不知道的一些額外的屏幕閱讀器功能。

 

10. 屏幕閱讀器可以暫停

自然,屏幕閱讀器是可以暫停的。不過,用戶也可以順利地回到原處重讀一些東西,無論是一個單詞還是一句話。此外,他們還可以讓讀屏器一個字母一個字母地拼寫出一個單詞。

 

11. 屏幕閱讀器與打字

在輸入時,讀屏器也會讀出用戶輸入的內容,通常是一個字母一個字母地讀。密碼字段是個破例,每輸入一個字符就會宣布 “星號 “或 “星”。

 

12. 在頁面加載時宣布

當一個頁面正在加載時,屏幕閱讀器會讀出頁面標題。有的還會在頁面加載時宣布頁面上的鏈接數量。

 

四、結束語

 

拙劣的編碼網站無法很好地轉化為屏幕閱讀器,但內容拙劣、佈局不當或結構設計不當的網站也是如此。這就是為什麼無障礙性是一個三方面的努力。

首先是內容,然後是視覺設計,以確保所有的內容都被適當地放置。然後,進入開發階段,確保它的編碼良好。這篇為屏幕閱讀器設計的介紹是確保你提供無障礙設計的絕佳起點。

About the Author

You may also like these