制作響應式網頁能表述響應式網頁設計的相關概念；能說明CSS媒體查詢在響應式網頁設計中的作用；能夠正確使用CSS媒體查詢等完成D清單頁面頁面響應式導航菜單制作。任務目標

制作響應式導航菜單將D清單頁面設置為響應式網頁，當用戶使用平板設備或電腦設備時，對導航欄中的列表標簽進行樣式設置和排版，使導航欄的列表內容全部顯示在頁面頂部。效果如下：任務描述任務1配置工作環境圖1-19平板和電腦端導航條效果圖本次任務要求根據D清單頁面效果圖，使用CSS樣式，在基礎上將D清單頁面菜單修改為響應式菜單，需要：學習響應式頁面的相關概念特征；CSS媒體查詢的相關知識綜合運用媒體查詢和CSS相關知識，對D清單頁面菜單欄進行響應式改造，使其在手機端、平板端和電腦端（根據效果圖，平板和電腦端效果一致）的菜單欄顯示不同狀態。任務分析圖1-19平板和電腦端導航條效果圖

制作響應式導航菜單知識與技能準備響應式網頁設計就是網頁的設計與開發能夠根據用戶行為以及設備環境（系統平臺、屏幕尺寸、屏幕定向等）進行相應的響應和調整。即無論用戶正在使用筆記本、ipad、手機，我們的頁面都能夠自動切換分辨率、圖片尺寸等，以適應不同設備。實現響應式設計的主要途徑是使用CSS媒體查詢。1、認識響應式網頁設計知識與技能準備CSS媒體查詢可以根據不同的屏幕尺寸設置不同的樣式。當我們重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。2、CSS媒體查詢語法：@mediamediatypeand|not|only(mediafeature){CSS-Code;}知識與技能準備其中，mediatype即媒體類型有以下幾種：2、CSS媒體查詢表1-19-1媒體類型知識與技能準備Mediafeature即媒體功能有以下取值：2、CSS媒體查詢表1-19-2媒體功能課堂練習1-19-1CSS媒體查詢簡單應用HTML代碼：1<divclass="text">sometext</div>CSS代碼：12345678910111213.text{ color:grey;}@mediascreenand(max-width:960px){.text{ color:red;}}@mediascreenand(max-width:768px){.text{ color:orange;}}@mediascreenand(max-width:550px){.text{ color:yellow;}}@mediascreenand(max-width:320px){.text{ color:green;}}課堂練習1-19-1CSS媒體查詢簡單應用在火狐瀏覽器的響應式設計模式下調整瀏覽器視口寬度，可以看到在不同分辨率下，文字的顏色有所變化。圖1-19-5768px下文字顏色效果（橘黃色）圖1-19-5768px下文字顏色效果（橘黃色）圖1-19-7320px下文字顏色效果（綠色）知識與技能準備這些變化，正是媒體查詢所要的效果。媒體查詢就是通過不同的媒體類型和條件定義樣式表規則。媒體查詢的實現方法很多，這里只介紹W3C推薦的媒體查詢CSS樣式規則。也可以通過下列兩種寫法來實現媒體查詢：或另外，在使用media時候需要先設置下面這段代碼，來兼容移動設備的展示效果：其中width=device-width為寬度等于當前設備的寬度，initial-scale為初始的縮放比例（默認設置為1.0）。2、CSS媒體查詢@importurl(example.css)screenand(width:800px);<linkmedia="screenand(width:800px)"rel="stylesheet"href="example.css"/><meta

name="viewport"

content="width=device-width,

initial-scale=1.0>任務實施在上一任務完成代碼的基礎上，更改D清單網頁頭部的導航欄部分，讓導航欄的列表內容顯示在頁面頂部。注意，本任務中，因為設置了變換和過渡效果，所以其元素的顯示和隱藏并不完全是依賴display的方式來實現，而是通過opacity屬性修改透明度來實現。參考代碼請參照書本。二級導航菜單即指當鼠標放到一級導航菜單上后，會彈出相應的二級導航菜單，移去鼠標后消失。我們可以通過給一級導航菜單加一個hover，滑過時二級導航菜單顯示，鼠標移走后隱藏二級導航菜單。任務拓展

