每日 30 秒 ⏱ 語義化與無障礙樹

時間 2019-11-25

標籤每日語義無障礙简体版

原文原文鏈接

簡介

無障礙、語義化、a11y、Accessibility、無障礙樹html

對於語義化出發點不同觀點也不同：前端

SEO 角度：原有的 heading、a、img 等標籤加上新帶來的標籤，配合良好的結構和語義內容很是有幫助。
A前端 角度：可以完成項目 span、div 一把梭美滋滋，爲何要語義化呢？
B前端 角度：誰會閱讀輸出後的 HTML ，在項目開發中不使用 語義化 也能夠寫出結構漂亮的 組件代碼。
其餘 角度：此處省略一萬字。

什麼是語義化

有的同窗會說了：img、heading 也有語義化？其實語義化並不僅是 HTML5 中新增長的 <header>、<main> 等標籤，它們更多的算是結構語義化。git

圖片語義化 依靠着 img 標籤中的 alt 和 title 屬性，其中 alt 用於圖片描述，這個描述是給搜索引擎和屏幕閱讀器使用。而且當圖片沒法顯示時，頁面會顯示alt中的文字。github

標題語義化 包括了從 h1 到 h6 的標題，在沒有 HTML5 新增長的結構標籤時，更多的是由 heading 來表示頁面的結構。後端

還有 表格語義化 包括 table、caption、thead、tbody、tfoot、th 標籤，等等語義化相關標籤就不在這裏贅述了不少的文章都講得很是好。瀏覽器

換位思考

一千我的眼裏有一千個哈姆雷特bash

多姿多彩的世界中也包括了一部分 特殊羣體，其中也包括了 盲人、弱視 等羣體。今天一塊兒扮演一位 視力障礙用戶，站在他的角度來看看這個 互聯網 世界，小二使用的是 Mac 便用 VoiceOver 下面是經常使用快捷鍵：微信

control+option+右箭頭/左箭頭：切換導航，至關於焦點中的 tab。
control+option+shift+下箭頭/上箭頭：進入或退出當前導航選中的內容。
control+option+command+h：閱讀網頁內容中的 heading。
control+option+space：模擬鼠標點擊事件。
control+option+u：使用轉子。

圖片

入困境

從一張圖片來了解 盲人世界，代碼以下：網絡

<img src="https://user-gold-cdn.xitu.io/2019/4/11/16a0b73404feaca5">
複製代碼

顯示的效果以下，做爲正經常使用戶能夠很清楚的便理解了圖片上的內容：框架

而經過 VoiceOver 模擬盲人查看圖片會獲得這麼一段語言：

16a0b73404feaca5, 圖像
複製代碼

視障用戶：咦 16a0b73404feaca5 是什麼呀？聽不懂也理解不來。

出困境

這是由於沒有給圖片加上 alt 屬性，致使 VoiceOver 在讀取頁面信息的時候只能去讀取 src 最後一個斜槓後的內容16a0b73404feaca5，由於連接資源裏最後的部分爲它的文件名，解決的方法很簡單加上 alt 屬性描述。

<img src="https://user-gold-cdn.xitu.io/2019/4/11/16a0b73404feaca5" alt="一隻叫作土土的小貓咪相親中，正在看一隻漂亮的小貓咪。">
複製代碼

這個時候再使用 VoiceOver 模擬盲人查看圖片會獲得這麼一段語言：

土土相親中，正在看一隻漂亮的小貓咪, 圖像
複製代碼

視障用戶：哦哦，原來是小貓咪在相親啊。

學習角度

看到這裏又有不一樣的學習方式：

普通前端：寫 img 要把 alt 屬性也給帶上。
有後端思惟的前端：產品在作需求的時候，上傳圖片要補上 圖片描述字段。
有豐富經驗的前端：有些圖片只是裝飾並無實際做用怎麼辦？

最後這個問題問得很是好：

不寫上 alt 屬性會被讀取 src 中的文件名。
寫上 alt 又會致使過多信息出現，使得視力障礙用戶難以理解。
解決方法：將 alt 設置爲 空字符串，這樣屏幕閱讀工具就會跳過它。

更多內容能夠閱讀 img の小九九

Heading

在瀏覽網頁的時候，正經常使用戶能夠經過鼠標滾動或者鍵盤的上下鍵。而視力障礙用戶看不到網頁內容，那經過什麼來在網頁內容搜索中上下滾動瀏覽頁面呢？答案即是 Heading 國外的網站大多無障礙體驗多作得比較好，畢竟在法律政策下必須作好 無障礙體驗。這裏選用谷歌搜索來演示 Heading 對視力障礙羣體的幫助：

