HTML5+CSS3網頁設計與制作制作響應式網頁能夠在學習的Web內容無障礙指南（WCAG）知識和可訪問的互聯網應用（ARIA）基礎上，對D清單頁面進行無障礙改造；能夠根據網可訪問的互聯網應用（ARIA）提示的網頁輔助瀏覽方法，對D清單頁面進行無障礙測試。任務目標

對頁面進行無障礙改造本次任務要求學習Web內容無障礙指南（WCAG）知識，對頁面進行無障礙改造并測試。任務描述

對頁面進行無障礙改造完成對頁面進行無障礙改造，并對改造后的頁面進行測試，需要：學習WCAG2.0/2.1知識；學習可訪問的互聯網應用（ARIA）及其最佳實踐方法；對D清單進行無障礙改造，并模擬障礙人士進行無障礙頁面測試。任務分析

對頁面進行無障礙改造知識與技能準備Web內容可訪問性指南（WCAG）2.1定義了如何使殘障人士更容易訪問Web內容。無障礙獲取涉及廣泛的殘疾，包括視覺，聽覺，身體，言語，認知，語言，學習和神經障礙。盡管這些準則涵蓋了廣泛的問題，但它們無法滿足所有類型，程度和殘障人士的需求。這些準則還使年齡較大的人更容易使用Web內容，但隨著年齡的增長其能力會發生變化，并且通常會提高用戶的可用性。WCAG2.1是通過W3C流程與世界各地的個人和組織合作開發的，目的是為Web內容可訪問性提供共享的標準，以滿足國際上個人，組織和政府的需求。WCAG2.1建立在WCAG2.0[WCAG20]的基礎上，而WCAG2.0[WCAG20]又建立在WCAG1.0[WAI-WEBCONTENT]的基礎上，旨在現在和將來廣泛應用于不同的Web技術，并且可以結合自動化測試和人工測試評價。有關WCAG的介紹，請參閱《Web內容可訪問性指南（WCAG）概述》。1、WCAG知識與技能準備ARIA是“AccessibleRichInternetApplications”的縮寫。它是W3C的Web無障礙推進組織(WebAccessibilityInitiative/WAI)在2014年3月20日發布的可訪問富互聯網應用實現指南，是一個為殘疾人士等提供無障礙訪問動態、可交互Web內容的技術規范，是對Web內容無障礙指南（WCAG）的有效補充，是具體的技術指標。ARIA提供了語義，因此作者可以將用戶界面行為和結構信息傳達給輔助技術（例如屏幕閱讀器）。ARIA規范提供了定義可訪問用戶界面元素的角色，狀態和屬性的本體。ARIA套件包括提供用戶代理實施指南的API映射規范。它還包括圖形和數字出版模塊。2、WAI-ARIA知識與技能準備2.1ARIA使用方法應用于HTML的ARIA包括“role”（角色）和帶“aria-”前綴的屬性。role標識了一個元素的作用，aria-屬性描述了與之有關的事物特征及其是什么樣的狀態。2.2ARIA的角色定義“role”下表列出了HTML元素中常用的ARIA角色role。2、WAI-ARIA知識與技能準備2、WAI-ARIA表1-22-1role角色定義知識與技能準備在使用時，只需在HTML代碼中加入role即可定義HTML的角色。表1-22-1中并沒用列出所用的ARIA角色，表1-22-2列出了常用標簽元素對應的ARIA的role。當然，并不是使用的HTML元素都具有對應的ARIA的role。在不同的情況下HTML的ARIA角色也是不一樣的，如a標簽不帶href屬性就不具有link角色，當a標簽父元素是一個菜單時，其角色為menuitem；又如input表單標簽，其角色取決于其type屬性，type屬性設置為checkbox，這角色為checkbox，如果其父元素是一個菜單時則為menuitemcheckbox；屬性為button、image、reset、submit，角色為button，屬性為text，角色為textbox。2、WAI-ARIA12345<!--定義一個彈出框--><divclass=”modal”role=”dialog”><h1>彈出框標題</h1><p>彈出框的內容</p></div>知識與技能準備2.3ARIA的屬性和狀態“aria-”表1-22-3ARIA屬性值示意及說明表限于篇幅，需要了解更多ARIA的屬性值，可通過