制作響應式導航菜單能敘述網頁柵格系統的布局原理，柵格系統的設計原則；能編寫固定寬度和彈性頁面柵格系統的CSS布局代碼；能將柵格系統和媒體查詢功能結合，制作出CSS布局文件，兼容任意寬度的網頁排版布局。能夠學習伸縮盒子（FlexibleBox）的相關知識，并能辨析其與傳統的響應式浮動布局的差異。能夠綜合運用各柵格技術編寫柵格系統使其后續能夠應用于D清單頁面進行彈性布局。任務目標

編寫網頁柵格系統本任務要求將媒體查詢功能和柵格化布局結合，制作一個適用于響應式頁面排版布局的通用型CSS文件，使得任何一個按要求設置并應用該CSS文件的頁面能夠實現響應式效果。編寫的文件接下來將應用于D清單的響應式布局。具體要求為：1、編寫一個通用型柵格系統代碼文件；2、文件能夠被復用于應用其的頁面進行柵格化布局。任務描述

編寫網頁柵格系統完成D清單頁面柵格系統的編寫，需要：學習柵格系統的布局原理和設計原則；學習固定寬度和任意寬度頁面的柵格系統區別及CSS布局代碼編寫。編寫適用于任意寬度的柵格系統文件，并進行測試。任務分析

