這樣去寫你的 HTML

昨天在 twitter 上說，怎麼忍心把頁面寫得這麼難用？是的，這個世界還有一群人等著我們建立出來的東西，可以讓他們的生活能過得更容易呢。比如那些需要讀屏軟體的使用者。作為乙個前端，我們又怎麼會忍心呢。之前就一直想寫這樣的一篇文章，分享一下如何去創造乙個可訪問性更好的頁面。今天的計畫裡有一條把 2html t2ag 和 wcag標準結合起來。我推薦你這樣去寫你的 html，讓某些人的生活可以更容易。

今天想分享的是如何去使用我們的 html tag, 把 wcag 的標準和語義網的目標進行**上的體現：

其實這跟 wcag 根本上連不上什麼直接關係，但為了乙個相容性更好，特別是向後相容的頁面，我推薦你這樣寫：

網際網路的聯幾乎可以說是用來實現的，作為乙個頁面最常見的標籤。我們應該如何對待呢？

為關鍵鏈結新增 accesskey

除非萬不得已，不要去掉 focus 時虛線框

hidefocus>link

對於用 html tag 的正確使用，也是非常重要的，這有利於讀屏軟體使用者對於頁面結構的理解。特別是在 h1,h2,h3 等這些標籤的使用，濫用非常容易造成結構費解。當然，使用一般的標籤，再利用 css 來使視覺上形成對比這也是常人能辨識的。但讀屏軟體使用者呢。當然，這裡只是順帶提起需要注意頁面標籤的使用方法，而 abbr 最重要的應該是應該新增乙個 title 屬性對縮寫進行描述。比如：

wd

有大段引用的時候，使用，而行內引用則使用，讓你的結構更加易讀：

之前就一直想寫這樣的一篇文章，分享一下如何去創造乙個可訪問性更好的頁面。今天的計畫裡有一條把 2html t2ag 和 wcag標準結合起來。我推薦你這樣去寫你的 html，讓某些人的生活可以更容易。某a給我印象最深刻的一句話是，「做前端要有愛。不要動不動就有朩有地對各種人使用咆哮體」。

在紙上寫東西不能像在計算機上寫東西一樣，可以用撤銷鍵可以按，但當我們想要強調某些東西是被刪除的怎麼辦？那就是使用標籤了。比如這樣：

html上表示強調時，請使用標籤

效果是這樣的：

html上表示強調時，請使用標籤

html上表示強調時，請使用標籤

去年帶著新人做支付寶前端部落格的時候，他們給我印象最深刻的是很喜歡用。當時在想，這些同學挺不錯的，對語義化的理解還不錯。我們還是比較少用到定義列表的。而是使用一般的

date

ippv

2011.3.11

3000

8000

是指 computer code text, 而是指 preformatted text。的範圍更廣，並且是塊狀元素，可能被使用來格式化各種文字，特別是**。使用沒有需要特別注意的，主要是語義上的正確使用，比如不要用來代替一般的text-align:center在現代網頁中，使用

的情況是非常少的。網頁中的留白，一般都是使用 css 的 padding 和 margin 來實現。這樣更精準，並用更容易控制。現在推薦的用法是，使用到一般的段落中做簡單的換行，而不是用來控制頁面留白。

我是乙個段落。

詩歌都會用換行的。

具有非常好的語義作用。但他的視覺效果很難控制。之前就寫過這樣的文章在各瀏覽器中的問題" href="">關於在各瀏覽器中的問題。一般也都很少用。如果專門為讀屏軟體使用者提供單獨頁面的話，或許會大有用處。

lorem ipsum is ...

this is the entry of...

其實 /這兩個標籤是有語義的，都是 defines a section in a document。是的，和 html5 中的其實是一樣的。只是，因為搜尋引擎的的原因，搜尋引擎認為它們是無語義標籤，因此他們成了「無語義」標籤。推薦用法是盡量使用其他來做為頁面框架的容器，比如布局、新增額外的視覺效果，而不是段落等的替代品。

這幾個標籤幾乎可以說是乙個頁面標籤等級結構中最重要的標籤。我們可以用一本書的結構來說明這幾個標籤，而我們構建乙個頁面的時候，也應該有這樣的一種思想在腦中：

是的，當然還有引用，技術類書中提供的**

，一些需要注意點的列表莫扎特39號交響曲

網頁中一定要包含標題，並且每個標籤應該具有辨識性。比如支付寶中是這樣體現的：

聯絡我 -- 幸福收藏夾

好吧。就先寫到這裡了。wcag 並不只是這些簡單的 html tags 的用法，語義化的網頁也不是一兩篇文章能夠寫完的。慢慢來吧。從最常見的做起，養成好的習慣。回到文章前面的那句話，難道你忍心把頁面寫得這麼難用嗎？

這樣去寫你的 HTML

這樣去寫你的HTML

這樣去寫你的 HTML

這樣去寫你的 HTML

相關推薦