這樣去寫你的 HTML 讓你的代碼更好的兼容性

2019-10-26 17:26:07

字體：大中小

供稿：網(wǎng)友

比如那些需要讀屏軟件的用戶。作為一個(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è)面最常見(jiàn)的標(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)使用 &lt;b&gt; 標(biāo)簽</del>HTML上表示強(qiáng)調(diào)時(shí)，請(qǐng)使用 &lt;strong&gt; 標(biāo)簽效果是這樣的：
HTML上表示強(qiáng)調(diào)時(shí)，請(qǐng)使用 <b> 標(biāo)簽