編寫網頁柵格系統知識與技能準備網頁柵格系統是一種網頁排版布局方式，將網頁寬度平分為多個等份的網格，如6等份、12等份、24等份，頁面中每個模塊的寬度設置為1等份的整倍數。如下圖將頁面分為6等份的布局效果：1、認識網頁柵格系統圖1-20-1柵格系統示意圖知識與技能準備對于網頁設計來說，柵格系統的使用，不僅可以讓網頁的信息呈現更加美觀易讀，更具可用性。對于前端開發來說，網頁將更加的靈活與規范，如上圖的6等份的網格，還可組合出2:2:2、3:3、4:2等布局方式。下面是不同等份的分割在網頁中的實際應用。1、認識網頁柵格系統圖1-20-26等份柵格網頁圖1-20-312等份柵格網頁知識與技能準備1、認識網頁柵格系統圖1-20-424等份柵格網頁知識與技能準備如下圖，假設將網頁寬度平均分為n份，每份網格寬度為w，則網頁總寬度為w×n。但考慮到每個網頁模塊之間因保留一定的間距i，如果一個模塊占用3份網格，其實際寬度為：w×3-i。而水平排列的最后一個模塊不應該保留間距i，所以網頁的實際總寬度應該為：總寬度Width=w×n-i2、網頁柵格系統的設計圖1-20-5網頁柵格寬度知識與技能準備根據上面的公式，假設網頁分為12等份，每份寬度80px，間距10px，則總寬度為950px。這是網頁柵格化中比較常用的劃分方式，12等份的網格可以使網頁平均放入2個模塊（6:6），或是3個模塊（4:4:4），或是4個模塊（3:3:3:3），或是6個模塊（2:2:2:2:2:2），使布局靈活多樣。如果需要更加細致的布局，也可以分為24等份，每份寬度40px，間距10px，總寬度為950px。但不一定要局限于這兩種劃分方式，也可自行嘗試其它的劃分，如10等份、16等份等。2、網頁柵格系統的設計知識與技能準備以網頁分12等份，每份寬度80px，間距10px，總寬度950px為例，設置網頁的CSS樣式。由于網頁中一個模塊占用的寬度可能為1份、2份、3份……12份，一共12種情況，需要將每種情況都使用一個CSS選擇符進行設置，以后直接為標簽添加對應份數的選擇符即可完成寬度的設置。其中不同份數與其寬度的關系如下：1份寬度=80×1-10=70px，附帶10px的右邊界；2份寬度=80×2-10=150px，附帶10px的右邊界；3份寬度=80×3-10=230px，附帶10px的右邊界；……11份寬度=80×11-10=870px，附帶10px的右邊界；12份寬度=80×12-10=950px，無右邊界；3、網頁柵格系統的實現知識與技能準備3、網頁柵格系統的實現CSS代碼：1234567891011121314151617[class*="grid"]{/*為.gridn統一添加樣式*/

float:left; margin:010px10px0;/*右邊界和下邊界*/}.grid1{width:70px;}.grid2{width:150px;}.grid3{width:230px;}.grid4{width:310px;}.grid5{width:390px;}.grid6{width:470px;}.grid7{width:550px;}.grid8{width:630px;}.grid9{width:710px;}.grid10{width:790px;}.grid11{width:870px;}.grid12{width:950px;margin-right:0;}/*不需要邊界*/.grid_last{margin-right:0;}/*消除一行最后一個的邊界*/知識與技能準備選擇符“.grid1”至“.grid12”設置了12種等份情況下所使用的寬度，“[class*="grid"]”選擇符為添加了“.gridn”的標簽再添加上10px的右邊界和其它相同的樣式設置。由于一行中最后一個模塊不需要添加右邊界，所以設置“.grid_last”選擇符用于消除右邊界，最后一個模塊的class因寫為“class="gridngrid_last"”。3、網頁柵格系統的實現知識與技能準備3、網頁柵格系統的實現HTML代碼：1234567891011121314151617<divclass="main"><!—網頁主體，寬950px--><!--第一行--><divclass="grid2">2</div><divclass="grid2">2</div><divclass="grid2">2</div><divclass="grid2">2</div><divclass="grid2">2</div><divclass="grid2grid_last">2</div><!--第二行--><divclass="grid3">3</div><divclass="grid4">4</div><divclass="grid5grid_last">5</div><!--第三行--><divclass="grid4">4</div><divclass="grid8grid_last">8</div><divclass="clear"></div></div>顯示效果如下：圖1-20-6固定寬度網頁柵格測試效果知識與技能準備在上一內容的設置中，柵格系統只能適用于固定的網頁寬度，如果網頁總寬度變更，需要重新計算和設置每份網格的寬度。再或者要制作自動適應瀏覽器寬度的網頁，這種設置方法將不適用。此時可以使用百分比%為單位設置寬度，但間距如果為固定值時，將無法計算出不同寬度下每份網格的比例。現在需要對網格的設置進行一些調整，如下圖：4、網頁柵格系統的另一種設置（自動適應不同的頁面寬度）圖1-20-7自適應網頁柵格知識與技能準備使用百分比%設置網格的寬度，如果分為12等份，n份網格的寬度設置如下：1份寬度=1/12=8.33333%；2份寬度=2/12=16.66667%；3份寬度=3/12=25%；……11份寬度=11/12=91.66667%；12份寬度=12/12=100%；將標簽設置為“怪異盒子模型”，使用填充代替邊界產生各份的間距，這樣間距的寬度將不會對各份的實際寬度造成影響。填充設置為左填充和右填充，寬度為間距寬度的一半。網頁的總寬度等同于瀏覽器的寬度，或等同于柵格化標簽的父標簽寬度。由于網頁兩側會留有填充產生的間距，所以網頁內容可視的寬度為“網頁總寬度Width-i”。4、網頁柵格系統的另一種設置（自動適應不同的頁面寬度）知識與技能準備3、網頁柵格系統的實現CSS代碼：1234567891011121314151617[class*="grid_"]{/*為.gridn_統一添加樣式*/

box-sizing:border-box;/*怪異盒子模型*/padding:05px10px5px;/*間距為5+5=10*/

float:left;}.grid_s1{width:8.33333%;}.grid_s2{width:16.66667%;}.grid_s3{width:25%;}.grid_s4{width:31.213333%;}.grid_s5{width:41.66667%;}.grid_s6{width:50%;}.grid_s7{width:58.33333%;}.grid_s8{width:66.66667%;}.grid_s9{width:75%;}.grid_s10{width:81.213333333%;}.grid_s11{width:91.66667%;}.grid_s12{width:100%;}知識與技能準備3、網頁柵格系統的實現HTML代碼：12345678910111213141516<divclass="main"><!—網頁主體，寬任意--><!--第一行--><divclass="grid_s3">3</div><divclass="grid_s3">3</div><divclass="grid_s3">3</div><divclass="grid_s3">3</div><!--第二行--><divclass="grid_s5">5</div><divclass="grid_s7">7</div><!--第三行--><divclass="grid_s1">1</div><divclass="grid_s1">1</div><divclass="grid_s6">6</div><divclass="grid_s4">4</div><divclass="clear"></div></div>顯示效果如下：圖1-20-8自適應柵格實現效果圖任務實施設計一種響應式柵格布局，除了能夠實現柵格化布局功能外，還能結合媒體查詢功能，在不同的瀏覽器寬度下，自動調整布局結構，如網頁在手機設備中一行只顯示1個模塊的內容，在平板設備中自動調整為一行顯示3個模塊，電腦設備中一行顯示4個模塊。使用媒體查詢功能設置出3種瀏覽器寬度下所使用的設置：手機設備（寬度<=767）、平板設備（768<=寬度<=1023）、電腦設備（寬度>=1024）。都添加相同的柵格系統設置，但是選擇符的命名有所區別，分別是“.grid_sn”、“.grid_mn”、“.grid_Ln”。網頁中模塊標簽將同時添加這三種選擇符，如“class='grid_s12grid_m6grid_L3'”，由于不同寬度下只有一種選擇符會生效，所以標簽在不同寬度下將使用不同的布局比例。任務實施創建一個grid.css樣式：

