是不是應該為彈出菜單提供更好的可訪問支持？這篇文章將涉及到3種常見的彈窗：
window.open 新建的浏覽器窗口
<iframe /> 創建的窗口
頁面 DOM 創建的偽彈出窗口：如彈出 tips 等
一、當頁面無 JS 的時候
通常來說，無 JS 的情況那就按 HTML 的行為來做事。讓鏈接可以鏈接，就已經解決。比較簡單，我們簡單帶過：
1. window.open 新建的浏覽器窗口：盡量讓 JS 觸發器綁定在 <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 /> 創建的窗口：如果是用 JS 動態創建的，那麼記得觸發器也應該像 window.open 的方法一樣，把解法鏈接寫在一個 <a /> 上，讓用戶通過鏈接來訪問。而如果是隱藏的，那麼盡量來使用 <noscript /> 來隱藏，再用 JS 讓其正常顯示出來；或者高度為 0 的空 iframe 。這樣即可保證在有 JS 的時候可用，而在無 JS 的時候可以正常顯示。詳細應用可以參照：支付寶新首頁的幾點前端實踐。
復制代碼 代碼如下:
// 動態創建，請盡量使用這種方法，因為 IE8 不能用 JS focus 到動態創建的 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 創建的偽彈出窗口：使用 <noscript /> 來隱藏。鏈接用錨點。
復制代碼 代碼如下:
<a href="#target">[open current page DOM]</a>
... 很多很多東西隔在中間 ...
<noscript><div id="target">content</div></noscript>
二、大多數情況下
大數多情況下，用戶的浏覽器都是有開啟 JS 的。而我們要做的是：focus 到彈出的窗口，並且第一個 tab 就可以訪問裡面的內容。聽過來挺簡單的，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();
}
// 阻止觸發器的默認行為
return false;
}
2. <iframe /> 創建的窗口：調試了好久，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 創建的偽彈出窗口：對於 dom，除了 <a /> <input /> 等這些 focusable 元素（W3C SPEC），都是不可以 focus 的。那麼當需要 focus 到一個 div 時，我們有什麼方法可以做到呢？通常來說，我們可以設置 Tabindex 來讓像 <div /> 這樣的非 focusable 元素可以觸發 focus 事件。但我們想要的時真正 focus 到一個地方，以便於使用 tab 來訪問這個區域的內容，所以這種方法對我們等於無用。
目前還沒有比較好的方法（對於我能想到的和找到的），所以目前來說，我們只能利用一個 focusable 元素來創建 focus 目標。我們可以這樣做：
<a href="#" class="getfocus">Get focus</a>
<input title="testing" />
但問題是，對於這個鏈接對於我們來說是毫無作用的，我們需要隱藏他，又能 focus 到。但 display:none 的時候是不能 focus 的。對於隱藏 來說，這裡也不想說太多。推薦看看這篇文章：使用clip隱藏內容。那麼我們可以這樣來 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()
三、總結： 至此，重要的技術實現點也已經說明白。代碼請見這個粗陋的 DEMO，雖然只是沒有特別優化的一段代碼，但相信可以解決很多問題。對於可訪問性，我們要走的路還有很多。一點點來吧，從今天開始。