使HTML內(nèi)容可訪問(wèn)不僅僅是符合指南，還要確保每個(gè)人，包括殘疾人，都可以使用和理解您的網(wǎng)站。這是在不混合事物的情況下做正確的方法。

使用語(yǔ)義HTML標(biāo)籤

提高可訪問(wèn)性的最簡(jiǎn)單，最有效的方法之一是使用語(yǔ)義HTML元素，例如<header></header> ， <nav></nav> ， <main></main> ，， <article></article>和<footer></footer> 。這些標(biāo)籤可幫助屏幕讀取器和其他輔助技術(shù)了解頁(yè)面的結(jié)構(gòu)。

• 避免對(duì)所有內(nèi)容使用<div>或<code><span></span> 。而不是將導(dǎo)航菜單包裝在
  中，而是使用<nav></nav> 。
• 標(biāo)題應(yīng)遵循邏輯順序（ <h1></h1>至<h6></h6> ），而不是跳過(guò)級(jí)別。如果您從<h1></h1>跳到<h3></h3> ，它可能會(huì)使依靠屏幕閱讀器的用戶感到困惑。
• 按鈕應(yīng)為實(shí)際<button></button>元素，而不僅僅是樣式<div>或<code><a></a>標(biāo)記為按鈕的標(biāo)籤。

  這不需要額外的代碼 - 只是周到的標(biāo)記。

  為非文本內(nèi)容提供文本替代方案

  傳達(dá)含義的任何圖像，圖標(biāo)或視覺(jué)元素都需要文本替代方案，以便屏幕讀取器用戶可以理解它。這通常是使用圖像的alt屬性完成的。

  • 對(duì)於裝飾圖像，請(qǐng)使用alt="" ，因此屏幕閱讀器會(huì)跳過(guò)它們。
  • 描述性的alt文本應(yīng)該簡(jiǎn)潔但清晰。例如，如果是顯示的話，則使用alt="chart" ，而是使用alt="Bar chart showing quarterly sales growth" 。
  • 用作按鈕的圖標(biāo)（例如用於刪除的垃圾桶）應(yīng)具有aria-label或aria-labelledby屬性來(lái)解釋其功能。

  不要忘記形式圖標(biāo)或SVG，也需要可訪問(wèn)的標(biāo)籤。

  確保鍵盤導(dǎo)航正常運(yùn)行

  並非每個(gè)人都使用鼠標(biāo)。一些用戶完全使用鍵盤導(dǎo)航，因此您的網(wǎng)站應(yīng)以邏輯順序?qū)︽溄?，按鈕和表單控件進(jìn)行支持。

  • 通過(guò)您的網(wǎng)站進(jìn)行測(cè)試標(biāo)籤，以查看焦點(diǎn)指示器是否可見(jiàn)並有意義。
  • 確保交互式元素以與視覺(jué)佈局匹配的方式接收焦點(diǎn)。
  • 除非絕對(duì)必要（例如在模態(tài)對(duì)話框中），避免捕獲鍵盤的重點(diǎn)，並始終提供關(guān)閉或逃脫它們的方法。

  另外，除非您有充分的理由和可靠的替換，否則請(qǐng)勿禁用縮放或覆蓋默認(rèn)鍵盤行為。

  具有足夠?qū)Ρ榷群涂山馕龅奈谋镜脑O(shè)計(jì)

  低對(duì)比度文本和固定字體尺寸可能會(huì)使您的內(nèi)容難以閱讀視覺(jué)障礙的用戶。

  • 對(duì)於普通文本，將最小的顏色對(duì)比度保持在4.5：1，大型文本保持3：1。
  • 讓用戶在不破壞佈局的情況下調(diào)整最高200％的文本大小。
  • 不要僅依靠顏色來(lái)傳達(dá)信息 - ADD文本標(biāo)籤或需要的圖案（例如，紅色錯(cuò)誤消息還應(yīng)具有圖標(biāo)或“錯(cuò)誤：”標(biāo)籤）。

  這些選擇通常使所有用戶受益，而不僅僅是殘疾人。

  ---

  這是可訪問(wèn)的HTML的核心 - 語(yǔ)義結(jié)構(gòu)，有意義的標(biāo)籤，鍵盤訪問(wèn)和可讀設(shè)計(jì)。這不是魔術(shù)，只是正念編碼。