NVDA屏幕閱讀器沒有切換到可預測的對焦模式

我有一段簡單的代碼，我試圖讓鍵盤可以在使用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需要嵌套。

來源

2016-11-29 jennEDVT

這不是NVDA中的錯誤。

首先，你不能有嵌套的可點擊元素。具體來說，you cannot have nested interactive content。您無法嵌套鏈接，也無法嵌套按鈕。您不能將鏈接嵌入到按鈕中，也無法將按鈕嵌套在鏈接中。還有其他種類的interactive content也值得研究以供將來參考。

你可能會發現你的代碼在技術上是有效，但那是因爲你寫的是一個fib。

而不是使用正確的元素（<button>），您選擇將role=button放在<div> s。 HTML驗證程序會傳遞您的代碼，因爲它適用於嵌套<div>。

但是，通過給予它們每個role=button，您已指示用戶代理將它們視爲<button>（減去它們隨附的所有好處，如可訪問性，關鍵處理程序，語義等）。

現在讓我們回過頭來再次驗證代碼，以便用戶代理看到它（如嵌套<button> s）。W3C的怒江HTML檢查會失敗（我知道，因爲我跑測試）：

Error: Start tag button seen but an element of the same type was already open.

我的建議是：

不嵌套它們，
將它們轉換爲<button> S，
刪除無效tabindex=1（您不需要），
刪除檢查鍵碼，因爲<button>免費爲您提供（包括字符32），
讓你<div class="result">爲ARIA live region（有some tips here）
，並把按鈕周圍的包裝給你你想要的視覺效果。

樣品rejiggered代碼：

<div class="wrapper"> 
    <button class="outerDiv"> 
    Outer Div 
    </button> 
    <button class="innderDiv"> 
    Inner Div 
    </button> 
</div> 

<div class="result" role="alert" aria-live="assertive"></div>

來源

2016-11-30 02:19:19 aardrian

感謝您花時間提供如此全面的解釋。不幸的是，這將很難實現，因爲我正在開發的實際規格是一些導航，其中包含與其關聯的下拉菜單的一些項目，然後下拉項目具有顯示爲彈出菜單的附加子菜單。每個項目有時可以是按鈕（打開子菜單）或鏈接，因此目前我使用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

如果您可能會感興趣的WAI-ARIA Authoring Practices（APG）對如何使不同的設計模式訪問指導。它還包括一個關於你所描述的內容：Menu or menubar其中包括菜單子菜單的代碼示例。

來源

2016-12-01 00:07:00

請編輯一些能夠幫助OP進入你的答案的代碼。僅鏈接答案（意思是解決方案本身作爲鏈接呈現並且不在帖子本身中解釋的任何答案，即使存在其他非鏈接文本）通常都會被忽視，因爲如果鏈接發生，它們可能會失效下來，並在過去被用於自我推銷。 –

感謝您的資源！ – jennEDVT

NVDA屏幕閱讀器沒有切換到可預測的對焦模式

回答

相關問題