小技巧，提升讀屏操作體驗

文介紹在Web前端中為讀屏提供補充信息的一種小技巧，并簡單分析了此技巧的應用場景和注意事項，適當使用本技巧可以在網頁瀏覽中有效提升讀屏的操作體驗。

在WordPress主題的css中，有一條這樣的class定義：

.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px; word-wrap: normal !important; /Many screen reader and browser combinations announce broken words as they would appear visually. */}

那么這個screen-reader-text可以用來做什么呢？從名稱上，我們很容易看出，它是針對讀屏的文本樣式定義。具體表現如何，讓我們來做下面一個實驗：

<p>你愛吃的<span class="screen-reader-text">水果</span>都在這里</p>

通過上面的實驗，我們發現我們在P標簽中設置的“你愛吃的水果都在這里”中的“水果”二字，視覺上不可見了。讓我們在使用讀屏閱讀上面的文字試試看。沒錯，當你使用讀屏閱讀的時候，讀屏卻完整的讀出了P標簽中的內容“你愛吃的水果都在這里了”。

現在我們清楚了，screen-reader-text樣式，用以隱藏那些視覺不需要展現兒對讀屏有價值的內容。

我們在來看一個實際可被應用的例子：

<div class="news-list"> <div class="news-list-area"> <h2><a href="javascript：void(0);">軍事</a></h2> <ul> <a href="javascript：void(0);">新聞標題1</a> <a href="javascript：void(0);">新聞標題2</a> ... </ul> <a class="more" href="javascript：void(0);">更多</a> </div> <div class="news-list-area"> <h2><a href="javascript：void(0);">科技</a></h2> <ul> <a href="javascript：void(0);">新聞標題1</a> <a href="javascript：void(0);">新聞標題2</a> ... </ul> <a class="more" href="javascript：void(0);">更多</a> </div></div></div>

我們使用讀屏Tab鍵，遍歷上面的內容，可以發現，讀屏是按照代碼書寫的元素的線性順序進行導航的，也就是說，先讀分類標題，在讀新聞標題，最后是“更多”鏈接。這里存在一個問題，當我們按鍵盤Tab鍵導航到“更多”鏈接，讀屏只會讀出“更多鏈接”，對于不熟悉這個頁面布局的讀屏用戶，可能會難以判斷這個“更多”是哪一個分類的“更多”。

讓我們用screen-reader-text來解決這個問題。修改“更多”鏈接的代碼為：

<a href="javascript：void(0);">更多<span class="screen-reader-text">軍事新聞</span></a>...<a href="javascript：void(0);">更多<span class="screen-reader-text">科技新聞</span></a>

這樣，當我們使用讀屏，Tab鍵定位到“更多”鏈接的時候，就能讀出“更多軍事新聞”、“更多科技新聞”，可以清楚區分“更多”鏈接到底屬于哪一個分類了。

到這里，已經很清楚了，screen-reader-text樣式，可以使應用了此樣式的內容視覺不可見，讀屏卻能朗讀，是一種為一些元素添加補充內容信息的方法。

與此相同的，還可以使用WAI-ARIA中的aria-label等屬性，但aria-label屬性在不同讀屏上表現略有差異，比如下面的代碼，在NVDA和爭渡讀屏上就有不同：

<a aria-label="更多軍事新聞" href="javascript：void(0);">更多</a>

NVDA朗讀：鏈接更多軍事新聞

爭渡工藝版朗讀：更多更多軍事新聞

NVDA朗讀采用aria-label值替代原有的鏈接文本，爭渡工藝版則是鏈接文本+aria-label值。

這主要是不同讀屏對于WAI-ARIA支持程度和處理策略的不同所導致的，使用screen-reader-text卻能解決這種差異問題，使用此樣式，讀屏朗讀基本上體驗是一致的了。但需要注意，WAI-ARIA屬于標準，具有更廣泛的普適性，所以我們還是仍然推薦首先考慮使用WAI-ARIA標準，緊在使用WAI-ARIA無法滿足需求的情況下，才使用screen-reader-text技巧來實現。

最后，我們再來談談使用screen-reader-text樣式的注意事項。

這里，我總結了兩點：

補充信息明確、簡潔

