信息无障碍 - 改造指南
1??????? 引言
1.1????? 文檔目的
為相關承建單位改造某省網上辦事大廳信息無障礙信息建設提供改造指南,提高效率,使其改造符合WCAG2.0 A級、AA級標準,特編制此方案。
1.2????? 讀者對象
某省信息中心、某省網上辦事大廳承建單位等相關干系人。
1.3????? 參考文檔
《Web內容無障礙指南 (WCAG) 2.0》
《YD/T 1822-2012 網站設計無障礙評級測試方法》
?? 《YD/T 1890-2009信息無障礙輔助技術的要求和評測方法》
1.4????? 術語與縮寫解釋
WCAG2.0:Web內容無障礙指南2.0。
主廳:某省網上辦事大廳主廳平臺,包括全省統一的前臺服務門戶及后臺支撐系統,在本文檔特指服務門戶。
時基媒體:音頻和視頻。
2??????? 概述
為了體現政府提供公共服務的公平、公正、均等化的要求,保障弱勢群體獲得政府公眾服務的權利,我國政府近年一直致力于推動信息無障礙技術在各個領域的應用,先后制定《無障礙環境建設條例》、《網站設計無障礙技術要求》、《網站設計無障礙評級測試方法》等相關法規及行業標準。在建設服務型政府的大環境之下,信息無障礙服務成為政府主廳提高公眾服務水平、擴大公眾服務范圍的新亮點。
某省網上辦事大廳作為連接政府和社會公眾的重要橋梁,雖然可以從某省政府信息無障礙公共服務平臺訪問某省網上辦事大廳,但是某省網上辦事大廳站點本身不能滿足WCAG(Web內容無障礙指南)2.0定義的AA級別要求,直接影響了殘障人士和老年人獲取政府信息和服務的便捷程度;老年人和殘障人士直接訪問某省網上辦事大廳無法享受某省無障礙公共服務平臺提供的無障礙輔助工具幫助。
3??????? 總體要求
3.1????? 概述
以國際互聯網聯盟(W3C)制定的Web內容無障礙指南(WCAG)2.0以及中華人民共和國信息產業部發布的《網站設計無障礙技術要求》的相關標準為技術依據,參照國際通用的信息無障礙設計規范,編制網上辦事大廳信息無障礙建設指南。
要求從可感知性、可操作性、可理解性和兼容性等方面作出要求,包括確定網站可訪問性、無障礙輔助工具功能等要求,為主廳門戶、省直窗口和地市分廳實施信息無障礙建設提供技術參考。
3.2????? 適用某省網上辦事大廳信息無障礙改造的WCAG2.0 A,AA級條目
| 序號 | 標準原文 | 等級 | 參考問題 |
| 原則1:可感知性-信息和用戶界面組件必須以可感知的方式呈現給用戶。 | |||
| 準則1.1替代文本:為所有非文本內容提供替代文本,使其可以轉化為人們需要的其他形式,如大字體印刷,盲文,語音,符號或更簡單的語言。 | |||
| 1 | 1.1.1 非文本內容:為所有呈現給用戶的非文本內容都提供相同目的替代文本,以下情況例外: | A級 | 依賴屏幕閱讀器的用戶,需要依靠非文本內容的替代文本,來獲取非文本內容所傳遞的信息。 |
| 準則1.2時基媒體:為時基媒體提供替代。 | |||
| 說明:本主廳無多媒體相關功能 | |||
| 準則1.3適應性:創建可用不同方式呈現的內容(例如簡單的布局),而不會丟失信息或結構。 | |||
| 2 | 1.3.1 信息和關系: 通過呈現傳達的信息、結構和關系,可以編程式確定或在文本中得到。 | A級 | 存在使用布局和結構傳達的信息。 |
| 3 | 1.3.2 有含義的順序: 當呈現出來的內容其順序影響其含義,可以通過編程式確定其正確的閱讀順序。 | A級 | 錯誤的順序會嚴重影響鍵盤用戶的訪問。 |
| 4 | 1.3.3 感官特性: 用于理解內容和操作內容的指示,應該不完全依賴于組件的感官特性,如形狀、大小、視覺位置、方向、或聲音。 | A級 | 依賴某種感官的組件,將導致使用其他感官獲取信息的用戶無法獲取信息。如依靠視覺感官呈現的圖形驗證碼,依靠聽覺感官的用戶將無法獲取其信息。 |
| 準則1.4可辨別性:使用戶更容易看到和聽到內容,包括把背景和前景分開。 | |||
| 6 | 1.4.2 音頻控制:如果網頁音頻自動播放超過3秒鐘,提供一個機制用以暫停或停止音頻,或者控制獨立于全局系統音量的音頻音量。 | A級 | 超過3秒的音頻,如果未能提供停止和相關的控制機制,將使依靠聽覺獲取信息的用戶產生困擾。 |
| 7 | 1.4.3 對比度(最小): 文本的視覺呈現以及文本圖片至少要有4.5:1的對比度,以下部分除外: | AA級 | 對于文本呈現類主廳,此條很重要。 |
| 8 | 1.4.4 調整文本: 除了字幕和文本圖片外,文本大小不需要輔助技術就可以放大至200%,且沒有內容或功能損失。 | AA級 | 存在頁面放大,內容超出屏幕的情況。且沒有主內容文本字體放大機制。 |
| 9 | 1.4.5 文本圖片:如果正在使用的技術可以達到視覺效果,應使用文本傳達信息而不用文本圖片,以下部分除外: | AA級 | 存在使用文本圖片的情況,文本圖片放大會失真,視障用戶無法獲得文本圖片上的文本信息; |
| 原則2:可操作性-用戶界面組件和導航必須可操作。 | |||
| 準則2.1鍵盤可訪問:使所有功能都能通過鍵盤來操作 | |||
| 10 | 2.1.1 鍵盤: 內容的所有功能可通過鍵盤接口實現操作并且沒有對每次鍵擊做特定時限要求,除非底層功能是依賴用戶的移動路徑并且不做為端點的輸入方法。 | A級 | 政府類主廳應該支持鍵盤完全訪問; |
| 11 | 2.1.2 無鍵盤陷阱: 如果可使用鍵盤接口能將焦點到移動到某網頁組件上,那么可以只使用鍵盤接口操作也可以將焦點從當前組件移開,如果需要未修改的方向鍵或Tab鍵或其它標準退出方式以外的操作,要告知用戶離開焦點的方法。 | A級 | 鍵盤陷阱是很嚴重的無障礙問題,用戶無法使用鍵盤將焦點移出當前區域,導致不能訪問頁面中的其他內容,不應該存在于政府類主廳。 |
| 準則2.2充足的時間:為用戶提供足夠的時間用以閱讀和使用內容。 | |||
| 12 | 2.2.1 定時可調:對于由內容設置的每一個時間限制,以下部分至少有個一為真: | A級 | 應該給以用戶充足的時間進行操作,并給以延長時間的能力,過短的時間可能導致用戶無法完成操作,使用屏幕閱讀器的用戶以及神經、認知障礙的用戶,需要一定的時間進行操作。 |
| 13 | 2.2.2 暫停、停止、隱藏:對于運動、閃爍、滾動或自動更新的信息,以下部分全部為真: | A級 | 存在滾動內容,例如滾動banner。 |
| 準則2.3癲癇:不要設計會導致癲癇發作的內容。 | |||
| 14 | 2.3.1 閃光三次或低于閾值: 網頁不包含任何閃光超過3次/秒的內容,或閃光低于一般閃光和紅色閃光閾值。 | A級 | 由于任何不符合此成功標準的內容可干擾用戶使用整個頁面的能力,網頁上所有的內容(無論是否滿足其他成功標準)必須符合此成功標準。 |
| 準則2.4可導航性:提供幫助用戶導航、查找內容、并確定其位置的方法。 | |||
| 15 | 2.4.1 繞過模塊:提供一種機制以跳過在多個網頁中重復出現的內容模塊。 | A級 | 繞過模塊機制可加速鍵盤用戶訪問的速度,讓用戶快速了解頁面的布局。 |
| 16 | 2.4.2 網頁標題: 網頁提供標題,以描述主題或用途。 | A級 | 視障用戶使用鍵盤瀏覽網頁時,第一個聚焦的網頁元素就是其標題,視障用戶可以通過網頁標題了解該網頁的內容。 |
| 17 | 2.4.3 聚焦順序: 如果網頁可以順序導航,并且導航順序影響含義和操作,可聚焦的組件以保持其含義和可操作的順序接受聚焦。 | A級 | 錯誤的鍵盤tab順序會嚴重影響鍵盤用戶的訪問,給鍵盤用戶造成困擾。 |
| 18 | 2.4.4 鏈接目的(在上下文里): 每個鏈接目的的確定可通過:單獨的鏈接文本,或者是鏈接文本聯系其編程式確定的鏈接上下文。除非鏈接的目的也會困惑普通用戶。 | A級 | 鏈接應該提供其目的文本,使用戶可以清晰了解其目的導向。 |
| 19 | 2.4.5 多種方法:用一種以上的方法在網頁集里定位一個網頁,除非網頁是流程的結果或流程的某個步驟。 | AA級 | 多種方法定位可加快用戶的導航效率。 |
| 20 | 2.4.6 標題和標簽: 標題和標簽說明主題或目的。 | AA級 | 清晰的標題級別有利于用戶理解頁面內容,定位自己想要了解的內容。 |
| 21 | 2.4.7 焦點可見: 任何鍵盤可操作的用戶界面應有一套操作模式,在該模式里鍵盤焦點指示是可見的。 | AA級 | 對于不能使用鼠標的視覺鍵盤用戶,焦點可見,有利于用戶定位。 |
| 原則3:可理解性-信息和用戶界面操作必須是可理解的。 | |||
| 準則3.1可讀性:使文本內容可讀,可理解。 | |||
| 22 | 3.1.1 網頁語言: 每個網頁的默認人類語言可以編程式確定。 | A級 | 部分屏幕閱讀器使用網頁語言來指定讀屏播報內容所要使用的語言。 |
| 23 | 3.1.2 局部語言:內容里每個段落或短語的人類語言可以編程式確定,除了文本中專有名詞、術語、不確定語言的詞匯、已經融入到本地語言的詞語或短語。 | AA級 | 用戶瀏覽一個網頁一般在同一個語言環境下。 |
| 準則3.2 可預測性:讓網頁以可預見的方式呈現和操作。 | |||
| 24 | 3.2.1 焦點:當任何用戶界面組件接收焦點時,不會引起上下文變化。 | A級 | 聚焦即可觸發行為,視障用戶在沒有感知當前元素的情況就觸發操作,會給用戶造成困擾,不利于用戶理解頁面內容。 |
| 25 | 3.2.2 輸入:更改任何用戶界面組件設置不會自動導致上下文變化,除非用戶使用組件前已被告知該行為。 | A級 | 會引起上下文變化的組件,需要提前告知用戶變化結果,否則,用戶將會對上下文的變化困惑。 |
| 26 | 3.2.3 一致性導航: 對于在網頁集里多個網頁中重復出現的導航機制,每次出現時都應保持同樣的相對順序,除非是由用戶引起的順序變化。 | AA級 | 一致性的導航能幫助用戶快速導航布局相似的頁面。 |
| 27 | 3.2.4 一致性標識: 網頁集集里相同功能的組件可被一致性標識。 | AA級 | 一致性標識有助于用戶更快理解用戶界面,根據經驗找到自己想要的內容。 |
| 準則3.3輔助輸入:幫助用戶避免和糾正錯誤。 | |||
| 28 | 3.3.1 錯誤標識: 如果輸入錯誤能夠被自動發現,錯誤類型應能被標識,并且用文本描述給用戶。 | A級 | 此條常用于填寫表單時,輸入錯誤不能只標識出現了錯誤,還要告訴用戶出現了那種錯誤。有利于用戶自己獨立完成表單,改正輸入。 |
| 29 | 3.3.2 標簽或說明: 當需要用戶輸入內容時,要給出標簽或說明。 | A級 | 給出用戶要輸入內容的說明和格式是非常有必要的,能夠幫助用戶快速完成表單。 |
| 30 | 3.3.3 錯誤建議: 如果輸入錯誤能夠被自動發現,且修改建議已知,則提供建議給用戶,除非它會危及安全或影響內容目的。 | AA級 | 用戶輸入錯誤時,給出合適的建議,能加快用戶的填寫速度,例如,注冊時,用戶輸入的用戶名不正確,根據已輸入的用戶名衍生出正確的用戶名。 |
| 31 | 3.3.4 錯誤預防(法律、金融、數據): 對于用戶操作將引起法律承諾或者金融交易的網頁、修改或刪除數據存儲系統里的用戶可控數據的網頁、提交用戶測試響應的網頁等 ,對于這些網頁,以下部分至少有一為真:檢查: 用戶輸入的數據將被檢查是否有輸入錯誤,并為用戶提供一個改正錯誤的機會。 | AA級 | 用戶在提交有關法律金融的信息時,需要請求用戶的確認,防止用戶輸入錯誤,造成不可逆的后果。 |
| 原則4:魯棒性-內容必須健壯到可信地被種類繁多的用戶代理(包括輔助技術)所解釋。 | |||
| 準則4.1兼容:最大化兼容當前和未來的用戶代理(包括輔助技術)。 | |||
| 32 | 4.1.1 解析:使用標記語言實現的內容,元素要有完整的開始和結束標簽,元素根據其規格進行嵌套,元素不包含重復的屬性,任何ID都是唯一的,除非規范允許這些特性。 | A級 | 代碼書寫規范,有助于輔助技術對于頁面內容的解析。不規范的代碼,可能會對輔助技術解析內容的能力造成影響,甚至無法解析。 |
| 33 | 4.1.2 名稱,角色,值:對于所有用戶界面組件(包括但不限于:表單元素,鏈接和由腳本生成的組件),名稱和角色可以編程式確定; 可由用戶設置的狀態、屬性和值可以編程式設置,這些變化通知對用戶代理(包括輔助技術)有效。 | A級 | 對于組件,應該明確提供其名稱、角色、狀態、值等信息,這對于使用屏幕閱讀器的用戶非常重要,他們根據這些信息來判斷如何與組件進行交互,缺少這些信息,將使用戶產生困擾。 |
?
4??????? 主廳信息無障礙改造指南
4.1????? 改造指南細則
| WCAG2.0 | 說明 | 等級 | 備注 |
| 1.1.1. 非文本內容 | Image 1:圖片必須有替代文本; | A | 參考改造樣例4.2.2 |
| Image 2:替代文本應傳遞正確的圖片內容與目的; | |||
| Image 3:替代文本應不包含文件名稱; | |||
| Image 4:替代文本應不超過100個英文字符; | |||
| Image 5:裝飾性圖片應能被輔助技術忽略; | |||
| Image 6:復雜圖像需有對應的長文本進行詳細描述; | |||
| Image 7:使用MathML(數學標記語言)表示數學公式。 | |||
| 1.3.1. 信息和關系 | Heading 5:標題必須有合理嵌套; | A | 改造參考案例:中國殘疾人聯合會官網 |
| Heading 6:標題必須有可視化的文本內容; | |||
| Heading 7:內容信息(contentinfo)、補充內容(complementary)、表單(form)、導航(navigation)或搜索欄(search)路標區塊內的第一個標題需為h2元素; | |||
| Heading 8:在路標區塊內的標題必須合理嵌套; | |||
| Landmark 2:所有內容區塊必須被路標標識; | |||
| Landmark 8:橫幅(banner)必須是最高級別的路標; | |||
| Landmark 9:橫幅(banner)路標區塊內只可包括導航(navigation)路標、區域(region)路標和搜索欄(search)路標; | |||
| Landmark 10:導航(navigation)路標區塊內只能包含區域(region)或搜索欄(search)路標; | |||
| Landmark 11:主內容(main)必須是最高級別的路標; | |||
| Landmark 12:內容信息(contentinfo)路標必須是最高級別的路標; | |||
| Landmark 13:補充內容(complementary)必須是最高級別的路標; | |||
| Landmark 14:搜索欄(search)路標區塊內只能包含區域(region)路標; | |||
| Landmark 15:表單(form)路標區塊內只能包含區域(region)路標; | |||
| Landmark 16:區域(region)路標必須有可訪問的名稱; | |||
| Landmark 17:路標必需具有唯一的標識; | |||
| Landmark 18:路標必須正確標示內容區域; | |||
| List 1:列表必須使用對應的語義標記; | |||
| Role 1:只有在特殊情況下才能改寫主內容(main)路標中的主內容(main)元素的默認角色(role); | |||
| Role 2:主體(body)元素只能定義角色值為文檔(document)(默認的)或應用(application); | |||
| Role 4:文章(article)元素只能定義角色值為區域(region)、文章(article)(默認的)、主內容(main)、文檔(document)或應用(application); | |||
| Role 5:章節(section)元素只能定義角色值為警告(alert)、警告對話框(alertdialog)、應用(application)、內容信息(contentinfo)、對話框(dialog)、文檔(document)、日志(log)、主內容(main)、跑馬燈(marquee)、展示信息(presentation)、區域(region)、搜索欄(search)或狀態欄(status); | |||
| Role 6:只有在特殊情況下才能改寫導航(nav)的默認角色(role); | |||
| Role 7:側邊欄(aside)元素只能定義角色值為補充內容(complementary)(默認的)、注釋(note)、區域(region)、搜索欄(search)或展示信息(presentation); | |||
| Role 8:只有在特殊情況下才可以改寫橫幅(banner)路標中的頁頭(header)元素的默認角色(role); | |||
| Role 9:只有在特殊情況下才可以改寫內容信息(contentinfo)路標中的頁腳(footer)元素的默認角色(role); | |||
| Role 10:只有在特殊情況下才能改寫標題(heading)中的標題(h1-h6)元素的默認角色(role); | |||
| Table 1:數據表中的單元格必須有對應的表頭; | |||
| Table 3:數據表必須有內容描述; | |||
| Table 4:一個頁面中的數據表必須有唯一的名稱; | |||
| Table 5:表格需標識為數據表或布局表; | |||
| Table 6:表頭必須使用th元素; | |||
| Table 7:復雜表格中的單元格,必須使用表頭(headers)屬性標記與其相關聯的表頭; | |||
| Table 8:數據表的名稱必須與數據表的描述不同。 | |||
| 1.3.2. 有含義的順序 | Layout 1:布局表必須有有意義的順序; | A | 參考改造樣例4.2.3 |
| Layout 2:布局表不能相互嵌套; | |||
| Order 1:通過CSS確定元素位置,使呈現內容具有有意義的閱讀順序。 | |||
| 1.3.3. 感官特性 | Sensory 1:用于理解和操作的內容,應該不完全依賴于形狀、大小、視覺位置、方向、或聲音。 | A |
|
| 1.4.1. 顏色用途 | Color 2:顏色不能是傳遞信息的唯一途徑。 | A | 參考改造樣例4.2.3 |
| 1.4.2. 音頻控制 | Audio 4:當頁面加載時音頻會自動播放超過3秒鐘,提供一個機制用以暫停或停止音頻 | A | 改造不涉及 |
| 1.4.3. 對比度(最小) | Color 1:任意大小的文本內容必須有最少4.5:1的對比度,若為大文本或黑體字,則最少有3:1的對比度。 | AA | 改造參考案例:福田政府在線 |
| 1.4.4. 調整文本 | Resize 1:當調整頁面大小時,文本內容需自適應頁面大小并保證所有內容均可見。 | AA | 改造參考案例:某省人民政府政務公開 |
| 1.4.5. 文本圖像 | 無 | AA |
|
| 2.1.1. 鍵盤 | Keyboard 1:組件元素必須響應鍵盤事件。 | A | 改造參考案例:HHS官網 |
| Keyboard 2:所有可交互元素的功能必須通過鍵盤接口實現操作; | |||
| 2.1.2. 無鍵盤陷阱 | Keyboard 3:對象(object)和小程序(applet)元素不能限制鍵盤焦點離開。 | A | 改造參考案例:北京市網上政務服務大廳 |
| 2.2.1 定時可調 | Timing 1:有時間限制的可交互或可瀏覽的內容需給用戶提供一個方法來關閉、調整或延長時間限制。 | A | 改造參考案例:福田政府在線 |
| 2.2.2. 暫停、停止、隱藏 | Timing 2:對于自動開始并持續五秒以上的運動、閃爍、滾動或自動更新的內容,需提供一種機制來暫停、停止或隱藏。 | A | 改造無涉及 |
| 2.3.1. 閃光三次或低于閾值 | HTML 2:替換跑馬燈(marquee)元素; | A | 改造無涉及 |
| Timing 3:網頁不包含任何閃光超過3次/秒的內容,除非閃光低于一般閃光和紅色閃光閾值。 | |||
| 2.4.1. 繞過模塊 | Bypass 1:提供一個機制來跳過內容模塊; | A | 改造參考案例:中國殘疾人聯合會新聞詳細頁 |
| Frame 1:框架(frame)元素需有可訪問的名稱; | |||
| Frame 2:內框架(iframe)元素需有可訪問的名稱; | |||
| Heading 1:頁面必須最少有一個h1元素; | |||
| Landmark 1:頁面必須最少有一個主內容(main)路標。 | |||
| Landmark 3:頁面必須最少有一個導航(navigation)路標; | |||
| Landmark 4:網站的品牌內容需用橫幅(banner)路標進行標識; | |||
| Landmark 5:每個頁面最多只能有一個橫幅(banner)路標; | |||
| Landmark 6:網站的管理信息需用內容信息(contentinfo)路標進行標識; | |||
| Landmark 7:每個頁面最多只能有一個內容信息(contentinfo)路標。 | |||
| 2.4.2. 網頁標題 | Title 1:標題(title)元素需標識網站和頁面內容。 | A | 改造參考案例:中國殘疾人聯合會官網 |
| 2.4.3. 聚焦順序 | Focus 1:焦點順序必須有意義。 | A | 參考改造樣例4.2.7 |
| 2.4.4. 鏈接目的(在上下文里) | Link 1:鏈接文本必須描述出鏈接目的; | A | 參考改造樣例4.2.5 |
| Link 2:不同的鏈接需有其唯一的鏈接文本。 | |||
| 2.4.5. 多種方法 | Navigation 1:提供至少兩種方法來定位網頁。 | AA | 改造參考案例:中國殘疾人聯合會官網 |
| 2.4.6. 標題和標簽 | Control 10:標簽必須是唯一的; | AA | 參考改造樣例4.2.4 |
| Control 11:每個提交(submit)和重置(reset)按鈕需有唯一的標簽; | |||
| Heading 2:h1元素必須在主內容(main)或橫幅(banner)路標中; | |||
| Heading 3:同級的標題元素需有唯一的可訪問名稱; | |||
| List 2:在適當的時候提供一個標簽用以描述列表內容或目的; | |||
| Table 2:數據表必須有一個標識表格目的的可訪問名稱; | |||
| Widget 12:組件角色元素標簽需充分描述其目的; | |||
| 2.4.7. 焦點可見 | Focus 2:鍵盤焦點是可見的。 | AA | 改造參考案例:某省人民政府政官網 |
| 3.1.1. 網頁語言 | Language 1:網頁必須使用有效的IANA語言碼。 | A | 改造參考案例4.2.1 |
| 3.1.2. 局部語言 | Language 2:與頁面主要語言不同的文本內容需使用有效的語言(lang)屬性來標記。 | AA | 改造參考案例:中國殘疾人聯合會官網 |
| 3.2.1. 焦點 | Focus 3:目標焦點需在當前內容窗口中; | A | |
| Focus 4:選擇(select)元素不會自動引起上下文變化。 | |||
| 3.2.2. 輸入 | Focus 5:使用輸入(input)或其他表單操作按鈕來提交表單。 | A | 參考改造樣例4.2.4 |
| 3.2.3. 一致性導航 | Navigation 2:網站所有頁面有一致的路標順序; | AA | 改造參考案例:中國殘疾人聯合會官網 |
| Navigation 3:網站所有頁面中用于標記重復出現的頁面章節的h1和h2元素通常有一致的順序。 | |||
| 3.2.4. 一致性標識 | Navigation 4:網站所有頁面中的路標具有一致性標示; | AA | 改造參考案例:中國殘疾人聯合會官網 |
| Navigation 5:網站所有頁面中用于標識重復出現的頁面章節的h1和h2元素通常有一致的可訪問名稱。 | |||
| 3.3.1. 錯誤標識 | Error 1:無效的表單控件必須向輔助技術提供其無效值信息。 | A |
|
| 3.3.2. 標簽或說明 | Control 1:表單控件必須有標簽; | A | 改造參考案例:HHS官網 |
| Control 2:圖像按鈕必須有非空的alt或title屬性; | |||
| Control 3:一組單選按鈕必須有一個分類標簽; | |||
| Control 4:按鈕(button)元素必須有文本內容; | |||
| Control 6:使用for屬性的每個標簽(label)元素應引用對應的表單控件; | |||
| Control 7:每個標簽(label)和圖例(legend)元素必須包含文本內容; | |||
| Control 8:每個域集(fieldset)元素有且只有一個圖例(legend)元素; | |||
| Control 9:判斷title屬性是否為合適的表單控件標簽。 | |||
| 3.3.3. 錯誤建議 | Error 2:使用require或aria-required屬性標記必填的表單控件; | AA | 改造參考案例:萍果官網注冊頁面 |
| Error 3:使用aria-required屬性標記必填的組件; | |||
| Error 4:當輸出錯誤可被自動發現并且修改建議已知,應向用戶提供修改建議(部分例外); | |||
| 3.3.4. 錯誤預防(法律、金融、數據) | Error 5:當輸入內容包括法律承諾或金融交易時,必須在最終提交前向用戶提供后退、檢查和確認數據的機制。 | AA | 改造參考案例:萍果官網注冊頁面 |
| 4.1.1. 解析 | Control 5:頁面中所有id屬性必須是唯一的 | A | 參考改造樣例4.2.10 |
| HTML 1:應替換頁面中的b和i元素。 | |||
| 4.1.2. 名稱,角色,值 | Role 3:ol和ul元素的角色值應為成組項目角色,例如:目錄(directory)、列表框(listbox)、菜單(menu)、菜單欄(menubar)、展示信息(presentation)、選項卡列表(tablist)、工具欄(toolbar)或樹視圖(tree); | A | 改造參考案例:中國殘疾人聯合會官網 |
| Role 11:li元素的角色值應為成組項目角色,如:列表項(listitem)(默認的)、菜單項(menuitem)、復選菜單項(menuitemcheckbox)、單選菜單項(menuitemradio)、對象(option)、選項卡(tab)、樹視圖項目(treeitem)或展示信息(presentation); | |||
| Role 12:a[href]元素的角色值可以為鏈接(link)(默認的)、按鈕(button)、復選框(checkbox)、菜單項(menuitem)、復選菜單項(menuitemcheckbox)、單選菜單項(menuitemradio)、對象(option)、選項卡(tab)、開關(switch)或樹視圖項目(treeitem); | |||
| Widget 1:組件必須有標簽; | |||
| Widget 2:響應點擊(onClick)事件的元素必;須有組件角色和鍵盤焦點,或是一個鏈接或按鈕; | |||
| Widget 3:角色(role)屬性值必須是有效的; | |||
| Widget 4:ARIA屬性和狀態值必須是有效的; | |||
| Widget 5:使用已有的ARIA屬性和狀態; | |||
| Widget 6:組件應標識出所需的屬性和狀態; | |||
| Widget 7:組件應有所需的子角色; | |||
| Widget 8:組件應有所需的父角色; | |||
| Widget 9:組件應只有一個父組件; | |||
| Widget 10:范圍組件必須在最小值和最大值之間有對應的值; | |||
| Widget 11:響應鍵盤、鼠標或拖拽事件的元素必須有組件角色或可交互的元素。 |
?
5??????? 無障礙改造標簽庫
5.1????? 關于頁面頭部必須包括內容
5.2????? ?關于圖片 Image標簽
5.3????? 關于表格 Table標簽
5.4????? 關于表單控件元素
5.5????? 關于鏈接 a 標簽
5.6????? 關于多媒體對象 Object 標簽
5.7????? 關于tabindex 屬性與獲取焦點的順序
5.8????? 關于焦點與鍵盤
5.9????? 關于菜單和導航
5.10?? 關于文本樣式
5.11?? 關于accesskey屬性
5.12?? 關于顏色
5.13?? 關于隱藏的內容
5.14?? 新特性-ARIA
6??????? 無障礙輔助工具
依據國家通信行業標準《網站設計無障礙技術要求》參照國際通用網站無障礙設計規范,在“十二五”規劃期間內,使“1+3”政府網站無障礙改造基本達到一級及部分二級標準,即:網站具備操作引導提示、圖片信息替代文字、鏈接內容有完整的可理解提示等無障礙特征,實現用鍵盤操作可以完成網站內容訪問的基本無障礙目標,盲人借助“讀屏軟件”等輔助工具可順利瀏覽網站信息,弱視人群借助站內無障礙輔助工具,可以對文字(界面)大小、對比度、灰度等進行調整以滿足其瀏覽需求。促進門戶網站信息交流無障礙。
6.1????? 建設任務
1.根據無障礙網站所面向的不同用戶群體,從無障礙網站設計規范及技術規范的層面,完成對現有政府網站所有頁面的基礎性改造分析工作。
2. 在不影響網頁美觀、結構、相關功能的前提下,以面向不同用戶群體所達到的功能為出發點,由簡單到復雜,通過Javacript等腳本語言的編寫,實現對網站基礎性的技術改造,達到無障礙網站建設中等級1的要求。
?3. 根據規范要求設計無障礙網站頻道,更進一步的滿足不同用戶群體對無障礙網站的功能需求,達到無障礙網站建設中部分等級2的要求。
?4.以實現無障礙網站建設中部分等級3的要求為目標,借助社會各界資源,將手語等與網站功能的有機結合,為殘疾人士提供更佳人性化的網站服務,使無障礙網站建設達到一個更高的水平。
6.2????? 總體架構
6.2.1??????? 功能全景圖
6.3????? 服務對象分類
6.3.1??????? 針對正常人的策略
6.3.2??????? 針對外國人的策略?
6.3.3??????? 針對兒童的策略
6.3.4??????? 針對老年人的策略
6.3.5??????? 針對色盲人士的策略
?
6.3.6??????? 針對視力障礙人士的策略
?
6.3.7??????? 針對肢體殘疾人的策略
?
?
6.4????? 網站無障礙輔助瀏覽
在網站首頁提供了關閉和開啟無障礙網站瀏覽輔助工具的快捷鍵,而且在
網站首頁頂部導航欄內,設有“無障礙輔助瀏覽”按鈕,也可通過點擊該按鈕開啟或關閉無障礙網站瀏覽輔助工具。網站瀏覽者可根據自己的需求自行調整網頁界面的大小,界面放大是將網站當前頁面顯示比例放大,界面放大后網頁內容也會隨之變大;界面縮小:將網站當前頁面顯示比例縮小,界面縮小后網頁內容也會隨之變小。主要提供以下功能:
a)提供開啟、關閉無障礙網站瀏覽輔助工具的功能;
b)提供無障礙純文本轉換模式;
c)提供文字大小控制功能;
d)提供高對比度顯示功能;
e)提供輔助線輔助功能;
f)提供界面控制功能。
6.4.1??????? 純文本模式
?
6.4.2??????? 網頁圖文放大縮小
?
6.4.3??????? 高對比閱讀配色器
??
6.4.4??????? 閱讀輔助十字光標
?
6.5????? 無障礙語音導航
?
???
6.5.1??????? 網站智能語音朗讀
?
?
6.5.2??????? 盲人語音導航版網站
??
6.6????? 無障礙工具部署
?
7??????? 開通殘疾人專欄
從某省網上辦事大廳中政務公開、個人事項,選擇與殘疾人比較關心的板塊,建立專門的導航通道,通過調用語音引擎和內容快捷鍵的設計,以語音導讀加快捷操作的方式實現殘疾人專欄的內容導讀,方便殘障人士檢索和辦理業務。
殘疾人專欄的開通將以一個獨立的模塊進行設計與開通,其內容將來調用現在網站中與殘疾人相關的業務內容,但不會影響現在網站的內容布局。
7.1????? 個人事項
按服務部分類,先做某省殘疾人聯合會現有服務項目中省級服務項,如下所示。
7.1.1??????? 康復醫療
?
7.1.2??????? 殘疾證申辦
?
?
8??????? 對接某省信息無障礙公共服務平臺
某省信息無障礙公共服務平臺:http://wza.xxx.com/,采用的無障礙工具與我公司采用的技術類似。用戶通過信息無障礙公共服務平臺從某省政府門戶網站跳轉到某省網上辦事大廳,某省信息無障礙公共服務平臺的無障礙輔助工具默認是開啟,這就需要某省網上辦事大廳無障礙輔助工具默認處于關閉狀態;當用戶直接訪問某省網上辦事大廳,沒有了某省信息無障礙公共服務平臺的支持,就需要手動開啟某省網上辦事大廳的無障礙輔助工具。
對接策略:某省網上辦事大廳主廳經過信息無障礙規則標準改造后,將與某省信息無障礙公共服務平臺進行對接,配置入口連接,接入某省信息無障礙公共服務對原網站進行解析識別,承建商需重新做個首頁,修改某省網上辦事大廳已有鏈接。相當于兩個首頁,一個對接某省信息無障礙公共服務平臺,一個作為網上辦事大廳入口。
8.1????? 某省信息無障礙公共服務平臺無障礙版本和功能
某省信息無障礙公共服務平臺主要實現了以下無障礙版本和功能:
8.1.1??????? 讀屏專用版
?
8.1.2??????? 輔助瀏覽版
????????
8.1.3??????? 語音導航版
太陽灣 - 信息無障礙公共服務平臺 http://wza.rrbay.com?
?
總結
以上是生活随笔為你收集整理的信息无障碍 - 改造指南的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 做VC投资,你看我还有机会吗?-常垒季度
- 下一篇: 支付宝开放平台入驻流程及失败解决