使用 control+option+command+h 在標題之間進行跳轉，你會發現右下角分別顯示着：

標題級別 1 無障礙功能連接。
標題級別 1 搜索模式。
標題級別 1 搜索結果。
標題級別 2 網絡搜索結果。
彭于晏-維基百科，自由的百科全書彭于晏，超級連接。
彭于晏_百度百科，彭于晏，超級連接。
更多內容就不描述了。

能夠發現一開始的 4 個標題，都是在頁面上看不到標題標籤。這是谷歌搜索爲視力障礙用戶提供的頁面錨點，方便視力障礙用在頁面上經過 heading 跳轉和瀏覽內容區域，接下來的幾個標題即是利用 heading 配合 a 標籤來實現搜索項目的瀏覽。

heading 的效果在頁面上顯而易見，視力障礙羣體也能夠很方便的瀏覽網頁。

更多內容能夠閱讀 H1 的小祕密

label

入困境

標籤也是在開發中常常被忽略的內容結構以下：

<div class="row">
    用戶名：<input type="text" name="username">
</div>
複製代碼

表單顯示效果以下：

做爲正經常使用戶看着沒什麼問題，但是做爲視障用戶在使用 VoiceOver 會聽到：

編輯文本，空白
複製代碼

這下又讓視障用戶陷入沉思了，空白指的是什麼？

出困境

這是由於沒有給 input 配上指定 label，屏幕閱讀器並不能很好的去識別 input 所表達的含義。

<div class="row">
    <label for="username">用戶名</label>
    <input type="text" name="username" id="username">
</div>

<label>
    <input type="text" name="address" id="address">
    用戶地址
</label>
複製代碼

這個時候再使用 VoiceOver 模擬盲人查看會聽到：

用戶名，編輯文本，空白
用戶地址，編輯文本，空白
複製代碼

這下盲人用戶很容易就能理解表單信息。

結構語義化

再來看看結構語義化能帶來的好處：

<header>
    <div class="container">
        <h1>PushMeTop</h1>
        <nav>
            <a href="#">主頁</a>
            <a href="#">文章</a>
            <a href="#">視頻</a>
        </nav>
    </div>
</header>
<main>
    <div class="card">
        <form>
            <div class="row">
                <label for="username">用戶名</label>
                <input type="text" name="username" id="username">
            </div>
            <div class="row">
                <label for="password">密碼</label>
                <input type="password" name="password" id="password">
            </div>
            <div class="row">
                <button type="submit">登陸</button>
            </div>
        </form>
    </div>
</main>
<footer>
    <div class="container">
        <div class="col-1">
            <a href="#">聯繫咱們</a>
        </div>
        <div class="col-1">
            <a href="#">加入咱們</a>
        </div>
    </div>
</footer>
複製代碼

在 VoiceOver 使用轉子功能能夠看到以下效果：

轉子經過語義化標籤，很輕鬆的便把網頁的結構識別出來了。在文章功能下能夠看到橫幅、導航、主題內容、頁腳和他們內部相關的元素，而在 地標 中也能夠經過橫幅、導航、主題內容快速瀏覽網頁。

無障礙樹

瀏覽器在渲染的時候會構建 DOM 樹，而無障礙工具在理解頁面的時候則經過 無障礙樹 來讓 特殊羣體 理解頁面。其實開發過程當中離 無障礙樹 至關近只不過你們一直都沒有注意，打開控制檯選擇 Accessibility 便可看到：

無障礙樹的構建即是經過 語義化 來實現的，點開 banner、main、contentinfo 進行具體內容查看，而構成無障礙樹節點由：Role, Name, State, Value 組成。

反應快的同窗就會想到上面提到的 用戶名錶單：

Name: 用戶名
Role: 編輯文本
Value：空白
State：無

當 VoiceOver 在閱讀頁面節點便會讀出：

用戶名，編輯文本，空白
複製代碼

這裏只對無障礙樹作一個簡單的介紹，無障礙樹和語義化關係緊密，細心的同窗還會發現截圖中 WebArea 的 Name 值中有出現 aria-* 相關字段，其實 ARIA 是可以讓殘障人士更加便利的訪問 Web 內容和使用 Web 應用（特別是那些由 Ajax 和 JavaScript 開發的）的一套機制，對 html 標籤的一個補充。