當(dāng)前位置：首頁 > 用戶體驗(yàn) > 前端開發(fā) >

騰訊網(wǎng)無障礙說明

來源/作者：騰訊　類別：前端開發(fā)　字體大小：大|中|小　背景顏色：藍(lán)|白|灰　 « »

W3C要求

必須有DOCTYPE
必須指定字符編碼

語言

每個(gè)頁面的html標(biāo)簽要指定lang屬性，<html xml:lang="zh" lang="zh">

線性閱讀

不以表格作為布局使用
采用定位的時(shí)候，將css去除，查看內(nèi)容的閱讀順序是否符合有意義

標(biāo)題

頁面中必須包含一個(gè)title元素，并且不應(yīng)為空
title中的內(nèi)容應(yīng)該少于60個(gè)字
title應(yīng)該包含網(wǎng)站名字和頁面的主題
頁面中必須包含至少一個(gè)h1，并且不能為空
h1和title中應(yīng)該包含有相同的某些詞匯
h1和title應(yīng)該使用相同的詞序（詞序）鏈接鏈接...鏈接這種吧）
h1的內(nèi)容不應(yīng)該僅僅來自于圖片的alt屬性值

hn

所有的hn應(yīng)該在h1后面適當(dāng)?shù)那短?/li>
從h2開始，每一個(gè)hn前面至少有一個(gè)h(n-1)，比如：h3前面至少有一個(gè)h2；h5前面至少有一個(gè)h4
頁面中至少并只能包含一個(gè)h1。（html5中已經(jīng)提倡可以使用多個(gè)hn）
h1..h6元素應(yīng)該在頁面中用于構(gòu)建信息
h1..h6 或者作用等于（heading|region|main|secondary|navigation|banner|contentinfo|definition|note|seealso|search）的元素應(yīng)該在頁面中用于構(gòu)建信息
每一個(gè)h1...h6必須有文字內(nèi)容
hn中的內(nèi)容通常少于65個(gè)字
h2...h6中除了img的alt屬性外，還應(yīng)該包含文字內(nèi)容
相同級(jí)別的標(biāo)題內(nèi)容應(yīng)該是唯一的。（比如：不能有兩個(gè)h1的內(nèi)容都是“騰訊網(wǎng)”）

菜單和導(dǎo)航

ul是用來作為導(dǎo)航的最合適的元素，其次是ol
推薦的導(dǎo)航結(jié)構(gòu)：

<h2 class="offscreen" ></h2>

<ul>

<li><a href="#">欄目1</a></li>

<li><a href="#">欄目2</a></li>

</ul>

/*css style*/

.offscreen {
position: absolute;
top: -30em;
left: -300em;
}
絕大多數(shù)的網(wǎng)頁應(yīng)該至少含有一個(gè)導(dǎo)航欄
每個(gè)map，ul，ol元素不要在最后一個(gè)h1之前，如果必須有個(gè)導(dǎo)航在標(biāo)題之前，這個(gè)標(biāo)題請(qǐng)用h2。(參見推薦的導(dǎo)航結(jié)構(gòu))
每一個(gè)嵌套的table，熱點(diǎn)區(qū)域，ol，ul作為導(dǎo)航的話，他們的頭部要有一個(gè)h2(或者是h2~h6，參見推薦的導(dǎo)航結(jié)構(gòu))

文本樣式

請(qǐng)勿使用blink(閃啊閃的)和marquee(移動(dòng)移動(dòng)的)！！！會(huì)引發(fā)癲癇和視覺損傷
禁止使用font和center元素，請(qǐng)用css實(shí)現(xiàn)
斜體樣式禁用i元素，標(biāo)題用h1...h6，要強(qiáng)調(diào)的詞、短語和句子，請(qǐng)用em實(shí)現(xiàn)
加粗字體樣式禁用b元素，標(biāo)題用h1...h6，要強(qiáng)調(diào)的詞、短語和句子，請(qǐng)用em實(shí)現(xiàn)
下劃線樣式禁用u元素，標(biāo)題用h1...h6，要強(qiáng)調(diào)的詞、短語和句子，請(qǐng)用strong實(shí)現(xiàn)

列表

如果將p一行行的有順序的排列，就該考慮是不是應(yīng)該用有序列表了（ol）
如果將p一行行的排列，就該考慮是不是應(yīng)該用無序列表了（ul）
如果列表嵌套深度大于5層的話，應(yīng)該考慮用h1...h6這樣的元素來進(jìn)行轉(zhuǎn)換。尤其是屏幕閱讀器的用戶
列表嵌套別超過5層

鏈接

