NVDA Bildschirmleser nicht vorhersagbar in den Fokusmodus wechseln

Question

Ich habe einen einfachen Codeabschnitt, den ich versuche, Tastatur zugänglich zu machen, während Sie den NVDA Bildschirmleser verwenden.

Konkret habe ich ein div mit einer Rolle von "button", mit einem anderen div mit einer anderen Rolle von "button" darin verschachtelt. Jedes div hat ein anderes onkeydown-Ereignis, das ausgelöst wird, wenn der Benutzer auf dieses div zugreift, und drückt "enter".

Diese Tastaturfunktion funktioniert wie gewünscht, wenn der NVDA Bildschirmleser nicht eingeschaltet ist.

Wenn ich den Bildschirmleser jedoch eingeschaltet habe, wird das verschachtelte Keydown-Ereignis nicht mehr ausgelöst. Stattdessen wird nur das übergeordnete Ereignis ausgelöst, auch wenn das verschachtelte Ereignis ein Fokus hat.

Wenn ich NVDA jedoch manuell aus dem "Browse-Modus" in den "Fokusmodus" (durch Drücken der NVDA-Taste + Leertaste) ändere, funktionieren die Tastenereignisse wieder wie gewünscht.

Leider kann ich nicht erwarten, dass jemand, der NVDA benutzt, weiß, dass er manuell in den "Fokusmodus" schaltet. Es muss entweder automatisch in den "Fokusmodus" wechseln oder es muss im "Browse-Modus" arbeiten.

Hier ist der Code:

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); 

Sie auch hier ein codepen betrachten: http://codepen.io/jennEDVT/pen/Yprova

Jede Hilfe, dass jemand würde anbieten sehr geschätzt werden!

p.s. Ich weiß, wenn ich das verschachtelte div nehme und es so verschiebe, dass es nicht mehr verschachtelt ist, sondern eher ein Geschwister des ersten div ist, dann funktioniert alles wie gewünscht. Leider ist das keine Option. Das Div muss verschachtelt sein.

Answer 1

Dies ist kein Fehler in NVDA.

Zunächst einmal können Sie keine anklickbaren Elemente verschachteln. Genauer gesagt, you cannot have nested interactive content. Sie können keine Verknüpfungen verschachteln und Sie können keine Schaltflächen verschachteln. Sie können keine Verknüpfungen in Schaltflächen verschachteln, und Sie können Schaltflächen in Verknüpfungen nicht verschachteln. Es gibt andere Arten von interactive content wert, in der zukünftigen Referenz auch zu suchen.

Sie können feststellen, dass Ihr Code technisch gültig ist, aber das ist nur, weil das, was Sie geschrieben haben, ein fib ist.

Anstatt das richtige Element (<button>) zu verwenden, haben Sie role=button auf <div> s gesetzt. Ein HTML-Validierer würde Ihren Code übergeben, da es zulässig ist, <div> zu verschachteln.

jedoch von ihnen jede role=button geben, haben Sie den User-Agent wies sie als <button> (minus all die Vorteile, die mit ihnen kommen, wie Zugänglichkeit, Schlüsselhandler, Semantik, etc.) zu behandeln.

Jetzt gehen wir zurück und validieren diesen Code erneut, wie ein User-Agent es sehen würde (als verschachtelt <button> s).Das W3C Nu HTML-Checker scheitern würde es (ich weiß, weil ich einen Test lief):

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

Mein Vorschlag ist:

• nicht nisten sie,
• wandeln sie in <button> s,
• entfernen die ungültige tabindex=1 (die Sie nicht brauchen),
• die Prüfung für den Schlüsselcode entfernen, da die <button> Sie gibt, die kostenlos (einschließlich Zeichen 32) ,
• machen Ihre <div class="result"> in eine ARIA live region (es gibt some tips here),
• und einen Wrapper um die Tasten setzen Sie die visuellen Effekte zu geben.

Probe rejiggered Code:

<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

Wenn es Sie interessieren könnten, die WAI-ARIA Authoring Practices (APG) hat Hinweise, wie verschiedene Design-Muster zugänglich zu machen. Es enthält auch einen zu dem, was Sie beschreiben: Menu or menubar, die Codebeispiele für Menüs mit Untermenüs enthält.