你實際上應該做什麼？
您的網站可能看起來很棒。您已經讓設計師工作了他們的魔術，拍攝的專業照片以及精心製作的完美副本。但是，它可以為不典型的方式與之互動的人提供什麼樣的經驗呢？想想用戶使用屏幕讀取器導航，使用自適應輸入工具，甚至可以改變顯示內容的顯示方式。
在您的網站上運行Web可訪問性評估工具（WAVE）。這是一個免費的自動化工具，可掃描您的網頁以找到常見的可訪問性問題。 Wave在視覺上突出顯示頁面上的問題區域，查明基礎代碼，並提供建議以幫助您修復它們。
圖1-海浪工具對公民網站的分析
某些結果似乎有點太技術性和術語（這是一個實際的詞！），但不用擔心 – 我們列出了一些關注的關鍵領域。這些是我們在審核數字服務時遇到的一些最常見的可訪問性問題。無論您是否仍處於設計階段，還是回去修復實時網站，解決這些站點都可以對您的網站的可用性和可訪問方式產生真正的影響。
讓我們潛入！
1。 alt文字
圖像很棒，它們為網站增添了生命，可以幫助您的內容。有些圖像純粹是裝飾性的，就像您酒店的一張餐桌拍攝的照片一樣。其他人則更有用，例如圖標或照片顯示您的豪華套房的裝飾方式。
但是看不到這些圖像的人呢？想想盲目的讀取器用戶或選擇禁用圖像以獲得更專注體驗的神經差異用戶。您如何容納他們？
這就是替代文本（ALT文本）的來源。這是一個簡短的文本描述，添加到了將其目的或內容傳達給看不見的用戶的圖像中。首先問自己： 此圖像會為內容增加價值嗎？ 如果是這樣， 到底需要描述什麼？
如果圖像純粹是裝飾性的，請使用空的alt文本（alt =”）標記。這樣，屏幕讀取器將跳過它，避免添加不必要的聽覺混亂。
✅良好的Alt文字：“帶有海景和特大號床的Deluxe Suite”
❌不好的Alt文本：“ IMG_2837”或“照片”
2。顏色對比
您可能有一個與您的品牌相匹配的調色板，這很棒。但是您真正需要注意的是 對比度 文本和背景之間足夠高。這並不意味著您必須全面黑白（除非您追求的是乾淨，優雅的氛圍），但是 做 意味著您的內容需要可讀。
不良的對比使內容更難為每個人閱讀，尤其是視力低下或色盲的人。對於任何在明亮的陽光下使用其設備的人來說，這也可能是一個問題。
類似的工具 海浪 自動標記對比問題 – 任何以下的比率 4.5：1 對於普通文本被認為是失敗。因此，檢查您的顏色組合；您要確保十六進制代碼之間的對比度最低為4.5：1，以使所有用戶可感知您的內容。
圖1 – 高文本對比比的比較
3。標題和頁面結構
就像標題和佈局可以幫助看到用戶迅速掃描頁面（因為老實說，誰，誰 真的 閱讀所有內容嗎？ ），對於像使用屏幕讀取器的輔助技術用戶一樣，它們也至關重要。
屏幕讀取器用戶經常通過標題導航，因此需要正確編碼這些用戶。這意味著使用實際的HTML標籤
標題還需要遵循清晰的層次結構。您的主頁標題應該是
結構正確的標題不僅可以提高可訪問性，而且還可以使您的內容更容易 每個人 導航。
4。鍵盤導航
可訪問性不僅僅是屏幕閱讀器用戶；您還需要考慮使用替代輸入方法的人。這包括不使用鼠標或觸摸導航的用戶，而是依靠操縱桿，開關，語音命令或手機上的滑動手勢之類的用戶。
最簡單的檢查方法？ 僅使用鍵盤測試您的網站。 鍵盤用戶通常使用選項卡鍵從一個交互元素轉移到另一個交互元素。他們使用Enter或Space激活事物。
這是值得關注的地方：
- 所有交互式元素（鏈接，按鈕，表單，菜單）都應包含在標籤順序中。
- 應該有一個可見的焦點指示器（例如大綱或高光），以便用戶可以在頁面上看到他們的位置。
- 每個元素都必須僅由鍵盤完全操作；無需鼠標。
在您自己的站點上嘗試一下：按下選項卡以向前移動，然後移動 +選項卡以向後移動。如果您發現自己陷入困境或不確定焦點在哪裡……這是一個值得解決的問題。
5。清除標籤和鏈接文本
表格是酒店網站上最常見的互動之一，因此需要訪問它們。每個輸入，無論是用於登機日期還是房間類型，都應具有清晰，可見的標籤。錯誤消息應該解釋出了什麼問題以及如何解決問題，而不僅僅是喊“錯誤！”紅色。就像您網站的其餘部分一樣，表格必須與鍵盤和屏幕閱讀器一起使用。沒有藉口。
當您使用時，請查看您的鏈接文本。屏幕讀取器用戶通常會從鏈接跳到鏈接，因此“單擊此處”或“更多”之類的模糊短語不會剪切。使用有意義的描述性文本，例如“查看我們的可訪問房間”或“預訂豪華套房”。
目標很簡單：減少歧義並確保所有人都清楚標籤，鏈接和說明，而不僅僅是使用輔助技術的標籤。