頁面查看。在使用時，只需根據需求在HTML代碼中加入aria-屬性即可。知識與技能準備2.3ARIA的屬性和狀態“aria-”示例1：（在示例1中，工具欄的第一個控件（id為button1）是能夠獲取焦點的控件。）12345<divrole="toolbar"tabindex="0"aria-activedescendant="button1"><imgsrc="btncut.png"id="button1"role="button"alt="cut"/><imgsrc="btncopy.png"id="button2"role="button"alt="copy"/><imgsrc="btnpaste.png"id="button3"role="button"alt="paste"/></div>示例2：（在示例2中，aria-用在progressbar組件上，對應HTML5中的min。）12<divclass="progress-bar"role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"></div>示例3：（在示例3中，表示按鈕已經按下，同時處于禁用狀態。。）1<divrole="button"tabindex="0"aria-pressed="false"aria-disabled="false"></div>知識與技能準備2.3ARIA的屬性和狀態“aria-”表1-22-4ARIA狀態值示意及說明表知識與技能準備開發一個可訪問的Web應用不僅需要工具的支持，瀏覽器的支持，還需要開發人員遵循一定的規范提供對應的元素信息，才能達到最終的目的。下面著重介紹一些開發中的最佳實踐。3.1image圖片或者動畫均需提供alt信息，使得讀屏軟件可以將圖片動畫的內容清楚的讀出來。對于某些用于裝飾性的圖片，則需設置alt為空，使得讀屏軟件可以忽略此元素。對于放在鏈接里面的圖片，如果已經有文字的說明，alt也設置為空，這樣避免讀屏軟件重復同樣的內容。CSS將樣式跟結構分離，使得HTML代碼結構清晰。很多裝飾性的圖片也都放在CSS里面來加載，帶來的一個問題就是在CSS里面的圖片在高對比度模式下都無法顯示。如果這個圖片并不僅僅是裝飾性的，還可以觸發功能，那就需要從CSS里面拿出來，當成一個獨立的img或者input元素。3、開發最佳實踐知識與技能準備3.2tableTable分為兩類：一類是做布局的table，一類是數據table。對于布局用的table，讀屏軟件沒必要知道這是一個表，可以通過設置role=presentation使讀屏軟件忽略這個表，只關注里面的內容。對于數據表格，則需要設置caption屬性，說明整個表是用來做什么的，使得讀屏軟件可以告訴用戶這個表的作用。對于每一個單元內的數據，還應該通過th屬性使得讀屏軟件能識別這個數據的表頭是什么。對于復雜表，可以通過id和header屬性來標識。如圖所示：3、開發最佳實踐知識與技能準備以第一行的數字5為例，正常人可以很容易得看出5指的是一年級Mr.Henry老師這個班的男生有5個，但當讀屏軟件面對這個數字5的時候，怎么能識別出來呢？通過header來標識表頭，header的值就指向對應表頭的id。3.3formform元素需要關聯一個label元素，所有的button都已經有了一個隱含的label，所以不再需要顯示關聯。對于input，select，checkbox，radio，button則都需要顯示一個label元素。這樣讀屏軟件在面對這個表單元素的時候才能告訴用戶這個表單的作用。例如下面的input，讀屏軟件會告訴用戶這個是需要輸入名字的一個輸入框。當label屬性不方便使用的時候，還可以通過title屬性達到相同的效果，也可以滿足Webking檢查的需要。下面的兩種寫法都可以。但前提是name不需要被顯示出來。當title和label都設置的時候title會被讀屏軟件忽略。3、開發最佳實踐知識與技能準備當一個表單元素如果前后都需要描述的時候，label就顯得力不從心了。ARIA規范的出現解決了這一問題。aria-labelledby屬性可以設置多個值，說明這個表單元素是被那些值所描述的,aria-describedby屬性則更詳細的擴展了這個描述。當讀屏軟件把焦點放在10上的時候，會告訴用戶10表示的是10分鐘刷新一次。對應的HTML代碼如下所示。aria-required的屬性標識這個元素是必須的，JAWS識別此元素并告知用戶必須輸入此元素。我們可以看到中間的input元素被多個元素來描述（aria-labelledby中的幾個id值），這樣讀屏軟件就能夠識別這個標簽，并且按照這個標簽的順序讀出前后的label，并且提示用戶如果還有更詳細的描述以及如何獲取這個更詳細的描述。當用戶需要時，aria-describedby所對應的元素信息就會被讀出來。增強了視力有障礙人士與普通人了解內容的一致性。3、開發最佳實踐知識與技能準備3.4關于Tabindex與獲取焦點的順序Tabindex屬性的使用可以使得原本無法取得焦點的元素獲取焦點。目的是為了使用戶可以用鍵盤訪問任何可以用鼠標訪問的元素。我們知道，使用Tab鍵可以按文檔順序tab到所有可以獲取焦點的元素。tabindex可以設置為-1，0或者是任何自然數。tabindex=0就使原本無法獲取焦點的元素可以在用戶tab的時候獲取焦點，并且按照文檔順序排列。tabindex=-1使得元素可以獲取焦點，但當用戶用tab鍵訪問的時候并不出現在tab的列表里面。可以方便的通過Javascript設置上下左右鍵的響應事件。非常有利于應用小部件（widget）內部的鍵盤訪問。tabindex設置為大于0的數字則可以控制用戶Tab時候的順序，一般很少用。當用戶使用Tab鍵瀏覽頁面時，元素獲取焦點的順序是按照HTML代碼里面元素出現的順序排列的，有時跟實際看到的頁面順序并不一致。3、開發最佳實踐知識與技能準備3.5Label3.6AlertDialog3.7headings3.8list/listitem3.9button3.10togglebutton3.11checkbox3.12radio3.13link限于篇幅限制，以上實現方法代碼詳見書本，其它實現方法就不在介紹，如果感興趣，可以查看

或

了解。3、開發最佳實踐知識與技能準備信息無障礙網頁的測試主要是模擬相關人群去測試頁面。相關人群使用的無障礙輔助技術（硬件或軟件）主要是：依靠用戶代理提供的服務來檢索和呈現Web內容。通過使用API??與用戶代理或Web內容本身協同工作。提供超出用戶代理提供的服務，以方便用戶與殘疾人的網頁內容交互。該定義可能與其他文檔中使用的定義不同。如：屏幕放大鏡，用于放大和提高渲染文本和圖像的視覺可讀性；屏幕閱讀器，最常用于通過合成語音或可刷新盲文顯示來傳達信息；文本到語音軟件，用于將文本轉換為合成語音；語音識別軟件，用于允許口語控制和口授；用于模擬鍵盤的備用輸入技術（包括頭指針，屏幕鍵盤，單開