DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> 網頁制作技巧教程:網頁無障礙說明標准
網頁制作技巧教程:網頁無障礙說明標准
編輯:HTML和Xhtml     

W3C要求
  1. 必須有DOCTYPE
  2. 必須指定字符編碼
語言
  1. 每個頁面的html標簽要指定lang屬性,<html xml:lang="zh" lang="zh">
線性閱讀
  1. 不以表格作為布局使用
  2. 采用定位的時候,將css去除,查看內容的閱讀順序是否符合有意義
標題
  1. 頁面中必須包含一個title元素,並且不應為空
  2. title中的內容應該少於60個字
  3. title應該包含網站名字和頁面的主題
  4. 頁面中必須包含至少一個h1,並且不能為空
  5. h1和title中應該包含有相同的某些詞匯
  6. h1和title應該使用相同的詞序(詞序) 鏈接鏈接...鏈接這種吧)
  7. h1的內容不應該僅僅來自於圖片的alt屬性值
hn
  1. 所有的hn應該在h1後面適當的嵌套
  2. 從h2開始,每一個hn前面至少有一個h(n-1),比如:h3前面至少有一個h2;h5前面至少有一個h4
  3. 頁面中至少並只能包含一個h1。(html5中已經提倡可以使用多個hn)
  4. h1..h6元素應該在頁面中用於構建信息
  5. h1..h6 或者 作用等於 (heading|region|main|secondary|navigation|banner|contentinfo|definition|note|seealso|search)的元素應該在頁面中用於構建信息
  6. 每一個h1...h6必須有文字內容
  7. hn中的內容通常少於65個字
  8. h2...h6中除了img的alt屬性外,還應該包含文字內容
  9. 相同級別的標題內容應該是唯一的。(比如:不能有兩個h1的內容都是“騰訊網”)
菜單和導航
  1. ul是用來作為導航的最合適的元素,其次是ol
  2. 推薦的導航結構:

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

    <ul>

     

  3. <a href="#">欄目1

     

     

  4. <a href="#">欄目2

     

    </ul>

    /*css style*/

    .offscreen {
    position: absolute;
    top: -30em;
    left: -300em;
    }

  5. 絕大多數的網頁應該至少含有一個導航欄
  6. 每個map,ul,ol元素不要在最後一個h1之前,如果必須有個導航在標題之前,這個標題請用h2。(參見推薦的導航結構)
  7. 每一個嵌套的table,熱點區域,ol,ul作為導航的話,他們的頭部要有一個h2(或者是h2~h6,參見推薦的導航結構)
文本樣式
  1. 請勿使用blink(閃啊閃的)和marquee(移動移動的)!!!會引發癫痫和視覺損傷
  2. 禁止使用font和center元素,請用css實現
  3. 斜體樣式禁用i元素,標題用h1...h6,要強調的詞、短語和句子,請用em實現
  4. 加粗字體樣式禁用b元素,標題用h1...h6,要強調的詞、短語和句子,請用em實現
  5. 下劃線樣式禁用u元素,標題用h1...h6,要強調的詞、短語和句子,請用strong實現
列表
  1. 如果將p一行行的有順序的排列,就該考慮是不是應該用有序列表了(ol)
  2. 如果將p一行行的排列,就該考慮是不是應該用無序列表了(ul)
  3. 如果列表嵌套深度大於5層的話,應該考慮用h1...h6這樣的元素來進行轉換。尤其是屏幕閱讀器的用戶
  4. 列表嵌套別超過5層
