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