js 彈出菜單/窗口效果

更新時間：2011年10月30日 20:06:53 作者：

想象一下，你把一個重要內(nèi)容放在一個彈出窗口，又不聚集到這個窗口。讓使用屏幕閱讀器的同學情何以堪，只有當他們 tab 到這頁面結束，還繼續(xù) tab，才可能找到這個彈窗

是不是應該為彈出菜單提供更好的可訪問支持？這篇文章將涉及到3種常見的彈窗：

window.open 新建的瀏覽器窗口
<iframe /> 創(chuàng)建的窗口
頁面 DOM 創(chuàng)建的偽彈出窗口：如彈出 tips 等

一、當頁面無 JS 的時候
通常來說，無 JS 的情況那就按 HTML 的行為來做事。讓鏈接可以鏈接，就已經(jīng)解決。比較簡單，我們簡單帶過：

1. window.open 新建的瀏覽器窗口：盡量讓 JS 觸發(fā)器綁定在 <a /> 上，并把 a 鏈接到一個新的頁面，即可。

復制代碼代碼如下:

 
// 鏈接與 window.open 的目標相同 
<a href="/target.html" target="_blank">[open window]</a> 
// 記得阻止鏈接有默認行為，不然有 JS 的時候會打開兩次 
window.open('./iframe.html', 'name', 'height=300,width=500'); 
return false; 

2. <iframe /> 創(chuàng)建的窗口：如果是用 JS 動態(tài)創(chuàng)建的，那么記得觸發(fā)器也應該像 window.open 的方法一樣，把解法鏈接寫在一個 <a /> 上，讓用戶通過鏈接來訪問。而如果是隱藏的，那么盡量來使用 <noscript /> 來隱藏，再用 JS 讓其正常顯示出來；或者高度為 0 的空 iframe 。這樣即可保證在有 JS 的時候可用，而在無 JS 的時候可以正常顯示。詳細應用可以參照：支付寶新首頁的幾點前端實踐。

復制代碼代碼如下:

 
// 動態(tài)創(chuàng)建，請盡量使用這種方法，因為 IE8 不能用 JS focus 到動態(tài)創(chuàng)建的 focusable 元素 
// 而空 src 則請使用 javascript:'' 這種方式，因為這是解決性能的最好方式，詳見：空路徑對頁面性能影響的解決方案 

<a href="/target.html" target="_blank">[open iframe]</a> 
<iframe src="javascript:''" frameborder=0 id="theframe"></iframe> 
// js 
document.getElementById('theframe').src = '/target.html' 

3. 頁面 DOM 創(chuàng)建的偽彈出窗口：使用 <noscript /> 來隱藏。鏈接用錨點。

復制代碼代碼如下:

 
<a href="#target">[open current page DOM]</a> 
... 很多很多東西隔在中間 ... 
<noscript><div id="target">content</div></noscript> 

二、大多數(shù)情況下
大數(shù)多情況下，用戶的瀏覽器都是有開啟 JS 的。而我們要做的是：focus 到彈出的窗口，并且第一個 tab 就可以訪問里面的內(nèi)容。聽過來挺簡單的，hub? 先看看 DEMO:

預覽：可訪問彈出菜單/窗口

1. window.open 新建的瀏覽器窗口：focus 到新建的窗口即可。

復制代碼代碼如下:

 
// 引用自：QuickMode - popups 
function popitup(url) { 
newwindow=window.open(url,'name','height=200,width=150'); 
if (window.focus) { 
// focus 到新建窗口 
newwindow.focus(); 
} 
// 阻止觸發(fā)器的默認行為 
return false; 
} 

2. <iframe /> 創(chuàng)建的窗口：調(diào)試了好久，IE8/9 需要等 iframe onload 成功后 setTimeout 來 hack；firefox 不能使用 ifrcontentWindow.focus()，只能用 iframe.focus()。綜合起來需要這樣的代碼：

復制代碼代碼如下:

 
// for all except firefox 
setTimeout(function(){ 
f.contentWindow.focus(); 
}, 50); 

// hack for firefox 
navigator.userAgent.toLowerCase().indexOf('firefox') !== -1 && f.focus(); 

3. 頁面 DOM 創(chuàng)建的偽彈出窗口：對于 dom，除了 <a /> <input /> 等這些 focusable 元素（W3C SPEC），都是不可以 focus 的。那么當需要 focus 到一個 div 時，我們有什么方法可以做到呢？通常來說，我們可以設置 Tabindex 來讓像 <div /> 這樣的非 focusable 元素可以觸發(fā) focus 事件。但我們想要的時真正 focus 到一個地方，以便于使用 tab 來訪問這個區(qū)域的內(nèi)容，所以這種方法對我們等于無用。

目前還沒有比較好的方法（對于我能想到的和找到的），所以目前來說，我們只能利用一個 focusable 元素來創(chuàng)建 focus 目標。我們可以這樣做：

<a href="#" class="getfocus">Get focus</a>
<input title="testing" />
但問題是，對于這個鏈接對于我們來說是毫無作用的，我們需要隱藏他，又能 focus 到。但 display:none 的時候是不能 focus 的。對于隱藏來說，這里也不想說太多。推薦看看這篇文章：使用clip隱藏內(nèi)容。那么我們可以這樣來 hack 我們的這個鏈接：

復制代碼代碼如下:

 
// html: 注意用 hidefocus 來刪除虛線框 
<a href="#" class="getfocus" hidefocus>Get focus</a> 

// CSS: 使用 clip 
.getfocus{ 
position:relative; 
clip:rect(1px 1px 1px 1px); 
clip:rect(1px, 1px, 1px, 1px); 
} 

// javascript: 記得把 <a /> 放在這個 DOM 結構的最前面方便自上至下 tab 下去 
a.focus() 

三、總結：
至此，重要的技術實現(xiàn)點也已經(jīng)說明白。代碼請見這個粗陋的 DEMO，雖然只是沒有特別優(yōu)化的一段代碼，但相信可以解決很多問題。對于可訪問性，我們要走的路還有很多。一點點來吧，從今天開始。

您可能感興趣的文章: