Считыватель экрана NVDA не работает в режиме фокусировки

Question

У меня есть простой кусок кода, который я пытаюсь сделать клавиатурой доступной при использовании устройства чтения 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 должен быть вложенным.

Answer 1

Это не ошибка в NVDA.

Прежде всего, вы не можете иметь вложенные элементы с кликом. В частности, you cannot have nested interactive content. Вы не можете вставлять ссылки, и вы не можете вставлять кнопки. Вы не можете вставлять ссылки в кнопки, и вы не можете вставлять кнопки в ссылки. Есть и другие виды interactive content, которые можно найти в будущем.

Вы можете обнаружить, что ваш код технически действителен, но это только потому, что то, что вы написали, является фиброй.

Вместо того, чтобы использовать правильный элемент (<button>), вы решили поставить role=button на <div> s. HTML-валидатор передаст ваш код, потому что он действителен для гнезда <div>.

Однако, указав каждому из них role=button, вы указали, что пользовательский агент обрабатывает их как <button> (минус все преимущества, которые приходят с ними, такие как доступность, обработчики ключей, семантика и т. Д.).

Теперь вернемся назад и подтвердим этот код еще раз, когда пользовательский агент увидит его (как вложенный <button> s).Проверки W3C Nu HTML потерпит неудачу (я знаю, потому что я провел тест):

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

Мое предложение:

• не гнездо им,
• конвертировать их в <button> с,
• удалить недействительный 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> 

Answer 2

Если это может вас заинтересовать, то WAI-ARIA Authoring Practices (APG) имеет указания о том, как сделать различные шаблоны дизайна доступны. Он также включает описание того, что вы описываете: Menu or menubar, который содержит примеры кода для меню с подменю.