grid.css：1234567891011121314151617181920212223[class*="grid_"]{/*柵格化標簽的通用設置*/

box-sizing:border-box; padding:05px10px5px; float:left; background-clip:content-box;/*填充部分不顯示背景，該句可不設置*/}/*手機設備附加的樣式，頁面寬度<=767*/@mediaalland(max-width:767px){ .grid_s1{width:8.33333%;} .grid_s2{width:16.66667%;} /*其余設置與上一內容設置的一樣，此處省略*/ .grid_s12{width:100%;}}/*平板設備附加的樣式，768<=頁面寬度<=1023*/@mediaalland(min-width:768px)and(max-width:1023px){ .grid_m1{width:8.33333%;} .grid_m2{width:16.66667%;} /*其余設置與上一內容設置的一樣，此處省略*/ .grid_m12{width:100%;}}/*電腦設備附加的樣式，頁面寬度>=1024*/@mediaalland(min-width:1024px){ .grid_L1{width:8.33333%;} .grid_L2{width:16.66667%;} /*其余設置與上一內容設置的一樣，此處省略*/ .grid_L12{width:100%;}}任務實施效果測試：

grid.css：123456789<divclass="main"><!—網頁主體，寬任意--> <divclass="grid_s6grid_m4grid_L3"></div> <divclass="grid_s6grid_m4grid_L3"></div> <divclass="grid_s12grid_m4grid_L3"></div> <divclass="grid_s6grid_m4grid_L3"></div> <divclass="grid_s6grid_m4grid_L6"></div> <divclass="grid_s12grid_m4grid_L6"></div> <divclass="clear"></div></div>任務實施顯示效果如下：

圖1-20-9柵格系統測試效果任務實施完成后可以運用制作的柵格化設置文件（grid.css），制作如下圖效果的相冊頁面進行測試。要求：1）不同設備下圖片部分的排版有所不同，手機、平板設備下圖片部分的總寬度等同于瀏覽器的寬度，電腦設備下圖片部分總寬度為1000px；2）頭部部分寬度始終等同于瀏覽器寬度，可不使用柵格化布局，但手機設備下文字排布位置有所不同。任務實施顯示效果如下：

圖1-20-10柵格系統測試手機端、平板端、電腦端網頁布局是網頁實現的框架，對整個網頁視覺效果起到非常關鍵的作用。浮動布局(也稱DIV+CSS布局)技術是網站布局使用范圍最廣的布局技術，利用浮動布局技術可以實現大部分瀏覽器的兼容，達到相對最優的布局效果。但從W3C組織在2009年發布第一個伸縮盒子草案至今，已更新過多次，其提供的全新的布局伸縮盒子，因其專為布局和響應式而設計，給網頁布局帶來了新的思路，對響應式布局更是福音。任務拓展

編寫網頁柵格系統能進一步完善柵格化系統的功能，增加柵格布局的留白區域和柵格模塊的隱藏功能；能將柵格化系統運用到D清單頁面中進行響應式布局。任務目標

重布局頁面實現響應式效果使用中制作的響應式柵格系統（文件grid.css），對D清單頁面進行響應式改造，使頁面在平板設備、電腦設備中都能正常顯示，并根據瀏覽器的寬度自動調整頁面內容的排版。任務描述圖1-21平板和電腦端瀏覽效果

重布局頁面實現響應式效果完成D清單頁面的響應式改造，需要：增加柵格布局的留白區域設置；增加柵格模塊的隱藏功能設置；根據需要對D清單頁面重新布局的內容進行HTML和CSS修訂，以應用柵格系統對D清單頁面進行響應式改造。部分電腦端頁面排版布局如圖1-21-1所示。任務分析圖1-21-1變更為左右或左中右布局的電腦端頁面效果

重布局頁面實現響應式效果知識與技能準備在網頁布局中，并不是任何網頁都會將頁面的空間填滿，有時候由于網頁設計的需要會預留一些不放置內容的區域。在上一任務中設置的柵格布局中，每個模塊都會從左向右排列將空間填滿，現在需要進一步改良設置。如下圖所示，由于標簽的填充已用于設置模塊間的間距，所以使用左邊界，以每份網格為單位，為模塊標簽的左側隔開留白的空間。1、為網頁柵格系統添加留白區域圖1-21-2留白柵格原理圖知識與技能準備左邊界的長度同樣還是以百分比%為單位，設置為一份網格的整倍數，有1份網格、2份、……、11份一種11種情況。和上一任務中柵格系統設置方法類似，為不同的情況都設置一個獨立的選擇符。1、為網頁柵格系統添加留白區域知識與技能準備為柵格系統的CSS文件補充下面的設置：1、為網頁柵格系統添加留白區域為模塊標簽添加“grid_”設置寬度的同時，添加“ml_”付加上左邊界產生左側留白效果。css：123456789101112/*追加留白的設置*/.ml_s1{margin-left:8.33333%;}.ml_s2{margin-left:16.66667%;}.ml_s3{margin-left:25%;}.ml_s4{margin-left:31.213333%;}.ml_s5{margin-left:41.66667%;}.ml_s6{margin-left:50%;}.ml_s7{margin-left:58.33333%;}.ml_s8{margin-left:66.66667%;}.ml_s9{margin-left:75%;}.ml_s10{margin-left:81.213333333%;}.ml_s11{margin-left:91.66667%;}HTML：12345678910<divclass="main"><!—網頁主體--><divclass="grid_s10ml_s2"></div><!--留白2個網格--><divclass="grid_s3"></div><divclass="grid_s3ml_s1"></div><!--留白1個網格--><divclass="grid_s3ml_s1"></div><!--留白1個網格--><divclass="clear"></div></div>圖1-21-3有留白的柵格顯示效果知識與技能準備響應式柵格系統中要添加留白效果，需要為每種設備的媒體查詢，分別添加上述的CSS設置，并通過選擇符的名稱區分，做法與上一任務中響應式柵格系統設置方法類似。代碼請查看書本。如果因為布局需求添加右側留白邊界的，使用相同的方法添加對應的選擇符。1、為網頁柵格系統添加留白區域知識與技能準備部分網頁的內容比較多，在手機或平板設備下頁面無法顯示過多的內容，可能需要隱藏部分次要的模塊，以節省空間。前面柵格系統的設置中，設定了1-12份網格占用的空間，現在追加一個“0份”空間，設置為“display:none;”，添加了該選擇符的標簽便會被隱藏。2、在特定設備寬度下隱藏部分的柵格模塊grid.css：123456789101112@mediaalland(max-width:767px){ /*追加設置*/ .grid_s0{display:none;}}@mediaalland(min-width:768px)and(max-width:1023px){ /*追加設置*/ .grid_m0{display:none;}}@mediaalland(min-width:1024px){ /*追加設置*/ .grid_L0{display:none;}}任務實施使用上一個任務中制作的響應式柵格系統（文件grid.css），進一步完善D清單網頁。使頁面在平板設備、電腦設備中都能正常顯示，并根據瀏覽器的寬度自動調整頁面部分內容的排版。由于排版方式有所變化，部分內容的html標簽代碼需要進行一下修改。1、關于1.1布局修改1.2內容格式優化由于該部分與手機端其實是一致的，在電腦和平板端，由于視口寬度的增加，我們可以對其字體大小、留白等進行適當修改。圖1-21-4關于部分的效果圖任務實施2、特征模塊在該內容模塊中，我們可以對其進行柵格化布局，其中標題和副標題可以是12柵格，不需要修改。圖片和文本區域，平板端可以按照5：7進行布局，電腦端可以按照4：8進行布局。圖1-21-5特征模塊效果圖任務實施3、應用下載與上一模塊類似，其中標題和副標題可以是12柵格，不需要修改。圖片和文本區域，平板和電腦端都可以按照4：4：4進行布局。圖1-21-6應用下載效果圖任務實施4、高級會員該表格在布局時已經是12列柵格的布局，與關于部分類似，只需要增加最大寬度樣式到HTML的即可，這里操作省略。5、幫助中心該部分與應用下載模塊類似，為4：4：4布局，最大寬度方面分別對標題、3組文本和視頻添加row樣式，具體代碼可以參考下載模塊內容進行設置，這里省略。圖1-21-7幫助中心效果圖任務實施6、聯系我們該模塊為左右結構，與“特征模塊”類似，在平板端為6：6布局。為了右邊的表單短一些，在電腦端可以采用8：4的比例進行布局。圖1-21-8聯系我們效果圖任務實施7、測試完成所有布局后，我們需要對響應式效果進行測試。以火狐瀏覽器為例，我們可以依次單擊設置菜單中的“WEB開發者”->”響應式設計模式”，打開響應式設計模式視圖。也可以直接單擊右鍵“檢查元素”或按快捷鍵“F12”，打開調試窗口，再單擊“響應式設計模式”按鈕打開響應式設計模式視圖。如圖1-21-9所示：我們選擇設備型號為手機了設備時，會發現在前面使用了柵格布局的都會出現元素“偏移”的情況，如圖1-21-10所示：圖1-21-9響應式設計模式視圖圖1-21-10移動端網頁元素偏移部分柵格布局的子模塊由于文字數量的不相等，會在特定頁面寬度下造成子模塊高度不一致，導致排版錯位。任務拓展

重布局頁面實現響應式效果能夠在學習的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內容本身協同工作。提供超出用戶代理提供的服務，以方便用戶與殘疾人的網頁內容交互。該定義可能與其他文檔中使用的定義不同。如：屏幕放大鏡，用于放大和提高渲染文本和圖像的視覺可讀性；屏幕閱讀器，最常用于通過合成語音或可刷新盲文顯示來傳達信息；文本到語音軟件，用于將文本轉換為合成語音；語音識別軟件，用于允許口語控制和口授；用于模擬鍵盤的備用輸入技術（包括頭指針，屏幕鍵盤，單開關和sip/puff設備）；備用指點設備，用于模擬鼠標指向和點擊。4、信息無障礙網頁的測試任務實施1、角色說明按鈕是使用<a>標簽制作的，使用應該對其角色進行說明。2、圖片描述對應裝飾性圖片，我們要讓img的alt屬性為空，但是對應非裝飾性圖片，這需使用alt屬性對圖片進行說明。3、表單在項目中因為我們按照標準的input標簽及屬性來制作表單和按鈕，所以可以不需要添加role角色。由于我們在頁面制作時遵循了HTML5標準，很少使用非語義化標簽來設置相關內容，且頁面交互相對簡單，所以需要修改的并不多。能描述各個瀏覽器對HTML5及CSS3的兼容情況；能根據瀏覽器兼容性情況使用CSS3前綴解決兼容性問題；能夠使用W3C提供的驗證工具對D清單頁面進行驗證，并能根據驗證結果修改不符合W3C規范的代碼。任務目標測試及兼容性設置1、完善上一任務的D清單網頁，讓該網頁的兼容性更強。2、使用W3C對D清單頁面HTML和CSS代碼進行驗證，確認是否符合W3C標準。W3CCSS驗證測試頁面如圖1-23所示。任務描述圖1-23W3CHTML和CSS驗證測試頁面測試及兼容性設置完成對D清單頁面進行兼容性測試和W3C驗證測試，需要：學習常見的瀏覽器及其對H5的兼容性；學習并為D清單頁面添加CSS3瀏覽器前綴；對D清單頁面代碼進行W3C認證測試。任務分析測試及兼容性設置知識與技能準備目前，支持CSS3和HTML5的瀏覽器變得越來越多，包括最新版的MicrosoftEdge瀏覽器。但是，由于CSS3和HTML5的W3C規范在不斷的完善，瀏覽器的兼容性也在不斷的更新。目