“Web 可訪問性”一詞定義了一組開發(fā)人員需要遵循的準則，以使Web應用程序的交互更加方便。任何網(wǎng)站的內(nèi)容、UI/UX 設計和布局都應該是可訪問的。在這篇文章中，我們研究了前端團隊可以做些什么來輕松地將他們的網(wǎng)站提升到適合Web可訪問性的標準。

　　保持標記清潔

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

　　將 <strong> 或 <em> 元素與 <bold> 或 <i> 區(qū)分開來。前兩者用于對內(nèi)容的語義強調(diào)，后兩者用于視覺強調(diào)。

　　l 確保橫幅中的公司徽標鏈接回網(wǎng)站的主頁。

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

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

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

　　注意頁面語義

　　用戶和機器(屏幕閱讀器、盲文顯示器)都應該能夠識別頁面結(jié)構(gòu)。通過使用頁面上的分段(<header>、<footer>、<article>、<nav>)和標題元素來創(chuàng)建語義布局。這有助于定義網(wǎng)頁的清晰層次輪廓，并區(qū)分主要(主要：<h1>、<h2>、<article>)和次要(不太重要：<h3> - <h6>、<footer>)內(nèi)容。

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

　　在適當?shù)那闆r下在網(wǎng)頁中使用 ARIA 地標。ARIA(可訪問的富 Internet 應用程序)是一個綜合技術(shù)規(guī)范，用于將可訪問性信息添加到本地不可訪問的元素(特別是使用 JavaScript、AJAX 和 DHTML 開發(fā)的元素)。使用 ARIA 地標，開發(fā)人員可以擴展 HTML 功能并將適當?shù)恼Z義(即屬性)應用到 UI 和內(nèi)容元素，以便輔助技術(shù)理解這些。

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

　　盡管大多數(shù) ARIA 功能最近都是在 HTML5 中實現(xiàn)的(你絕對應該喜歡這些!)，但并非所有屏幕閱讀器和瀏覽器(例如 IE)都足夠復雜，僅依賴于 HTML 語義。適當使用 ARIA 的一些示例是分配角色來描述某些類型的小部件(“菜單”、“樹項”、“滑塊”)，定義描述拖放源和放置目標的拖放屬性，以及添加警報以通知有關(guān)動態(tài)頁面更改的輔助技術(shù)。

　　支持標簽導航

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

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

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

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

　　為圖像添加替代文本

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

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

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

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

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

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

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

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

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

　　最后技巧

　　盡管這些提示肯定會增加你網(wǎng)站的包容性，但最好不要將 Web可訪問性視為一套正式的指南。首先，它是一項全面的策略，可以關(guān)心所有用戶并使你的網(wǎng)站內(nèi)容可供他們使用——無論他們使用何種瀏覽器、互聯(lián)網(wǎng)提供商或輔助設備。

者有話要說：此文是作者自己的學習總結(jié)，供大家參考，不足之處還請見諒和指正~

在學習完了基本的HTML+CSS標簽之后，就可以嘗試寫一些簡單的靜態(tài)網(wǎng)頁啦~練習的過程是充滿成就感的，值得反復體會和思考！

網(wǎng)頁結(jié)構(gòu)

簡單提一下常用于表示網(wǎng)頁機構(gòu)的標簽：

header 整個頁面的標題（也可表示一個內(nèi)容區(qū)塊）

main 頁面主體部分

footer 整個頁面的腳注（也可表示一個內(nèi)容區(qū)塊）

article 一塊與上下文無關(guān)的獨立內(nèi)容

section 表示一個內(nèi)容區(qū)塊，常嵌套于article中

aside 在article之外與其內(nèi)容相關(guān)的輔助信息

nav 頁面中的導航欄

figure 表示一段獨立的流內(nèi)容

三欄布局

一個網(wǎng)頁最少由header、main、footer三部分組成，那么從三欄布局開始練習吧。無論是上-中-下結(jié)構(gòu)還是左-中-右結(jié)構(gòu)，關(guān)鍵都在于設置中間部分的寬高或位置。我們知道網(wǎng)頁的主體內(nèi)容（版心）是處于居中位置、隨網(wǎng)頁縮放而縮放的。那么左右（或上下）兩欄固定后，須使中間部分自適應。以下總結(jié)了幾種三欄布局的方法，以左-中-右結(jié)構(gòu)為例：

先寫左中右三個盒子。

1.使用float

需要注意的是，使用float方法需要在body部分改一下center盒子的位置，把center盒子放在right盒子之后（否則right盒子會跑到下一行右側(cè)）。以上代碼中，設置center盒子的左右外邊距來實現(xiàn)寬度自適應，若父盒子layout無高度要求，可用min-height實現(xiàn)高度自適應。不加高度自適應也可，在未設置center盒子高度的情況下本身高度會隨文本內(nèi)容的擴充而自動增加。

2.使用position

三個盒子都分別使用絕對定位，left、right分別距離窗口左右端為0，center距離窗口左端的間距為left盒子的寬度，距離窗口右端的間距為right盒子的寬度。

3.使用flex

須給父盒子layout加上彈性盒屬性，給center盒子設置大于0的flex值，利用彈性盒自動拉伸效果實現(xiàn)center盒子的寬度自適應。

4.使用table

給父盒子layout設置為table，寬度為整個窗口，給三個子盒子都設置為table-cell，此時三個盒子就有了表格的屬性。固定left、right盒子的寬度，center盒子自動占滿父盒子剩余寬度。需要注意的是，因為父盒子具有表格屬性，當left、center、right三者中任意一個盒子高度改變時，其他兩個盒子會跟著改變。

5.使用grid

將父盒子layout設置為grid，寬度為整個窗口，用template-rows設置行高，用template-columns分別設置三個盒子的寬度，其中auto實現(xiàn)center盒子的寬度自適應。需要注意的是，這里用template-rows設置了固定的行高，因此center的高度不會自適應。

仿寫練習

適合初學者練習的網(wǎng)頁有很多，可以打開網(wǎng)址之家去里面挑一挑，以靜態(tài)頁面為主的網(wǎng)站。作者自己是以豆瓣首頁（局部）進行練習的。練習過程中，千萬不要去看網(wǎng)站源碼（此時你也有很多地方看不懂），先試著自己分析和思考，用所學的知識看看能做到哪一步。

放上對比圖，還是有很多不一樣的地方，網(wǎng)頁也沒有功能，作為初學者這都是正常的。靜態(tài)網(wǎng)頁練習的主要目的是熟悉HTML+CSS布局，培養(yǎng)做網(wǎng)頁的思維。具體細節(jié)隨著學習的深入，可以讓網(wǎng)頁更還原、頁面更精美，網(wǎng)頁功能也能逐步完善起來，實現(xiàn)真正的網(wǎng)站開發(fā)。