避免使用脫離文章上下文無法理解的文字鏈接（比如最常用的“詳細(xì)”的文字）
如果一個(gè)鏈接包含一個(gè)圖片和文字，并且alt中的內(nèi)容和文字匹配（相同），那么alt的屬性應(yīng)該為空
避免使用小于16*16的圖片作為鏈接
避免把鏈接密密麻麻的放在一起（指的是
確保不同的鏈接地址用不同的鏈接文字（也就是說最好避免重復(fù)的錨（鏈接）文字）
確保相同的鏈接地址用相同的鏈接文字（如果多個(gè)鏈接都指向http://www.qq.com，那么這些鏈接都應(yīng)該使用相同的錨（鏈接）文字。如果有的是“騰訊”，有的是“騰訊網(wǎng)”，有的是“騰訊網(wǎng)首頁”，這樣就不合適了，況且對(duì)SEO也不合適）
避免文字鏈接少于四個(gè)字（在中文網(wǎng)站中這一點(diǎn)很難避免）
內(nèi)部的錨點(diǎn)目標(biāo)要有tabindex="-1"。這是由于當(dāng)內(nèi)部鏈接被激活時(shí)，IE可以移動(dòng)焦點(diǎn)
如果錨點(diǎn)目標(biāo)是a或者表單等可以獲得焦點(diǎn)的元素，如果使用tabindex="1"，在使用tab鍵切換的時(shí)候就會(huì)被跳過
最安全的tabindex屬性是0

圖片

寬或高不到8px或者沒有alt的圖片（特別是裝飾性的圖片）應(yīng)該被移除，css技術(shù)可以用來控制樣式
alt是用來描述圖片的，而非單純的新聞標(biāo)題或者名詞
alt屬性不應(yīng)包含圖片的文件名
alt值不應(yīng)包含冗長(zhǎng)的信息（如果很長(zhǎng)可以使用<img longdesc="很長(zhǎng)很長(zhǎng)的內(nèi)容很長(zhǎng)很長(zhǎng)的內(nèi)容" />）
每個(gè)img要有alt
不能只依賴圖片上的文字信息
banner、頭圖上的文字信息必須在代碼中有所體現(xiàn)

Objects

每個(gè)applet元素應(yīng)有alt值
每個(gè)embed元素應(yīng)有alt值
每個(gè)object應(yīng)包含文字內(nèi)容

表單

ID必須唯一，特別是表單
每一個(gè)fieldset應(yīng)該有一個(gè)legend元素
每個(gè)label必須有文字內(nèi)容
每個(gè)legend必須有文字內(nèi)容
每一個(gè)有效的label (legend + label)必須是唯一的（也就是說<label for="唯一"></label）
label不應(yīng)該包裹select和textarea元素（平時(shí)我們可能會(huì)這樣書寫<label><select /></label>）
當(dāng)input = images是必須有alt或者titile屬性，且不為空
每一個(gè)button必須包含文字內(nèi)容
核實(shí)文本域、密碼、下拉框、textarea和按鈕的時(shí)候，最好設(shè)置為相對(duì)字體
禁止讓表單元素不能獲得焦點(diǎn)
如果input、select、textarea、button的title被定義了，一定不能為空
type等于button、reset、submit的input必須要有value或者title
最好為每一個(gè)表單元素定義一個(gè)label并且指向他的id或者擁有title
必須填寫的字段，在代碼層面一定要有所體現(xiàn)，推薦：<abbr title="required">*</abbr>

框架

不應(yīng)使用隱藏或者引入空的frame
每個(gè)frame必須有一個(gè)title屬性用來介紹這個(gè)frame的作用，隱藏的frame可以將title設(shè)置為"hidden 1", "hidden 2", "hidden 3," 等等
frameset中的每一個(gè)frame的title要有內(nèi)容

事件

有onmouseover行為的焦點(diǎn)的元素應(yīng)有類似onfocus的相同效果解決方案
有onmouseout行為的焦點(diǎn)的元素應(yīng)有類似onblur的相同效果解決方案
鼠標(biāo)的onmousedown, onmouseup 和onmousemove功能，要有相應(yīng)的鍵盤解決方案（比如用keydown、keyup、onblur）
沒有焦點(diǎn)的元素的onmouseover 或 onmouseout 應(yīng)該用css中的:hover來實(shí)現(xiàn)（可惜ie6不給力）
onClick事件應(yīng)該綁定在有能有焦點(diǎn)的元素上
onChange事件不應(yīng)使用在select元素上，會(huì)導(dǎo)致自動(dòng)改變焦點(diǎn)或者載入到一個(gè)頁面中

accesskey屬性

屬性值必須是唯一的
不要與瀏覽器本身的快捷鍵重復(fù)，比如：IE中的A C E F H J M P R T V X
最好不要使用字母

縮放

禁止使用-webkit-text-size-adjust:none，推薦使用-webkit-text-size-adjust:100%，保證在小尺寸IOS設(shè)備上的字體比例
在chrome中使用-webkit-text-size-adjust:none實(shí)現(xiàn)小于12px的文字的信息一定不能是重要信息