騰訊網(wǎng)無障礙說明
發(fā)布時間：2018-06-22 11:55:13
來源：騰訊網(wǎng)
W3C要求
- 必須有DOCTYPE
- 必須指定字符編碼
語言
- 每個頁面的html標簽要指定lang屬性，<html xml:lang="zh" lang="zh">
線性閱讀
- 不以表格作為布局使用
- 采用定位的時候，將css去除，查看內(nèi)容的閱讀順序是否符合有意義
焦點與鍵盤
- 禁止移除焦點
- 不可禁用鍵盤操作
標題
- 頁面中必須包含一個title元素，并且不應(yīng)為空
- title中的內(nèi)容應(yīng)該少于60個字
- title應(yīng)該包含網(wǎng)站名字和頁面的主題
- 頁面中必須包含至少一個h1，并且不能為空
- h1和title中應(yīng)該包含有相同的某些詞匯
- h1和title應(yīng)該使用相同的詞序（詞序）
- h1的內(nèi)容不應(yīng)該僅僅來自于圖片的alt屬性值
hn
- 所有的hn應(yīng)該在h1后面適當?shù)那短?/li>
- 從h2開始，每一個hn前面至少有一個h(n-1)，比如：h3前面至少有一個h2；h5前面至少有一個h4
- 頁面中至少并只能包含一個h1。（html5中已經(jīng)提倡可以使用多個hn）
- h1..h6元素應(yīng)該在頁面中用于構(gòu)建信息
- h1..h6 或者 作用等于 （heading|region|main|secondary|navigation|banner|contentinfo|definition|note|seealso|search）的元素應(yīng)該在頁面中用于構(gòu)建信息
- 每一個h1...h6必須有文字內(nèi)容
- hn中的內(nèi)容通常少于65個字
- h2...h6中除了img的alt屬性外，還應(yīng)該包含文字內(nèi)容
- 相同級別的標題內(nèi)容應(yīng)該是唯一的。（比如：不能有兩個h1的內(nèi)容都是“騰訊網(wǎng)”）
菜單和導航
- ul是用來作為導航的最合適的元素，其次是ol
-
推薦的導航結(jié)構(gòu)：
<h2 class="offscreen" ></h2><!--h2~h6后面緊挨著ul或者ol，這樣才會被認為是navigation bar，并且這里的hn出現(xiàn)在h1前面被視為符合要求的-->
<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)該至少含有一個導航欄
- 每個map，ul，ol元素不要在最后一個h1之前，如果必須有個導航在標題之前，這個標題請用h2。(參見推薦的導航結(jié)構(gòu))
- 每一個嵌套的table，熱點區(qū)域，ol，ul作為導航的話，他們的頭部要有一個h2(或者是h2~h6，參見推薦的導航結(jié)構(gòu))
文本樣式
- 請勿使用blink(閃啊閃的)和marquee(移動移動的)?。?！會引發(fā)癲癇和視覺損傷
- 禁止使用font和center元素，請用css實現(xiàn)
- 斜體樣式禁用i元素，標題用h1...h6，要強調(diào)的詞、短語和句子，請用em實現(xiàn)
- 加粗字體樣式禁用b元素，標題用h1...h6，要強調(diào)的詞、短語和句子，請用em實現(xiàn)
- 下劃線樣式禁用u元素，標題用h1...h6，要強調(diào)的詞、短語和句子，請用strong實現(xiàn)
列表
- 如果將p一行行的有順序的排列，就該考慮是不是應(yīng)該用有序列表了（ol）
- 如果將p一行行的排列，就該考慮是不是應(yīng)該用無序列表了（ul）
- 如果列表嵌套深度大于5層的話，應(yīng)該考慮用h1...h6這樣的元素來進行轉(zhuǎn)換。尤其是屏幕閱讀器的用戶
- 列表嵌套別超過5層
鏈接
- 避免使用脫離文章上下文無法理解的文字鏈接（比如最常用的“詳細”的文字）
- 如果一個鏈接包含一個圖片和文字，并且alt中的內(nèi)容和文字匹配（相同），那么alt的屬性應(yīng)該為空
- 避免使用小于16*16的圖片作為鏈接
- 避免把鏈接密密麻麻的放在一起（指的是鏈接鏈接...鏈接這種吧）
- 確保不同的鏈接地址用不同的鏈接文字（也就是說最好避免重復(fù)的錨（鏈接）文字）
- 確保相同的鏈接地址用相同的鏈接文字（如果多個鏈接都指向http://www.qq.com，那么這些鏈接都應(yīng)該使用相同的錨（鏈接）文字。如果有的是“騰訊”，有的是“騰訊網(wǎng)”，有的是“騰訊網(wǎng)首頁”，這樣就不合適了，況且對SEO也不合適）
- 避免文字鏈接少于四個字（在中文網(wǎng)站中這一點很難避免）
- 內(nèi)部的錨點目標要有tabindex="-1"。這是由于當內(nèi)部鏈接被激活時，IE可以移動焦點
- 如果錨點目標是a或者表單等可以獲得焦點的元素，如果使用tabindex="1"，在使用tab鍵切換的時候就會被跳過
- 最安全的tabindex屬性是0，但是非焦點元素在獲得焦點的時候會激活outline，ie中會顯示虛線，且無法使用樣式去除。
圖片
- 寬或高不到8px或者沒有alt的圖片（特別是裝飾性的圖片）應(yīng)該被移除，css技術(shù)可以用來控制樣式
- alt是用來描述圖片的，而非單純的新聞標題或者名詞
- alt屬性不應(yīng)包含圖片的文件名
- alt值不應(yīng)包含冗長的信息（如果很長可以使用<img longdesc="很長很長的內(nèi)容很長很長的內(nèi)容" />）
- 每個img要有alt
- 不能只依賴圖片上的文字信息
- banner、頭圖上的文字信息必須在代碼中有所體現(xiàn)
Objects
- 每個applet元素應(yīng)有alt值
- 每個embed元素應(yīng)有alt值
- 每個object應(yīng)包含文字內(nèi)容
表單
- ID必須唯一，特別是表單
- 每一個fieldset應(yīng)該有一個legend元素
- 每個label必須有文字內(nèi)容
- 每個legend必須有文字內(nèi)容
- 每一個有效的label (legend + label)必須是唯一的（也就是說<label for="唯一"></label）
- label不應(yīng)該包裹select和textarea元素（平時我們可能會這樣書寫<label><select /></label>）
- 當input = images是必須有alt或者titile屬性，且不為空
- 每一個button必須包含文字內(nèi)容
- 核實文本域、密碼、下拉框、textarea和按鈕的時候，最好設(shè)置為相對字體
- 禁止讓表單元素不能獲得焦點
- 如果input、select、textarea、button的title被定義了，一定不能為空
- type等于button、reset、submit的input必須要有value或者title
- 最好為每一個表單元素定義一個label并且指向他的id或者擁有title
- 必須填寫的字段，在代碼層面一定要有所體現(xiàn)，推薦：<abbr title="required">*</abbr>
框架
- 不應(yīng)使用隱藏或者引入空的frame
- 每個frame必須有一個title屬性用來介紹這個frame的作用，隱藏的frame可以將title設(shè)置為"hidden 1", "hidden 2", "hidden 3," 等等
- frameset中的每一個frame的title要有內(nèi)容
事件
- 有onmouseover行為的焦點的元素應(yīng)有類似onfocus的相同效果解決方案
- 有onmouseout行為的焦點的元素應(yīng)有類似onblur的相同效果解決方案
- 鼠標的onmousedown, onmouseup 和onmousemove功能，要有相應(yīng)的鍵盤解決方案（比如用keydown、keyup、onblur）
- 沒有焦點的元素的onmouseover 或 onmouseout 應(yīng)該用css中的:hover來實現(xiàn)（可惜ie6不給力）
- onClick事件應(yīng)該綁定在有能有焦點的元素上
- onChange事件不應(yīng)使用在select元素上，會導致自動改變焦點或者載入到一個頁面中
accesskey屬性
- 屬性值必須是唯一的
- 不要與瀏覽器本身的快捷鍵重復(fù)，比如：IE中的A C E F H J M P R T V X Home；chrome中的E F D；firefox：B E F H S T V 另外有的插件會把自己安裝在菜單欄里，并且綁定一個字母作為快捷鍵
- 最好不要使用字母
縮放
- 禁止使用-webkit-text-size-adjust:none，推薦使用-webkit-text-size-adjust:100%，保證在小尺寸IOS設(shè)備上的字體比例
- 在chrome中使用-webkit-text-size-adjust:none實現(xiàn)小于12px的文字的信息一定不能是重要信息
顏色
- 禁止在html標簽中使用color屬性，用css來實現(xiàn)
- 顏色對比對最少應(yīng)是3：1
- 顏色對比度最佳值是7：1
- 不能只用顏色作為唯一的信息標識（比如股票中的紅漲綠跌）
- 不能只用圖形作為唯一的信息標識（比如星星評級，柱狀圖等）