鏈接
  1. 避免使用脫離文章上下文無法理解的文字鏈接(比如最常用的“詳細”的文字)
  2. 如果一個鏈接包含一個圖片和文字,並且alt中的內容和文字匹配(相同),那麼alt的屬性應該為空
  3. 避免使用小於16*16的圖片作為鏈接
  4. 避免把鏈接密密麻麻的放在一起(指的是
  5. 確保不同的鏈接地址用不同的鏈接文字(也就是說最好避免重復的錨(鏈接)文字)
  6. 確保相同的鏈接地址用相同的鏈接文字(如果多個鏈接都指向http://www.qq.com,那麼這些鏈接都應該使用相同的錨(鏈接)文字。如果有的是“騰訊”,有的是“騰訊網”,有的是“騰訊網首頁”,這樣就不合適了,況且對SEO也不合適)
  7. 避免文字鏈接少於四個字(在中文網站中這一點很難避免)
  8. 內部的錨點目標要有tabindex="-1"。這是由於當內部鏈接被激活時,IE可以移動焦點
  9. 如果錨點目標是a或者表單等可以獲得焦點的元素,如果使用tabindex="1",在使用tab鍵切換的時候就會被跳過
  10. 最安全的tabindex屬性是0
圖片
  1. 寬或高不到8px或者沒有alt的圖片(特別是裝飾性的圖片)應該被移除,css技術可以用來控制樣式
  2. alt是用來描述圖片的,而非單純的新聞標題或者名詞
  3. alt屬性不應包含圖片的文件名
  4. alt值不應包含冗長的信息(如果很長可以使用<img longdesc="很長很長的內容很長很長的內容" />)
  5. 每個img要有alt
  6. 不能只依賴圖片上的文字信息
  7. banner、頭圖上的文字信息必須在代碼中有所體現
Objects
  1. 每個applet元素應有alt值
  2. 每個embed元素應有alt值
  3. 每個object應包含文字內容
表單
  1. ID必須唯一,特別是表單
  2. 每一個fieldset應該有一個legend元素
  3. 每個label必須有文字內容
  4. 每個legend必須有文字內容
  5. 每一個有效的label (legend + label)必須是唯一的(也就是說<label for="唯一"></label)
  6. label不應該包裹select和textarea元素(平時我們可能會這樣書寫<label><select /></label>)
  7. 當input = images是必須有alt或者titile屬性,且不為空
  8. 每一個button必須包含文字內容
  9. 核實文本域、密碼、下拉框、textarea和按鈕的時候,最好設置為相對字體
  10. 禁止讓表單元素不能獲得焦點
  11. 如果input、select、textarea、button的title被定義了,一定不能為空
  12. type等於button、reset、submit的input必須要有value或者title
  13. 最好為每一個表單元素定義一個label並且指向他的id或者擁有title
  14. 必須填寫的字段,在代碼層面一定要有所體現,推薦:<abbr title="required">*</abbr>
框架
  1. 不應使用隱藏或者引入空的frame
  2. 每個frame必須有一個title屬性用來介紹這個frame的作用,隱藏的frame可以將title設置為"hidden 1", "hidden 2", "hidden 3," 等等
  3. frameset中的每一個frame的title要有內容
事件
  1. 有onmouseover行為的焦點的元素應有類似onfocus的相同效果解決方案
  2. 有onmouseout行為的焦點的元素應有類似onblur的相同效果解決方案
  3. 鼠標的onmousedown, onmouseup 和onmousemove功能,要有相應的鍵盤解決方案(比如用keydown、keyup、onblur)
  4. 沒有焦點的元素的onmouseover 或 onmouseout 應該用css中的:hover來實現(可惜ie6不給力)
  5. onClick事件應該綁定在有能有焦點的元素上
  6. onChange事件不應使用在select元素上,會導致自動改變焦點或者載入到一個頁面中
accesskey屬性
  1. 屬性值必須是唯一的
  2. 不要與浏覽器本身的快捷鍵重復,比如:IE中的A C E F H J M P R T V X
  3. 最好不要使用字母
縮放
  1. 禁止使用-webkit-text-size-adjust:none,推薦使用-webkit-text-size-adjust:100%,保證在小尺寸IOS設備上的字體比例
  2. 在chrome中使用-webkit-text-size-adjust:none實現小於12px的文字的信息一定不能是重要信息
顏色
  1. 禁止在html標簽中使用color屬性,用css來實現
  2. 顏色對比對最少應是3:1
  3. 顏色對比度最佳值是7:1
  4. 不能只用顏色作為唯一的信息標識(比如股票中的紅漲綠跌)
  5. 不能只用圖形作為唯一的信息標識(比如星星評級,柱狀圖等)

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved