擁有一個可訪問的網站意味著更多的人可以使用您的網站和您共享的信息。 在發表文章之前,您可以自己進行幾項檢查,以確保儘可能多的人閱讀和理解您的文章。 您是否知道 Yoast SEO 和塊編輯器(WordPress 中的默認內容編輯器)具有內置工具,可以警告您常見錯誤並幫助您測試內容? 這是您可以輕鬆檢查的四項清單!
編寫可訪問的內容是為了確保您網站的所有訪問者都可以訪問和理解您的內容,包括有視覺或聽覺障礙的人以及匆忙滾動您的內容的人。 當然,這足以提高您網站的可訪問性。 但是搜索引擎(例如 Google)也強調您網站可訪問性的重要性,正如您在閱讀 這個帖子.
我們構建了 Yoast SEO 來幫助您優化和構建內容並提高可讀性。 插件中的工具可幫助您編寫可訪問的內容,同時您正在努力改進網站的 SEO。 此外,WordPress 塊編輯器允許您進行一些快速檢查,以確保您不會意外地將訪問者排除在欣賞您的內容之外。 讓我們潛入。
1. 為媒體添加文本替代
您應該始終擁有重要媒體文件(包括圖像、視頻和音頻)的替代文本。 如果沒有替代文本,搜索引擎和有視覺或聽覺障礙的訪問者可能無法理解您的頁面內容。
如何測試您的圖像是否可訪問
您應該首先檢查您的內容是否包含可以刪除並替換為純文本的文本圖像。 與純文本相比,文本圖像有幾個缺點,使其不易訪問。 您不能使用瀏覽器設置來調整文本或圖像背景的大小或顏色。 因此,有視力問題、色盲或視覺障礙的人可能難以看到它。 圖像還會增加頁面的載入時間。 這倆 網頁內容無障礙指南 和 谷歌 建議不要使用文本圖像。
接下來,您要確保所有圖像都有替代文本(又名 alt 標籤)。 Yoast SEO 分析會警告您是否有缺少替代文本的圖像,以及圖像是否也缺少這些中的關鍵短語。
替代文本描述了圖像的用途。 替代文本的長度取決於您的語言,但建議使用少於 125 個單詞。
當替代文字不夠用時
有時,您需要的不僅僅是替代文字來描述圖像。 當您顯示複雜的圖表或地圖時,請在正文中描述數據和結果作為圖像的補充。 避免在替代文本中出現重複和冗餘的信息。
閱讀更多: 圖片搜索引擎優化:如何優化替代文字和標題文字 »
為視頻和音頻輔助功能使用字幕和說明
如果您有產品的視頻演示,您希望儘可能多的人可以使用它。 字幕將幫助有聽力障礙的人更好地理解視頻中的內容。 不要只依賴自動字幕,因為它們通常是不正確的。
如果視頻顯示了敘述者沒有解釋的基本信息,或者視頻沒有聲音,則需要對有視力障礙的人進行描述。
如何上傳視頻的字幕
準備好視頻字幕文件後,您可以將其直接添加到視頻塊中的視頻中。
- 首先,添加一個視頻塊並選擇您的視頻。
- 接下來,在塊工具欄中選擇名為文本軌道的選項。
選擇此選項可讓您上傳文件或從媒體庫中選擇它:
繼續閱讀: 如何為視頻添加字幕 »
2. 讓你的文字易於閱讀
您是否曾經快速瀏覽網頁,然後發現您必須返回並再次閱讀一段才能理解它? 您可以按照以下建議使您的文本更易於閱讀 Yoast SEO可讀性分析.
使用短句和描述性標題可以使您的文本更容易被趕時間的人閱讀。 但是您知道它也可以讓有聽力障礙的人更容易嗎? 對於一些聾啞人來說,閱讀文本意味著用第二語言解釋它,因為他們的第一語言是手語。
如果您希望每個人都可以訪問您的文本,您將希望保持 Flesch 閱讀輕鬆度的高分,並避免使用複雜的單詞。 有時,當您談論某個主題時,很難讓您的文字保持簡單。 盡你最大的努力——如果你能讓你的文字更容易閱讀,它就會被更多的人訪問。
繼續閱讀: Flesch 閱讀輕鬆評分:為什麼以及如何使用它 »
3. 查找並糾正標題問題
屏幕閱讀器是一種通過大聲朗讀屏幕上的內容來幫助用戶的程序。 有視力障礙的人可以在電腦和手機上使用屏幕閱讀器,讓文本更易於訪問。 屏幕閱讀器對於有閱讀障礙的人也很有用。
使用屏幕閱讀器的用戶可以使用標題導航您的網頁,以找到他們感興趣的內容。 因此,標題應描述下面的內容,不應僅用於添加粗體或更大的文本大小等樣式。
使用標題進行輔助功能的提示
- 標題有六個不同的級別,表明您的內容的重要性。
- 您應該只在頁面上使用一次 H1 標題,而且大多數情況下,這將是您的頁面標題。
- H1 後面應該跟一個 H2; H2 後面應該是 H3,依此類推。
- 如果您有多個具有相同重要性的部分,您可以使用多個 H2 標題(或更低)。
如何測試標題順序是否正確
您可以使用塊編輯器中的文檔大綱功能來查看標題的順序是否正確。 您可以通過單擊編輯器上方工具欄中的信息圖標從「詳細信息」選項打開文檔大綱:
如果您的頁面標題順序錯誤,文檔大綱將用黃色背景和文本標記它們:標題級別不正確。 單擊文檔大綱中的標題將選擇標題塊,以便您可以更新它。
繼續閱讀: SEO 基礎知識 如何在您的網站上使用標題 »
4.確保顏色有足夠的對比度
您可以通過在您的網站上使用您的品牌顏色來加強您的品牌。 但是某些顏色組合可能會影響可訪問性。 您可能已經知道,如果有人是色盲,則很難看出紅色、紫色和綠色之間的區別。 因此,避免單獨使用紅色和綠色來顯示錯誤消息或警報。
如果您在淺色背景上添加淺色文本,則文本可能難以閱讀,如果文本較小,則更難閱讀。
使用塊編輯器顏色選擇器,您可以檢查您的背景顏色和文本顏色是否具有足夠高的對比度以供訪問。
如何使用顏色選擇器檢查顏色對比度
- 選擇要測試的基於文本的塊。
- 在塊設置側欄中打開顏色面板。
如果顏色對比度太低,您將看到一條警告,提示「這種顏色組合可能難以讓人閱讀」。
結論
對您的內容進行細微更改可以對您網站的可訪問性產生積極影響,而且不需要很複雜。 SEO 和可訪問性齊頭並進; 當你改進一個時,你很可能同時改進兩個。 您可能已經讀過「搜索引擎是盲目的」這句話,但您應該始終首先為人們寫作。
閱讀更多: 如何提高網站的可訪問性 »
Carolina 是 WordPress 核心團隊的成員。 她的重點是可訪問性和主題,她喜歡主題開發的各個方面。
接下來的是!