DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 用戶體驗設計:面向殘疾人的網站建設標准
用戶體驗設計:面向殘疾人的網站建設標准
編輯:關於網頁技巧     

2010年在廣州舉行的2010亞殘奧運會,現在已經進行了好幾天了;截止到目前為止,中國的健兒們也奪得了144枚金牌。關注他們在運動場的拼搏,讓我有很多的感動和啟發;作為熱愛互聯網的我對盲人網站的建設也需要盡自己的綿薄之力。所以我站在自己的角度上面對殘疾人的網站建設做了一些展望和分析,就是下文。我只是在這裡拋磚引玉,文中會有很多不足和錯誤,希望大伙能幫忙指出。並且我倡導呼吁能有更多愛好互聯網的愛心人士們開始關注他們,幫助他們。盲人試聽2010亞殘會-聲波網

根據CNNIC於2010年1月公布的《中國互聯網絡發展狀況統計報告》顯示;截至2009年12月31日,中國網民規模達到3.84億人,普及率達到28.9%。而我國有殘疾人8300萬,占全國人口的6.34%。

在工業化進展速度之快的現代社會,互聯網的應用目前已經映射到生活的中的方方面面,當然針對盲人朋友的設計,互聯網在興建之初,就開始在很多方面也可以為盲人做的鋪墊。當然國外是最先興起的,這股浪潮現在開始在國內蔓延。國內殘疾人的聯合會組織的建立,也旨在幫助殘疾朋友能享受和我們一樣的信息和生活。

以中文為主要語言的萬維網網絡資源日益豐富,然而視障者由於視覺上的不便在使用這些資源時存在諸多困難,如無法直接”浏覽”網頁內容,無法使用鼠標點擊超鏈接,等等.盲人浏覽器就是為了幫助視障者更好地使用這些資源而設計實現的。盲人浏覽器有以下特點:通過語音合成技術,將網頁中所有的文本內容朗讀出來;用健盤"點擊”超鏈接實現網頁跳轉;針對中文用戶特點設計了多種功能。盲人浏覽器經過多方測試和不斷完善,現在已有成熟產品.

國內相關部門也已經於2008年出台了先關建設標准-《信息無障礙 身體機能差異人群 網站設計無障礙技術要求》文檔訪問地址:http://wza.isc.org.cn/download/20080808.pdf

對於殘疾人的一些網站建設標准目前有如下:

  1. 信息無障礙
  2. 網頁無障礙

所謂的信息無障礙是指無論健全人還是殘疾人、無論年輕人還是老年人都能夠從信息技術中獲益,任何人在任何情況下都能平等地、方便地、無障礙地獲取信息、利用信息。

所謂的網頁無障礙是指殘疾人、有特殊需求的健全人可以獲取網絡上的任何信息,為了做到這一點,就要實現網頁內容無障礙以及上網使用的輔助軟件技術的無障礙。

針對殘疾人的網站需要實現以下無障礙的功能:

1)無障礙強化導航功能

2)語義化的輔助提示語音功能

3)無障礙網站浏覽輔助功能

1)無障礙強化導航功能包含哪些內容?

a)支持全鍵盤操作,無需依賴於鼠標;

b)欄目跳轉,實現欄目分組間的跳轉;

c)區域跳轉,實現頁面內各區塊的跳轉,主要包括:頂部導航區,左部導航區,中間內容區,主要內容區,底部內容區等區塊;

2)語義化的輔助提示語音功能

a)為所有有含義圖片提供替代文字說明;

b)為所有鏈接添加可理解的完整含義的提示文字;

c)為所有輸入表單均添加可理解的完整含義提示文字;

d)為Flash操作界面提供了無障礙提示語音;

e)為網頁中內嵌網頁提供了相應的說明標題並提供了鍵盤訪問功能;

f)為增強的導航功能提供了相應的語音提示和可選鍵盤操作功能;

g)提供漂浮窗體開關控制功能;

3)無障礙網站浏覽輔助功能

a)提供開啟、關閉無障礙網站浏覽輔助工具的功能;

b)提供無障礙純文本轉換模式;

c)提供文字大小控制功能;

d)提供高對比度顯示功能;

e)提供輔助線輔助功能;

f)提供界面控制功能;

名詞注釋:

a)如何使用網站浏覽輔助工具條?

本站提供了關閉和開啟無障礙網站浏覽輔助工具的快捷鍵,而且在網站首頁頂部導航欄內,設有“輔助工具條”按鈕,也可通過點擊該按鈕開啟或關閉無障礙網站浏覽輔助工具。

b)什麼是純文本模式?

在純文本網頁中,將網頁中的圖像等非文本內容轉化成文本,並以線性化的顯示方式從上到下顯示,以滿足具有不同訪問需求人群的需求。進入純文本模式後還可以通過點擊“切換為可視化模式”按鈕返回正常模式。此外,專門為純文本顯示模式的轉換功能提供了對應的快捷鍵,並且該組快捷鍵的使用不依賴於工具條的開啟狀態。

c)文字大小控制功能提供了哪幾類控制模式?

文字大小控制按鈕可以調整網頁的字體大小,包括中等字體、大型字體、超大字體、還原字體等功能,該按鈕缺省狀態為“中等字體”,通過點擊該按鈕改變頁面的字體大小和按鈕狀態。按鈕狀態改變順序為:中等字體—大型字體—超大字體—還原(中等)字體。

