需求是：
1. 通過無障礙A+機器檢測。
2. 仿ASP.NET選單多階層式選單。
3. 依不同權限顯示不同表單(目前分登入與未登入兩種)。
4. 按tab鈕可以檢索完成整個選單。
---------------------------------------------------------------
作法：
1. 有一個很奇妙的問題是，雖然ASP.NET的選單沒辦法通過無障礙的檢測，但其實他可以使用滑鼠及鍵盤操作，卻因為事件過不了，而用JavaScript方式做出的選單卻一定會通過。原因是什麼？說到底，如果用JS做出的選單在HTML上面並不會出現類似onMouseover等事件，甚至可以說他就是一個單純的div、lu、li、a標簽，對於一個只有這些標籤的網頁，不通過機器檢測也很難。所以第一項可以略過不看，先用JS做出選單後，再補足鍵盤操作即可。
2. 接下來進到重點，利用jQuery來製作一個仿ASP.NET的選單。
A. 定出要放選單的位置(參考)
B. 建構選單的HTML架構：
首先，以一個選單div(紅框)包住母選單之ulli(綠框)，再在選單DIV內加入子選單div(紫框)與子選單ulli(藍框)，看下圖應該可以很清楚架構。
C. 整理HTML：依上面的架構，會有一個母選單，與多個子選單，只需要接續建置出來就可以了。建置各項子母選單連接時，取的ID名稱是另一個重點；以下圖來說，內容包含建立的母選單與第一個子選單區塊，可以觀察母選單中，第一個有子選單的項目是『測繪成果資料供應』這個項目，而他超連接的內容是『#divList5』，必須與第一個子選單div的id相同。原因是這樣在任何事件取得該a標籤時，就可以抓到對應的子選單名稱。
D. 程式碼流程：
甲. 利用CSS將所有的子選單以隱藏方式呈現。
乙. 當滑鼠移到任何母選單項目時確認子選單都消失。
丙. 若在href屬性抓取到相對應的ID，讓相對應的子選單出現。
丁. 當滑鼠移出整個區塊選單時，確認子選單都消失。
主要程式碼如下：
F. 美觀：當然如果有人可以或是自己就可以，你可以對選單做很多的美化工作，或是用個不錯的動畫效果。
3. 下一個重點，通常選單會隨著權限來做變化，這邊我的想法很簡單，因為應該有權限的頁面都已經用ASP.NET的機制鎖在登入頁之後，所以即便我的CSS與JS在瀏覽器上失效，使用者看到不應該出現的項目，點選後也無法進入；所以這邊我的作法就是單純的把他隱藏起來，判斷帳號角色屬於可見的權限時，才將其顯示。而一次全顯示與全隱藏抓取的方法是藉由css方式。以下圖來說，就是在要登入才顯示的選項加上hideMenuRole的CSS。
4. 完成了滑鼠控制以後，必須要加上鍵盤控制才能說是基本的無障礙，所以加上focus與blur事件，讓滑鼠移上與移下所產生的效過，都可以藉由focus執行。另一個重點是按tab鍵必須要依序巡覽整個選單，所以在母選單都加上tabindex屬性，並且在子選單也加上相對應的tabindex。比如說tabindex=2的母項上有子選單，則在子選單上面都加上tabindex=2之屬性，依此類推。
最後檢視一下在各個瀏覽器上的執行情況(以下為ie6、ie8、chrome10.0.648.127及firefox3.6.13)：
執行影片(滑鼠操作→登入後選單改變→利用鍵盤TAB鍵操作)
沒有留言:
張貼留言