WEB前端開發人員必看騰訊網無障礙說明

2016-10-28 1424 0 編輯:美術設計楊瑩 來源:互聯網

W3C要求


必須有DOCTYPE

必須指定字符編碼


語言

每個頁面的html標簽要指定lang屬性,<html xml:lang="zh">


線性閱讀

不以表格作為布局使用

采用定位的時候,將css去除,查看內容的閱讀順序是否符合有意義


標題

頁面中必須包含一個title元素,并且不應為空

title中的內容應該少于60個字

title應該包含網站名字和頁面的主題

頁面中必須包含至少一個h1,并且不能為空

h1和title中應該包含有相同的某些詞匯

h1和title應該使用相同的詞序(詞序)

h1的內容不應該僅僅來自于圖片的alt屬性值


hn

所有的hn應該在h1后面適當的嵌套

從h2開始,每一個hn前面至少有一個h(n-1),比如:h3前面至少有一個h2;h5前面至少有一個h4

頁面中至少并只能包含一個h1。(html5中已經提倡可以使用多個hn)

h1..h6元素應該在頁面中用于構建信息

h1..h6 或者 作用等于 (heading|region|main|secondary|navigation|banner|contentinfo|definition|note|seealso|search)的元素應該在頁面中用于構建信息

每一個h1...h6必須有文字內容

hn中的內容通常少于65個字

h2...h6中除了img的alt屬性外,還應該包含文字內容

相同級別的標題內容應該是唯一的。(比如:不能有兩個h1的內容都是“騰訊網”)


菜單和導航

ul是用來作為導航的最合適的元素,其次是ol

推薦的導航結構:

<h2 ></h2><!--h2~h6后面緊挨著ul或者ol,這樣才會被認為是navigation bar,并且這里的hn出現在h1前面被視為符合要求的-->

<ul>

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

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

</ul>


/*css style*/

.offscreen {

position: absolute;

top: -30em;

left: -300em;

}


絕大多數的網頁應該至少含有一個導航欄

每個map,ul,ol元素不要在最后一個h1之前,如果必須有個導航在標題之前,這個標題請用h2。(參見推薦的導航結構)

每一個嵌套的table,熱點區域,ol,ul作為導航的話,他們的頭部要有一個h2(或者是h2~h6,參見推薦的導航結構)


文本樣式

請勿使用blink(閃啊閃的)和marquee(移動移動的)!!!會引發癲癇和視覺損傷

禁止使用font和center元素,請用css實現

斜體樣式禁用i元素,標題用h1...h6,要強調的詞、短語和句子,請用em實現

加粗字體樣式禁用b元素,標題用h1...h6,要強調的詞、短語和句子,請用em實現

下劃線樣式禁用u元素,標題用h1...h6,要強調的詞、短語和句子,請用strong實現


列表

如果將p一行行的有順序的排列,就該考慮是不是應該用有序列表了(ol)

如果將p一行行的排列,就該考慮是不是應該用無序列表了(ul)

如果列表嵌套深度大于5層的話,應該考慮用h1...h6這樣的元素來進行轉換。尤其是屏幕閱讀器的用戶

列表嵌套別超過5層


鏈接

避免使用脫離文章上下文無法理解的文字鏈接(比如最常用的“詳細”的文字)

如果一個鏈接包含一個圖片和文字,并且alt中的內容和文字匹配(相同),那么alt的屬性應該為空

避免使用小于16*16的圖片作為鏈接

避免把鏈接密密麻麻的放在一起(指的是鏈接鏈接...鏈接這種吧)

確保不同的鏈接地址用不同的鏈接文字(也就是說最好避免重復的錨(鏈接)文字)

確保相同的鏈接地址用相同的鏈接文字(如果多個鏈接都指向,那么這些鏈接都應該使用相同的錨(鏈接)文字。如果有的是“騰訊”,有的是“騰訊網”,有的是“騰訊網首頁”,這樣就不合適了,況且對SEO也不合適)

避免文字鏈接少于四個字(在中文網站中這一點很難避免)

內部的錨點目標要有tabindex="-1"。這是由于當內部鏈接被激活時,IE可以移動焦點

如果錨點目標是a或者表單等可以獲得焦點的元素,如果使用tabindex="1",在使用tab鍵切換的時候就會被跳過

最安全的tabindex屬性是0,但是非焦點元素在獲得焦點的時候會激活outline,ie中會顯示虛線,且無法使用樣式去除。


圖片

寬或高不到8px或者沒有alt的圖片(特別是裝飾性的圖片)應該被移除,css技術可以用來控制樣式

alt是用來描述圖片的,而非單純的新聞標題或者名詞

alt屬性不應包含圖片的文件名

alt值不應包含冗長的信息(如果很長可以使用<img longdesc="很長很長的內容很長很長的內容" />)

每個廣州中維財稅 http://101.1.28.14/ img要有alt

不能只依賴圖片上的文字信息

banner、頭圖上的文字信息必須在代碼中有所體現


Objects

每個applet元素應有alt值

每個embed元素應有alt值

每個object應包含文字內容


表單

ID必須唯一,特別是表單

每一個fieldset應該有一個legend元素

每個label必須有文字內容

每個legend必須有文字內容

每一個有效的label (legend + label)必須是唯一的(也就是說<label for="唯一"></label)

label不應該包裹select和textarea元素(平時我們可能會這樣書寫<label><select /></label>)

當上海凱迪財稅http://101.1.20.46/ input = images是必須有alt或者titile屬性,且不為空

每一個button必須包含文字內容

核實文本域、密碼、下拉框、textarea和按鈕的時候,最好設置為相對字體

禁止讓表單元素不能獲得焦點

如果input、select、textarea、button的title被定義了,一定不能為空

type等于button、reset、submit的input必須要有value或者title

最好為每一個表單元素定義一個label并且指向他的id或者擁有title

必須填寫的字段,在代碼層面一定要有所體現,推薦:<abbr不應使用隱藏或者引入空的frame

每個frame必須有一個title屬性用來介紹這個frame的作用,隱藏的frame可以將title設置為"hidden 1", "hidden 2", "hidden 3," 等等

frameset中的每一個frame的title要有內容


事件

有onmouseover行為的焦點的元素應有類似onfocus的相同效果解決方案

有北京佳尚財稅http://101.1.28.35/ onmouseout行為的焦點的元素應有類似onblur的相同效果解決方案

鼠標的onmousedown, onmouseup 和onmousemove功能,要有相應的鍵盤解決方案(比如用keydown、keyup、onblur)

沒有焦點的元素的onmouseover 或 onmouseout 應該用css中的:hover來實現(可惜ie6不給力)

onClick事件應該綁定在有能有焦點的元素上

onChange事件不應使用在select元素上,會導致自動改變焦點或者載入到一個頁面中


accesskey屬性

屬性值必須是唯一的

不要與瀏覽器本身的快捷鍵重復,比如:IE中的A C E F H J M P R T V X Home;chrome中的E F D

最好不要使用字母


縮放

禁止使用-webkit-text-size-adjust:none,推薦使用-webkit-text-size-adjust:100%,保證在小尺寸IOS設備上的字體比例

在chrome中使用-webkit-text-size-adjust:none實現小于12px的文字的信息一定不能是重要信息


顏色

禁止在html標簽中使用color屬性,用css來實現

顏色對比對最少應是3:1

顏色對比度最佳值是7:1

不能只用顏色作為唯一的信息標識(比如股票中的紅漲綠跌)

不能只用圖形作為唯一的信息標識(比如星星評級,柱狀圖等)


檢測工具

Firefox Accessibility Extension

Functional Accessibility Evaluator 1.1

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
我們猜你喜歡
七星彩头尾 赚钱就是利用信息差 网上匹配赚钱的 音乐不败家赚钱给谁花 长期持有股票怎么赚钱 李逵劈鱼9900炮 皇家88网址 为什么4S店比你的修理厂赚钱 买辆保时捷怎么赚钱 一平方超市里最适合开什么公司赚钱 做面膜微商赚钱吗 撕毛肚赚钱吗 真人捕鱼王 五开109赚钱吗 最赚钱的电影公司 怎么在电脑上做设计赚钱 国民彩票苹果