“Web 可訪問性”一詞定義了一組開發人員需要遵循的準則，以使Web應用程序的交互更加方便。任何網站的內容、UI/UX 設計和布局都應該是可訪問的。在這篇文章中，我們研究了前端團隊可以做些什么來輕松地將他們的網站提升到適合Web可訪問性的標準。想學習前端的同學可以參加Web前端培訓，有系統全面的課程，還有經驗豐富的專業講師指導教學，可以快速掌握前端知識和技能，節省很多學習時間，少走彎路。

　　保持標記清潔

　　無論你使用什么標記，都要正確整齊地構建它，避免跳過關卡。例如，在HTML中使用 <button> 元素而不是 <span> 或 <div>。使用 <nav> 進行導航，使用 <button> 進行頁面操作。

　　將 <strong> 或 <em> 元素與 <bold> 或 <i> 區分開來。前兩者用于對內容的語義強調，后兩者用于視覺強調。

　　l 確保橫幅中的公司徽標鏈接回網站的主頁。

　　l 使用 <lang> 屬性告訴瀏覽器在網站上使用哪種語言。

　　l 如果你想在視覺上和屏幕閱讀器中隱藏內容，請使用 hidden 屬性。

　　l 為長頁面添加錨鏈接(跳轉鏈接)，以便用戶可以跳過他們不需要的內容并繼續相關部分。

　　注意頁面語義

　　用戶和機器(屏幕閱讀器、盲文顯示器)都應該能夠識別頁面結構。通過使用頁面上的分段(<header>、<footer>、<article>、<nav>)和標題元素來創建語義布局。這有助于定義網頁的清晰層次輪廓，并區分主要(主要：<h1>、<h2>、<article>)和次要(不太重要：<h3> - <h6>、<footer>)內容。在Web前端培訓中，有理論課程+實踐項目一起學習，深化所學知識，積累項目經驗，獲得快速提升。

　　當你在頁面中使用標題時，不要使用格式(字體樣式和大小)偽造標題屬性 (<h>) 的實際標記，因為這不允許輔助技術識別這些是標題。

　　在適當的情況下在網頁中使用 ARIA 地標。ARIA(可訪問的富 Internet 應用程序)是一個綜合技術規范，用于將可訪問性信息添加到本地不可訪問的元素(特別是使用 JavaScript、AJAX 和 DHTML 開發的元素)。使用 ARIA 地標，開發人員可以擴展 HTML 功能并將適當的語義(即屬性)應用到 UI 和內容元素，以便輔助技術理解這些。

　　這是一個 HTML 語義元素(<header>、<nav>、<main>、<footer>)如何與 ARIA 角色屬性(“banner”、“navigation”、“main”、“contentinfo”)組合的示例使用戶更容易使用屏幕閱讀器進行網站導航。

　　盡管大多數 ARIA 功能最近都是在 HTML5 中實現的(你絕對應該喜歡這些!)，但并非所有屏幕閱讀器和瀏覽器(例如 IE)都足夠復雜，僅依賴于 HTML 語義。適當使用 ARIA 的一些示例是分配角色來描述某些類型的小部件(“菜單”、“樹項”、“滑塊”)，定義描述拖放源和放置目標的拖放屬性，以及添加警報以通知有關動態頁面更改的輔助技術。想要盡快掌握Web可訪問性技巧，參加Web前端培訓也是個不錯的方法，幾個月的學習就能掌握全面系統的知識和技能，快速上崗。

　　支持標簽導航

　　使元素的 Tab 順序(也稱為文檔對象模型或 DOM 順序)與視覺順序一致。從 Tab 順序中刪除不必要的元素，以免混淆使用 Tab 或輔助設備導航的用戶。

　　使導航元素的焦點可見。你可以為此使用第三方插件或 <outline> 屬性，該屬性為在選項卡式導航(或其替代方案)時具有焦點的頁面元素和鏈接提供視覺反饋。

　　使用 <tabindex> 屬性可以使鏈接、按鈕和表單字段等元素具有焦點，并且可以通過 Enter 鍵和/或空格鍵進行選擇。即使具有 <tabindex> 屬性和 0 整數值的不可聚焦元素也可以成為可聚焦元素，例如<h3 tabindex="0">一個可聚焦的標題</h3>

　　如果頁面上有彈出窗口，導航優先級應該允許首先關閉它們。完成此操作后，理想情況下，焦點應該跳回到用戶被打開的模式窗口打斷的網頁元素。為此，請將最后一個焦點元素存儲在變量中。

　　為圖像添加替代文本

　　屏幕閱讀器幾乎可以訪問頁面上的所有內容——圖形信息除外。所以不要忘記為圖像和其他圖形添加替代文本(<img> alt 屬性)。這不僅可以幫助使用輔助技術“閱讀”屏幕的人，還可以幫助互聯網連接不佳的用戶。你的網站也將使用圖像替代文本進行 SEO 優化。在Web前端培訓中，不僅有理論知識的課程，也會有實操項目的訓練，讓你深入淺出地學習前端技術，彌補項目經驗的空缺。

　　圖像替代文本應該精確、簡潔，并反映添加圖像的主要目的。根據上下文，相同的圖像可能有不同的替代文本，例如 如果將公司徽標放在標題中并將用戶返回到主頁，則其準確的替代文本可能是`<img alt="Company X logo - Home page.">`

　　l 在替代文本中，避免使用多余的“圖像”或“圖像”——無論哪種方式，輔助技術都會警告用戶有圖像。

　　l 以句點結束替代文本。這將使屏幕閱讀器在 alt 文本中的最后一個單詞之后暫停一點，從而為用戶提供更愉快的體驗。

　　l 具有多個可點擊區域的圖像(例如圖像地圖)的替代文本應提供這些鏈接的完整描述。此外，每個可點擊區域都應該有相應的替代文本來描述其目的或目的地。

　　l 避免使用文字圖片;如果你不能沒有它們，替代文本應該包含與圖像中相同的單詞。

　　l 如果你有多個圖像傳達一條信息，則組中第一張圖像的替代文本應包含整個組的信息。

　　l 要熟悉替代文本的普遍接受標準，你可以隨時查看此替代文本決策樹。

　　雖然必須為所有對理解內容很重要的圖像添加替代文本，但對于與內容沒有直接關系的菜單圖標或裝飾性圖像(如封面)則無需這樣做。對于這樣的圖像，只需使用一個空的 <img alt> 屬性。

　　最后技巧

　　盡管這些提示肯定會增加你網站的包容性，但最好不要將 Web可訪問性視為一套正式的指南。首先，它是一項全面的策略，可以關心所有用戶并使你的網站內容可供他們使用——無論他們使用何種瀏覽器、互聯網提供商或輔助設備。想學習更多Web可訪問性技巧，不妨考慮參加Web前端培訓，可以在短時間獲得快速提升，有效提高前端開發工作效率。