我有一段簡單的代碼,我試圖讓鍵盤可以在使用NVDA屏幕閱讀器時訪問。NVDA屏幕閱讀器沒有切換到可預測的對焦模式
具體來說,我有一個角色爲「按鈕」的div,另一個div內嵌有另一個「按鈕」角色。每個div都有一個不同的onkeydown事件,當用戶選中該div時觸發,並按下「enter」鍵。
當我沒有打開NVDA屏幕閱讀器時,此鍵盤功能全部按需運行。
但是,當我確實已啓用屏幕閱讀器時,嵌套的keydown事件不再觸發。相反,即使嵌套事件是焦點事件,父事件也會觸發。但是,如果我手動將NVDA從「瀏覽模式」切換到「對焦模式」(通過按NVDA鍵+空格鍵),然後按鍵事件再次按照需要工作。
不幸的是,我不希望有人使用NVDA知道手動切換到「對焦模式」。它需要自動更改爲「對焦模式」,或者需要以「瀏覽模式」工作。
下面的代碼:
HTML:
<div role="button"
tabindex="1"
onkeydown="keyEvent(event, outerDivAction)"
class="outerDiv">
Outer Div
<div role="button"
tabindex="1"
onkeydown="keyEvent(event, innerDivAction)"
class="innderDiv">
Inner Div</div>
</div>
<div class="result"></div>
的JavaScript:
function outerDivAction(event) {
event.stopPropagation();
console.log('outer div');
$('.result').html('<p>outer div!</p>');
}
function innerDivAction(event) {
event.stopPropagation();
console.log('inner div')
$('.result').html('<p>inner div!</p>');
}
function keyEvent(event, callback) {
event.stopPropagation();
if (event.which === 13) {
callback(event);
}
}
$('.outerDiv').click(outerDivAction);
$('.innderDiv').click(innerDivAction);
您還可以查看這裏codepen:http://codepen.io/jennEDVT/pen/Yprova
任何幫助,任何人都可以提供將非常感謝!
p.s. 我知道,如果我採用嵌套div並移動它,使其不再嵌套,而是相當於第一個div的兄弟,那麼一切都按需要工作。不幸的是,這不是一個選項。該div需要嵌套。
感謝您花時間提供如此全面的解釋。不幸的是,這將很難實現,因爲我正在開發的實際規格是一些導航,其中包含與其關聯的下拉菜單的一些項目,然後下拉項目具有顯示爲彈出菜單的附加子菜單。每個項目有時可以是按鈕(打開子菜單)或鏈接,因此目前我使用JavaScript將它們從role =「button」動態更改爲role =「link」。元素嵌套的原因是因爲子菜單是父項的子項。 – jennEDVT
爲避免嵌套按鈕,您是否可以重構代碼以使用帶嵌套子列表(包含按鈕)的列表?根據列表項的焦點(或按鈕切換)控制可見性需要更多努力,但它避免了@aardrian提到的嵌套交互式內容。下面是一個codepen來說明我的意思:http://codepen.io/anon/pen/KNyZYm – Skerrvy
@jennEDVT,你可能別無選擇,只能重構,因爲你總是會遇到輔助技術問題。 Skerrvy有一個很好的快速演示你可以嘗試的東西。另外,查找可以修改的現有模式。例如,Adobe有一個複雜的大型菜單,雖然對於大多數網站來說太多了,但可能是合適的? http://adobe-accessibility.github.io/Accessible-Mega-Menu/ – aardrian