HTML5+CSS3網(wǎng)頁設(shè)計與制作課件：對頁面進(jìn)行無障礙改造

HTML5+CSS3網(wǎng)頁設(shè)計與制作制作響應(yīng)式網(wǎng)頁能夠在學(xué)習(xí)的Web內(nèi)容無障礙指南（WCAG）知識和可訪問的互聯(lián)網(wǎng)應(yīng)用（ARIA）基礎(chǔ)上，對D清單頁面進(jìn)行無障礙改造；能夠根據(jù)網(wǎng)可訪問的互聯(lián)網(wǎng)應(yīng)用（ARIA）提示的網(wǎng)頁輔助瀏覽方法，對D清單頁面進(jìn)行無障礙測試。任務(wù)目標(biāo)

對頁面進(jìn)行無障礙改造本次任務(wù)要求學(xué)習(xí)Web內(nèi)容無障礙指南（WCAG）知識，對頁面進(jìn)行無障礙改造并測試。任務(wù)描述

對頁面進(jìn)行無障礙改造完成對頁面進(jìn)行無障礙改造，并對改造后的頁面進(jìn)行測試，需要：學(xué)習(xí)WCAG2.0/2.1知識；學(xué)習(xí)可訪問的互聯(lián)網(wǎng)應(yīng)用（ARIA）及其最佳實踐方法；對D清單進(jìn)行無障礙改造，并模擬障礙人士進(jìn)行無障礙頁面測試。任務(wù)分析

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

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

或

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