比如那些需要讀屏軟件的用戶。作為一個(gè)前端,我們又怎么會(huì)忍心呢。之前就一直想寫這樣的一篇文章,分享一下如何去創(chuàng)造一個(gè)可訪問(wèn)性更好的頁(yè)面。今天的計(jì)劃里有一條把 HTML Tag 和 WCAG標(biāo)準(zhǔn)結(jié)合起來(lái)。我推薦你這樣去寫你的 HTML,讓某些人的生活可以更容易。
今天想分享的是如何去使用我們的 HTML Tag, 把 WCAG 的標(biāo)準(zhǔn)和語(yǔ)義網(wǎng)的目標(biāo)進(jìn)行代碼上的體現(xiàn):
1. 文檔聲明:<!Doctype>
其實(shí)這跟 WCAG 根本上連不上什么直接關(guān)系,但為了一個(gè)兼容性更好,特別是向后兼容的頁(yè)面,我推薦你這樣寫:
<!Doctype html>
2. 鏈接:<a>
互聯(lián)網(wǎng)的聯(lián)幾乎可以說(shuō)是用 <a> 來(lái)實(shí)現(xiàn)的,作為一個(gè)頁(yè)面最常見的標(biāo)簽。我們應(yīng)該如何對(duì)待呢?
- 為關(guān)鍵鏈接添加 accesskey
- 除非萬(wàn)不得已,不要去掉 focus 時(shí)虛線框
<a href="" title="" accesskey="M" rel="" hidefocus>Link</a>
3. 縮寫: <abbr>
對(duì)于用 HTML Tag 的正確使用,也是非常重要的,這有利于讀屏軟件使用者對(duì)于頁(yè)面結(jié)構(gòu)的理解。特別是在 H1,H2,H3 等這些標(biāo)簽的使用,濫用非常容易造成結(jié)構(gòu)費(fèi)解。當(dāng)然,使用一般的標(biāo)簽,再利用 CSS 來(lái)使視覺(jué)上形成對(duì)比這也是常人能辨識(shí)的。但讀屏軟件用戶呢。當(dāng)然,這里只是順帶提起需要注意頁(yè)面標(biāo)簽的使用方法,而 abbr 最重要的應(yīng)該是應(yīng)該添加一個(gè) title 屬性對(duì)縮寫進(jìn)行描述。比如:
<abbr title="Web Developer" >WD</abbr>
4. 大段引用: <blockquote>,一般引用: <cite>
有大段引用的時(shí)候,使用 <blockquote>,而行內(nèi)引用則使用 <cite>,讓你的結(jié)構(gòu)更加易讀:
<blockquote>
之前就一直想寫這樣的一篇文章,分享一下如何去創(chuàng)造一個(gè)可訪問(wèn)性更好的頁(yè)面。今天的計(jì)劃里有一條把 HTML Tag 和 WCAG標(biāo)準(zhǔn)結(jié)合起來(lái)。我推薦你這樣去寫你的 HTML,讓某些人的生活可以更容易。
</blockquote>
<p>某A給我印象最深刻的一句話是,<cite>“做前端要有愛(ài)。不要?jiǎng)硬粍?dòng)就有朩有地對(duì)各種人使用咆哮體”</cite>。</p>
5. 刪除:<del>
在紙上寫東西不能像在計(jì)算機(jī)上寫東西一樣,可以用撤銷鍵可以按,但當(dāng)我們想要強(qiáng)調(diào)某些東西是被刪除的怎么辦?那就是使用 <del> 標(biāo)簽了。比如這樣:
<del>HTML上表示強(qiáng)調(diào)時(shí),請(qǐng)使用 <b> 標(biāo)簽</del>
HTML上表示強(qiáng)調(diào)時(shí),請(qǐng)使用 <strong> 標(biāo)簽
效果是這樣的:
HTML上表示強(qiáng)調(diào)時(shí),請(qǐng)使用 <b> 標(biāo)簽
HTML上表示強(qiáng)調(diào)時(shí),請(qǐng)使用 <strong> 標(biāo)簽
6. 定義列表:<dl>
去年帶著新人做支付寶前端博客的時(shí)候,他們給我印象最深刻的是很喜歡用 <dl>。當(dāng)時(shí)在想,這些同學(xué)挺不錯(cuò)的,對(duì)語(yǔ)義化的理解還不錯(cuò)。我們還是比較少用到定義列表的。而是使用一般的 <ul> <ol> 這兩個(gè)。<dl> 也是應(yīng)該慎用的,最好只使用在某些有“定義”意義的條目,如 w3school 的這個(gè)例子,對(duì)咖啡和牛奶的定義:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
7. 無(wú)序/有序列表 <ul>/<ol>
列表,這個(gè)對(duì)于每個(gè)前端來(lái)說(shuō),都熟悉不過(guò)了。因?yàn)榻Y(jié)構(gòu)可以非常靈活地進(jìn)行應(yīng)用,在導(dǎo)航、列表、Tab 等,都經(jīng)常要要用到。這個(gè)就無(wú)須多說(shuō)了。但有一點(diǎn)還是需要明白的,不要相信什么 <ul>/<ol> 是 <table> 的替代品。在我們常用的 HTML Tags 中,每個(gè)標(biāo)簽都有自己的作用,誰(shuí)都不是誰(shuí)的替代品。
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
8. 表格: <table>
如果是一個(gè)表格,那就,就不要用段落來(lái)替代,更不要用列表。除非萬(wàn)不得已,并且他們是可以轉(zhuǎn)換的。另外,表格中還有一些需要注意的點(diǎn):
- 給 <table> 添加 summary 屬性,有些表格非常大,并不需要去讀完整個(gè)
- 添加 <tbody>,如果我沒(méi)記錯(cuò),如果沒(méi)添加的話,瀏覽器會(huì)自動(dòng)為你添加
- 必要時(shí)使用 <col> <colgroup> 來(lái)控制表示的欄
<table summary="sofish's blog status">
<thead>
<tr>
<th>DATE</th>
<th>IP</th>
<th>PV</th>
</tr>
</thead>
<tbody>
<tr>
<td>2011.3.11</td>
<td>3000</td>
<td>8000</td>
</tr>
</tbody>
</table>
9. 格式化片段 <code>/<pre>
<code> 是指 computer code text, 而 <pre> 是指 preformatted text。<pre> 的范圍更廣,并且是塊狀元素,可能被使用來(lái)格式化各種文本,特別是代碼。使用沒(méi)有需要特別注意的,主要是語(yǔ)義上的正確使用,比如不要用 <pre> 來(lái)代替一般的 <p>。
<code>text-align:center</code>
<pre>
{ ( 1 * 102 ) + ( 9 * 101 ) + ( 3 * 100 ) }
</pre>
10. 換行: <br>
在現(xiàn)代網(wǎng)頁(yè)中,使用 <br> 的情況是非常少的。網(wǎng)頁(yè)中的留白,一般都是使用 CSS 的 padding 和 margin 來(lái)實(shí)現(xiàn)。這樣更精準(zhǔn),并用更容易控制?,F(xiàn)在推薦的用法是,使用到一般的段落 <p> 中做簡(jiǎn)單的換行,而不是用來(lái)控制頁(yè)面留白。
<p>我是一個(gè)段落。<br />
詩(shī)歌都會(huì)用換行的。
</p>
11. 分割線: <hr>
<hr> 具有非常好的語(yǔ)義作用。但他的視覺(jué)效果很難控制。之前就寫過(guò)這樣的文章關(guān)于<hr />在各瀏覽器中的問(wèn)題。一般也都很少用。如果專門為讀屏軟件使用者提供單獨(dú)頁(yè)面的話,或許 <hr> 會(huì)大有用處。
<h3>標(biāo)題一</h3>
<p>Lorem Ipsum is ...</p>
<hr />
<h3>標(biāo)題二</h3>
<p>This is the entry of... </p>
12. 無(wú)語(yǔ)義標(biāo)簽:<div>/<span>
其實(shí) <div>/<span> 這兩個(gè)標(biāo)簽是有語(yǔ)義的,都是 defines a section in a document。是的,和 HTML5 中的 <section> 其實(shí)是一樣的。只是,因?yàn)樗阉饕娴牡脑?,搜索引擎認(rèn)為它們是無(wú)語(yǔ)義標(biāo)簽,因此他們成了 “無(wú)語(yǔ)義” 標(biāo)簽。推薦用法是盡量使用其他來(lái)做為頁(yè)面框架的容器,比如布局、添加額外的視覺(jué)效果,而不是段落等的替代品。
<div id="container">
<div id="content">
</div>
<div id="sidebar">
<ul>
<li><span>God</span>, oh my zsh</span></li>
</ul>
</div>
</div>
13. 段落/標(biāo)題: <p>,<h1>/<h2>/<h3>…
這幾個(gè)標(biāo)簽幾乎可以說(shuō)是一個(gè)頁(yè)面標(biāo)簽等級(jí)結(jié)構(gòu)中最重要的標(biāo)簽。我們可以用一本書的結(jié)構(gòu)來(lái)說(shuō)明這幾個(gè)標(biāo)簽,而我們構(gòu)建一個(gè)頁(yè)面的時(shí)候,也應(yīng)該有這樣的一種思想在腦中:
- 書的名稱:H1
- 書的每個(gè)章節(jié)標(biāo)題: H2
- 章節(jié)內(nèi)的文章標(biāo)題: H3
- 章節(jié)的段落: P
- 小標(biāo)題/副標(biāo)題: H4/H5/H6
是的,當(dāng)然還有引用 <blockquoute>,技術(shù)類書中提供的代碼 <pre class="code">,一些需要注意點(diǎn)的列表 <ul>,一些方便比較的表格 <table> 等。
<h1>LOGO</h1>
<h2>Title</h2>
<div class="entry">
<h3>Summary:</h3>
<p>lorem ipsum is ...<em>emphasize</em></p>
</div>
14. 強(qiáng)調(diào): <em>/<strong>
<em> emphasize 的縮寫。而 <strong> 是 strong emphasize??赡芎芏鄤?cè)腴T前端的同學(xué)會(huì)對(duì) <em>、<strong>、<cite> 、<i>、<b> 這幾個(gè)標(biāo)簽的使用拿捏不準(zhǔn)。<i> 和 <b> 基本上是被廢置的,相當(dāng)于現(xiàn)在的 <em> 和 <strong>,一般情況下他們對(duì)于內(nèi)容重要性的排序是這樣的:strong > em ≈ cite。
<strong>注意:</strong>別使用老掉牙的標(biāo)簽,比如<cite>FONT、CENTER</cite>等,特別是 <em>FONT</em>。
15. 表單項(xiàng): <input>/<textarea>/<select>
表單項(xiàng)是 HTML 中相對(duì)比較復(fù)雜的標(biāo)簽,需要注意的點(diǎn)也比較多:
- 需要給每個(gè)表單項(xiàng)添加 <label> 對(duì)其進(jìn)行描述,當(dāng)不能使用 label 時(shí),為表單項(xiàng)添加 title 屬性
- 當(dāng)表單項(xiàng)是必填項(xiàng)的時(shí)候,使用 “*“ 符號(hào)來(lái)標(biāo)記
- Flash 創(chuàng)建表單項(xiàng)一般是不會(huì)生成 <label> 的,請(qǐng)勾上 auto label 那個(gè)選項(xiàng)
<form method="post" action="http://sofish.de">
<fieldset><legend>My Form</legend>
<label for="firstname">* First name:</label> <input type="text" id="firstname" />
<label for="speech">Say something:</label>
<textarea id="speech" />
</textare>
<input type="submit" value="submit" title="submit button" />
</fieldset>
</form>
16. 圖片: <img>
對(duì)于圖片,盲人看不到。提供 alt 來(lái)表示替代文本。告訴他們這是一張什么樣的圖。
<img src="http://sofish.de/favicon.ico" alt="幸福收藏夾的 favicon" />
17. 框架: <iframe>
盡量避免 <iframe>框架的使用,但當(dāng)你需要使用的時(shí)候,最好提供一個(gè) title 屬性對(duì)其進(jìn)行描述。
<iframe src="http://sofish.de" title="幸福收藏夾" /></iframe>
18. 流媒體:<video>/<audio>/<object>/<embed>
媒體也是比較復(fù)雜的格式,處理起來(lái)比較麻煩。通常我們可以這樣做:
- 為視聽媒體提供相應(yīng)的文本,包括相應(yīng)的場(chǎng)景,比如演講中的鼓掌等有利有閱讀者感知現(xiàn)在氣氛的,都應(yīng)該體現(xiàn)在演講文本中。其他的依此類推。
- 如果像交響樂(lè)這種不能提供具體描述的,可以進(jìn)行簡(jiǎn)單的說(shuō)明
- 如果文本較長(zhǎng),不能在當(dāng)前頁(yè)面展示,可以在媒體后提供一個(gè)鏈接到相應(yīng)替代文本的鏈接
- 如果媒體中有可能會(huì)引起癲癇發(fā)作的,應(yīng)做相應(yīng)的說(shuō)明
<audio src="mozart.mp4">莫扎特39號(hào)交響曲</audio>
19. 網(wǎng)頁(yè)標(biāo)題:<title>
網(wǎng)頁(yè)中一定要包含標(biāo)題,并且每個(gè)標(biāo)簽應(yīng)該具有辨識(shí)性。比如支付寶中是這樣體現(xiàn)的:
<title>聯(lián)系我 -- 幸福收藏夾</title>
20. 總結(jié)
好吧。就先寫到這里了。WCAG 并不只是這些簡(jiǎn)單的 HTML Tags 的用法,語(yǔ)義化的網(wǎng)頁(yè)也不是一兩篇文章能夠?qū)懲甑摹B齺?lái)吧。從最常見的做起,養(yǎng)成好的習(xí)慣?;氐轿恼虑懊娴哪蔷湓?,難道你忍心把頁(yè)面寫得這么難用嗎?