應用screen-reader-text的信息應該足夠的明確、簡潔，冗余的內容將會耗費讀屏朗讀的時間，影響操作效率。

緊在需要的時候使用

合理使用screen-reader-text樣式，因為應用它的元素是不可見的，這對使用讀屏的用戶和視覺瀏覽的用戶在交流網頁呈現內容的時候，可能存在一定的困擾，雙方接收到的信息是不完全相同的。另一方面，增加朗讀的內容，會使得讀屏用戶聽渠道更多的內容，影響操作效率。我們可以僅在提供的內容信息無法滿足讀屏用戶理解的情況下，提供應用了screen-reader-text的補充內容，用以清晰的傳達預期傳遞的信息。

以上就是我們隊screen-reader-text的介紹，希望可以對您有所啟發。如果您有什么好的想法，也歡迎與我們交流！

劉彪

劉彪信息無障礙專家

信息無障礙研究會

. 對 HTML 語義化的理解

語義化是指根據內容的結構化（內容語義化），選擇合適的標簽（代碼語義化）。通俗來講就是用正確的標簽做正確的事情。

語義化的優點如下：

對機器友好，帶有語義的文字表現力豐富，更適合搜索引擎的爬蟲爬取有效信息，有利于 SEO。除此之外，語義類還支持讀屏軟件，根據文章可以自動生成目錄；

對開發者友好，使用語義類標簽增強了可讀性，結構更加清晰，開發者能清晰地看出網頁的結構，便于團隊的開發與維護。

常見的語義化標簽：

2. DOCTYPE(?檔類型) 的作?

DOCTYPE 是 HTML5 中一種標準通用標記語言的文檔類型聲明，它的目的是告訴瀏覽器（解析器）應該以什么樣（html 或 xhtml）的文檔類行定義來解析文檔，不同的渲染模式會影響瀏覽器對 CSS 代碼甚?JavaScript 腳本的解析。它必須聲明在 HTML?檔的第??。

瀏覽器渲染頁面的兩種模式（可通過 document.compatMode 獲取，比如，語雀官網的文檔類型是 CSS1Compat）：

CSS1Compat：標準模式（Strick mode），默認模式，瀏覽器使用 W3C 的標準解析渲染頁面。在標準模式中，瀏覽器以其支持的最高標準呈現頁面。

BackCompat：怪異模式(混雜模式)(Quick mode)，瀏覽器使用自己的怪異模式解析渲染頁面。在怪異模式中，頁面以一種比較寬松的向后兼容的方式顯示。

3. script 標簽中 defer 和 async 的區別

如果沒有 defer 或 async 屬性，瀏覽器會立即加載并執行相應的腳本。它不會等待后續加載的文檔元素，讀取到就會開始加載和執行，這樣就阻塞了后續文檔的加載。

下圖可以直觀地看出三者之間的區別:

其中藍色代表 js 腳本網絡加載時間，紅色代表 js 腳本執行時間，綠色代表 html 解析。

defer 和 async 屬性都是去異步加載外部的 JS 腳本文件，它們都不會阻塞頁面的解析，其區別如下：

執行順序：多個帶 async 屬性的標簽，不能保證加載的順序；多個帶 defer 屬性的標簽，按照加載順序執行；

腳本是否并行執行：async 屬性，表示后續文檔的加載和執行與 js 腳本的加載和執行是并行進行的，即異步執行；defer 屬性，加載后續文檔的過程和 js 腳本的加載(此時僅加載不執行)是并行進行的(異步)，js 腳本需要等到文檔所有元素解析完成之后才執行，DOMContentLoaded 事件觸發執行之前。

4. 行內元素有哪些？塊級元素有哪些？空(void)元素有那些？

行內元素有：a b span img input select strong；

塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p；

空元素，即沒有內容的 HTML 元素。空元素是在開始標簽中關閉的，也就是空元素沒有閉合標簽：

常見的有：<br>、<hr>、<img>、<input>、<link>、<meta>；

鮮見的有：<area>、<base>、<col>、<colgroup>、<command>、<embed>、<keygen>、<param>、<source>、<track>、<wbr>。

5. 瀏覽器是如何對 HTML5 的離線儲存資源進行管理和加載？

在線的情況下，瀏覽器發現 html 頭部有 manifest 屬性，它會請求 manifest 文件，如果是第一次訪問頁面，那么瀏覽器就會根據 manifest 文件的內容下載相應的資源并且進行離線存儲。如果已經訪問過頁面并且資源已經進行離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的 manifest 文件與舊的 manifest 文件，如果文件沒有發生改變，就不做任何操作，如果文件改變了，就會重新下載文件中的資源并進行離線存儲。

離線的情況下，瀏覽器會直接使用離線存儲的資源。

6. Canvas 和 SVG 的區別

（1）SVG：

SVG 可縮放矢量圖形（Scalable Vector Graphics）是基于可擴展標記語言 XML 描述的 2D 圖形的語言，SVG 基于 XML 就意味著 SVG DOM 中的每個元素都是可用的，可以為某個元素附加 Javascript 事件處理器。在 SVG 中，每個被繪制的圖形均被視為對象。如果 SVG 對象的屬性發生變化，那么瀏覽器能夠自動重現圖形。

其特點如下：

不依賴分辨率

支持事件處理器

最適合帶有大型渲染區域的應用程序（比如谷歌地圖）

復雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）不適合游戲應用

（2）Canvas：

Canvas 是畫布，通過 Javascript 來繪制 2D 圖形，是逐像素進行渲染的。其位置發生改變，就會重新進行繪制。

其特點如下：

依賴分辨率

不支持事件處理器

弱的文本渲染能力

能夠以 .png 或 .jpg 格式保存結果圖像

最適合圖像密集型的游戲，其中的許多對象會被頻繁重繪

注：矢量圖，也稱為面向對象的圖像或繪圖圖像，在數學上定義為一系列由線連接的點。矢量文件中的圖形元素稱為對象。每個對象都是

一個自成一體的實體，它具有顏色、形狀、輪廓、大小和屏幕位置等屬性。

7. 說一下 HTML5 drag API

dragstart：事件主體是被拖放元素，在開始拖放被拖放元素時觸發。

darg：事件主體是被拖放元素，在正在拖放被拖放元素時觸發。dragenter：事件主體是目標元素，在被拖放元素進入某元素時觸發。dragover：事件主體是目標元素，在被拖放在某元素內移動時觸發。dragleave：事件主體是目標元素，在被拖放元素移出目標元素是觸發。

drop：事件主體是目標元素，在目標元素完全接受被拖放元素時觸發。

dragend：事件主體是被拖放元素，在整個拖放操作結束時觸發。

文主要內容

html 的常見元素
html 元素的分類
html 元素的嵌套關系
html 元素的默認樣式和 CSS Reset
html 常見面試題

html 的常見元素

html 的常見元素主要分為兩類：head 區域的元素、body 區域的元素。下面來分別介紹。

1、head 區域的 html 元素

head 區域的 html 元素，不會在頁面上留下直接的內容。

meta
title
style
link
script
base

base元素的介紹：

<base href="/">

base 標簽用于指定基礎的路徑。指定之后，所有的 a 鏈接都是以這個路徑為基準。

2、html 元素（body 區域）

body 區域的 html 元素，會直接出現在頁面上。

div、section、article、aside、header、footer
p
span、em、strong
表格元素：table、thead、tbody、tr、td
列表元素：ul、ol、dl、dt、dd
a
表單元素：form、input、select、textarea、button

div 是最常見的元素，大多數場景下，都可以用div（實在不行就多包幾層div）。可見，div 是比較通用的元素，這也決定了 div 的的語義并不是很明確。

常見標簽的重要屬性：

a[href,target]
img[src,alt]
table td[colspan,rowspan]。設置當前單元格占據幾行幾列。在合并單元格時，會用到。
form[target,method,enctype]
input[type,value]
button[type]
selection>option[value]
label[for]

html 文檔的大綱

我們平時在寫論文或者其他文檔的時候，一般會先列出大綱，然后再寫具體的內容。

同樣，html 網頁也可以看成是一種文檔，也有屬于它的大綱。

一個常見的html文檔，它的結構可以是：

    <section>
        <h1>一級標題</h1>

        <section>
            <h2>二級標題</h2>
            <p>段落內容</p>
        </section>

        <section>
            <h2>二級標題</h2>
            <p>段落內容</p>
        </section>

        <aside>
            <p>廣告內容</p>
        </aside>

    </section>

    <footer>
        <p>某某公司出品</p>
    </footer>

查看網頁大綱的工具

我們可以通過 http://h5o.github.io/ 這個工具查看一個網頁的大綱。

使用方法：

（1）將網址 http://h5o.github.io/ 保存到書簽欄

（2）去目標網頁，點擊書簽欄的網址，即可查看該網頁的大綱。

這個工具非常好用，既可以查看網頁的大綱，也可以查看 markdown 在線文檔的結構。

html 元素的分類

按照樣式分類：

塊級元素
行內元素
inline-block：比如form表單元素。對外的表現是行內元素（不會獨占一行），對內的表現是塊級元素（可以設置寬高）。

按照內容分類：

html 元素的嵌套關系

塊級元素可以包含行內元素。
塊級元素不一定能包含塊級元素。比如 div 中可以包含 div，但 p 標簽中不能包含 div。
行內元素一般不能包含塊級元素。比如 span 中不能包含 div。但有個特例：在 HTML5 中， a 標簽中可以包含 div。

注意：在 HTML5 中 a > div 是合法的， div > a > div是不合法的；但是在 html 4.0.1 中， a > div 仍然是不合法的。

html 元素的默認樣式和 CSS Reset

比如下拉框這種比較復雜的元素，是自帶默認樣式的。如果沒有這個默認樣式，則該元素在頁面上不會有任何表現，則必然增加一些工作量。

同時，默認樣式也會帶來一些問題：比如，有些默認樣式我們是不需要的；有些默認樣式甚至無法去掉。

如果我們不需要默認的樣式，這里就需要引入一個概念：CSS Reset。

常見的 CSS Reset 方案

方案一：

CSS Tools: Reset CSS

方案二：

雅虎的 CSS Reset

我們可以直接通過 CDN 的方式引入：

<link rel="stylesheet" type="text/css" href=">

方式三：（比較有爭議）

*{
    margin: 0;
    padding: 0;
}

上面何種寫法，比較簡潔，但也有爭議。有爭議的地方在于，可能會導致 css 選擇器的性能問題。

Normalize.css

上面的幾種 css reset 的解決思路是：將所有的默認樣式清零。

但是，Normalize.css 的思路是：既然瀏覽器提供了這些默認樣式，那它就是有意義的。既然不同瀏覽器的默認樣式不一致，那么，Normalize.css就將這些默認樣式設置為一致。

html 常見面試題

doctype 的意義是什么

讓瀏覽器以標準模式渲染
讓瀏覽器知道元素的合法性

HTML、XHTML、HTML5的區別

HTML 屬于 SGML
XHTML 屬于 XML，是 HTML 進行 XML 嚴格化的結果
HTML5 不屬于SGML，也不屬于 XML（HTML5有自己獨立的一套規范），比 XHTML 寬松。

HTML5 有什么新的變化

新的語義化元素
表單增強
新的API：離線、音視頻、圖形、實時通信、本地存儲、設備能力等。

em 和 i 的區別

共同點：二者都是表示斜體。

區別：

em 是語義化的標簽，表示強調。
i 是純樣式的標簽，表示斜體。HTML5 中不推薦使用。

語義化的意義是什么

開發者容易理解，便于維護。
機器（搜索引擎、讀屏軟件等）容易理解結構
有助于 SEO

哪些元素可以自閉和

自閉和的元素中不能再嵌入別的元素。且 HTML5 中要求加斜杠。

表單元素 input
圖片 img
br、hr
meta、link

form 表單的作用

直接提交表單
使用 submit / reset 按鈕
便于瀏覽器保存表單
第三方庫（比如 jQuery）可以整體獲取值
第三方庫可以進行表單驗證

所以，如果我們是通過 Ajax 提交表單數據，也建議加上 form。

在線咨詢

上一篇：css實現漸變色圓角邊框
下一篇：佛山這些鎮街將設臨時年花銷售點！買花地圖上線，一鍵導

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商