使用語義HTML元素，例如

當構(gòu)建H5（HTML5）Web應用程序時，可訪問性（A11Y）不是事後想法，而是包容性的基本要求。精心設計的可訪問應用程序可確保人們使用屏幕讀取器，鍵盤導航或輔助技術可以有效地使用您的產(chǎn)品。這是針對H5應用程序量身定制的實用，以開發(fā)人員為中心的可訪問清單。

1。語義HTML：結(jié)構(gòu)很重要

使用適當?shù)腍TML元素傳達含義並自動提高可訪問性。

<li>使用語義元素，例如<header></header> ， <nav></nav> ， <main></main> ， <section></section> ，， <article></article>和<footer></footer>來定義頁面結(jié)構(gòu)。 <li>用有意義的標籤替換通用<div>和<code><span></span> ：
<li>使用<button></button>進行按鈕，而不是<div onclick="..."> 。<li>使用<code><a href="#"></a>進行導航，而不是沒有href的假鏈接。 <li>在邏輯，層次順序中使用<h1></h1> <h6></h6> ，不要跳過級別。 <li>確保用<ul></ul> ， <ol></ol>和<li>標記列表。

示例：導航菜單應為<nav></nav> ，其鏈接的無序列表（ <ul></ul> <div> ，而不是inline <code><span></span>元素。

---

2。鍵盤導航和焦點管理

許多用戶依靠鍵盤而不是小鼠。確保無需指針就可以完全操作您的應用程序。

<li>所有交互式元素（按鈕，鏈接，表單控件）都必須通過Tab與。 <li>確保重點順序遵循頁面的視覺流。 <li>切勿使用outline: none沒有提供自定義，可見的替代方案。 <li>使用tabindex="0"以使自定義小部件焦點可集中；避免tabindex > 0 。 <li>對於模式和對話：
<li>陷阱聚焦在模態(tài)內(nèi)。 <li>關閉時將焦點返回到觸發(fā)元素。

專家提示：僅使用Tab ， Shift Tab ， Enter和Space密鑰測試您的應用程序。

---

3。屏幕閱讀器與詠嘆調(diào)的兼容性

當HTML還不夠時，ARIA（可訪問的Internet應用程序）可以增強可訪問性，但明智地使用它。

<li>丟失文本時，添加aria-label或aria-labelledby （例如，圖標按鈕）。 <li>使用aria-describedby提供額外的上下文（例如，錯誤消息）。 <li>對於動態(tài)內(nèi)容：
<li>使用aria-live="polite"進行更新，例如“成功消息”。 <li>使用role="alert"進行緊急通知。
<li>避免詠嘆調(diào)過度使用。在可能的情況下更喜歡本機HTML元素。

常見錯誤：當真實<button></button>效果更好時，在<div>上使用<code>role="button" 。

---

4。形式可訪問性：清晰度和反饋

表格至關重要，通常易於訪問。使它們易於理解和使用。

<li>每個<input>都必須具有相應的<label></label> for屬性（或嵌套在標籤內(nèi)）。 <li>與<fieldset></fieldset>組相關的字段，並使用<legend></legend>描述組。 <li>提供明確的錯誤消息：
<li>使用aria-describedby輸入將錯誤與輸入相關聯(lián)。 <li>明顯顯示消息並通過屏幕讀取器顯示。
<li>對於所需字段，請使用aria-required="true" （除了required屬性之外）。

示例：登錄失敗後，通過aria-live宣布“無效的電子郵件或密碼”並突出顯示該字段。

---

5。顏色和對比：不要單獨依靠顏色

視覺設計對可訪問性的影響超出了您的想像。

<li>確保文本的對比度至少為4.5：1的背景（大型文本3：1）。 <li>使用WebAIM對比檢查器或瀏覽器DevTools等工具進行驗證。 <li>切勿使用顏色作為傳達信息的唯一方法：
<li>錯誤消息應包括圖標或文本，而不僅僅是紅色文本。 <li>所需字段應具有星號和文字，例如“必需”。

注意：大約十分之一的男人有彩覺缺乏癥 - 相應設計。

---

6。響應迅速且友好的設計

可訪問性包括放大或使用移動設備的用戶。

<li>確保內(nèi)容可在200％縮放下可用，而不會損失功能或剪接。 <li>使用相對單元（例如em ， rem ， % ），而不是固定像素進行佈局和文本。 <li>為移動用戶提供至少44x44px的觸摸目標。

在真實設備上測試：捏到Zoom不應破壞您的佈局。

---

7。多媒體和替代文本

非文本內(nèi)容必須具有可訪問的替代方案。

<li>將alt文本添加到所有有意義的圖像中：
<li>描述性： <img alt="A red apple on a wooden table"> <li>裝飾圖像的空（ alt="" ）。
<li>提供視頻的字幕和成績單。 <li>提供視頻中視覺內(nèi)容的音頻說明。

異常：如果在附近的文本中已經(jīng)描述了圖像，則可以接受alt="" 。

---

8。動態(tài)內(nèi)容和JavaScript注意事項

現(xiàn)代H5應用程序是動態(tài)的 - 更新DOM時要牢記可訪問性。

<li>當內(nèi)容更改（例如，加載新數(shù)據(jù)）時，請使用aria-live通知屏幕閱讀器。 <li>使用document.title動態(tài)更新SPA（單頁應用程序）的頁面標題。 <li>使用適當?shù)慕裹c管理和ARIA角色的客戶端路由（ role="main" ， role="navigation" ）。 <li>未經(jīng)用戶同意，避免自動恢復或移動內(nèi)容。

提示：加載後使用focus()方法將焦點轉(zhuǎn)移到新內(nèi)容（例如，搜索結(jié)果）。

---

9。使用真實工具進行測試

自動化工具有幫助，但實際測試會發(fā)現(xiàn)更多問題。

<li> 自動化工具：
<li>燈塔（在Chrome Devtools中） <li> AX DevTools <li> wave（wave.webaim.org）
<li> 手動測試：
<li>僅使用鍵盤導航。 <li>使用屏幕讀取器（NVDA，配音，下巴）。 <li>使用禁用CSS嘗試使用您的應用。
<li>盡可能將殘疾用戶包括在可用性測試中。

---

可訪問性不是一次性修復。這是一種持續(xù)的做法。通過將這些要點集成到您的H5開發(fā)工作流程中（從設計到部署），您可以構(gòu)建不僅合規(guī)的應用程序（例如，與WCAG 2.1 AA），而且確實包含了包容性。

基本上，如果每個人都可以使用，那麼對每個人都更好。