d)什麼是高對比度顯示?

所謂高對比度是將當前頁面網頁的前景內容和背景的顏色對比調到最大,為弱視用戶能夠清晰地訪問網頁內容提供了幫助。

e)輔助線的作用是什麼?

本站提供的輔助線是橫豎兩條紅色的基准線,為視力障礙用戶校隊閱讀的位置提供了幫助。

f)界面控制功能包括哪些?

網站浏覽者可根據自己的需求自行調整網頁界面的大小,界面放大是將網站當前頁面顯示比例放大,界面放大後網頁內容也會隨之變大; 界面縮小:將網站當前頁面顯示比例縮小,界面縮小後網頁內容也會隨之變小。

網站建設采集技術標准。

  1. 采用有含義的html標簽。
  2. 快捷鍵設置
  3. WAI (Web Accessibility Initiative,網頁易讀性倡議)

1. 有意義的html標簽可以參考:

a)         使用 LABEL 對象

b)         對圖像使用alt屬性

c)         使用 TITLE 屬性

d)         表 3. DHTML 鍵盤事件

*以上標記-(它可以由屏幕閱讀軟件用來提供相同的“工具提示”信息)

2.  快捷鍵設置可以參考如下

提供了以下快捷鍵設置:

1)欄目跳轉的快捷鍵設置;

2)區域跳轉的快捷鍵設置;

3)無障礙輔助浏覽工具的快捷鍵設置;

4)語音驗證碼的快捷鍵設置;

1)欄目跳轉

a)欄目分組跳轉快捷鍵:IE6使用快捷鍵(Alt+Z);IE8及其它浏覽器使用快捷鍵(Ctrl+Z);

b)欄目分組逆向跳轉快捷鍵:IE6使用快捷鍵(Shift+ Alt+Z);IE8及其它浏覽器使用快捷鍵(Ctrl+Shift+Z);

2)區域跳轉

a)跳轉到主要內容區快捷鍵: IE6使用快捷鍵(Alt+C);IE8及其它浏覽器使用快捷鍵(Alt+Ctrl+C);

b)跳轉到正文區域的快捷鍵:IE6及其它浏覽器通用快捷鍵(Alt+C),跳轉到主要內容區域後,再使用Tab鍵或向下方向鍵閱讀內容;

c)跳轉到頂部導航區快捷鍵:IE6及其它浏覽器通用快捷鍵(Alt+K);

d)跳轉到中間內容區快捷鍵:IE6使用快捷鍵(Alt+M);IE8及其它浏覽器使用快捷鍵(Alt+Ctrl+Shift+M);

e)跳轉到左部內容區快捷鍵:IE6使用快捷鍵(Alt+L);IE8及其它浏覽器使用快捷鍵(Alt+Ctrl+Shift+L);

f)跳轉到右部內容區快捷鍵:IE6使用快捷鍵(Alt+R);IE8及其它浏覽器使用快捷鍵(Alt+Ctrl+Shift+R);

g)跳轉到底部內容區快捷鍵:IE6使用快捷鍵(Alt+B);IE8及其它浏覽器使用快捷鍵(Alt+Ctrl+Shift+B);

3)無障礙工具條

a)關閉和開啟工具條快捷鍵:IE6及其它浏覽器通用快捷鍵(Alt+J);

b)純文本模式開啟快捷鍵:IE6及其它浏覽器通用快捷鍵(Alt+Shift+J);

d)可視化模式返回快捷鍵:IE6及其它浏覽器通用快捷鍵(Alt+Ctrl+J),純文本模式開啟、返回快捷鍵不依賴於工具條的開啟狀態。

4)語音驗證碼

a)播放語音驗證密碼的快捷鍵(Alt+Q),當焦點移動到輸入驗證碼的文本框時,讀屏軟件會朗讀:請按快捷鍵(Alt+Q)播放語音驗證碼。此時按(Alt+Q)就會收聽到語音驗證碼信息。

3.    WAI(Web Accessibility Initiative,網頁易讀性倡議)是W3C標准的一個分支,主要的是對一些殘障人士訪問頁面提供一些便利,比如在頁面上體現出字體大小的縮放、頁面色彩對比度的增加,以及提供一些實時語音朗讀系統的接口。2008北京殘奧會官方網站在實現WAI標准方面做了充分的准備,這也方便了盲人通過各種浏覽器獲取奧運比賽信息。參考地址:http://baike.baidu.com/view/1543256.html

殘疾人浏覽器:

參考http://baike.baidu.com/view/1892958.html?fromTaglist

  1. EasyWeb浏覽器
  2. A-browser 、IAccessible2及系列盲人軟件
  3. Firefox(火狐浏覽器)

可訪問性方面的文章:可以點擊了解 淺談web標准、可用性、可訪問性

更多關於網站建設標准文章參考地址:

opera web標准課程
百度百科 web標准

國內針對殘疾人設計使用網站:

  1. beijing2008.cn北京2008年殘奧會-提供手語閱讀軟件:(如下截圖http://paralympic.beijing2008.cn/
  2. 2010亞殘奧運會官網-http://www.gzapg2010.cn(如下截圖) 殘疾人手語軟件

    殘疾人手語軟件

     

    殘疾人浏覽器工具條

    殘疾人浏覽器工具條

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