当模态打开时，NVDA 不会宣布“对话框”

Question

在这个简单的模态示例中，角色设置为对话框，并且在对话框打开时焦点被接收到对话框容器上，但 NVDA 不会在开始时宣布“对话框”一词。我注意到这里存在潜在的 NVDA 问题 https://github.com/nvaccess/nvda/issues/8620，但我可以找到其他几个可访问的模式示例，其中 NVDA 宣布“对话”，例如 https://stackblitz .com/edit/stackblitz-starters-tkpczr?file=src%2Fcomponents%2FModal%2FModal.jsx，src%2Fcomponents%2FNewsletterModal%2FNewsletterModal.jsx，https://codesandbox.io/p/sandbox/react-accessible -modal-dialog-forked-ypw7q8?file=%2Fsrc%2FModal%2Findex.js%3A62%2C1-65%2C25 和 w3c Modal https://www.w3.org/WAI/ARIA/apg/patterns/对话框模式/示例/对话框/。那么这个模式有什么问题导致 NVDA 无法宣布“对话”吗？

var btn2 = document.getElementById('test_button2');
var dialog2 = document.getElementById('test_dialog2');
var btnClose2 = dialog2.querySelector('button');

btn2.addEventListener('click', function() {
  dialog2.classList.add('show');
  dialog2.focus();
  this.setAttribute('aria-hidden', true);
  this.setAttribute('tabindex', '-1');
});

btnClose2.addEventListener('click', function() {
  dialog2.classList.remove('show');
  btn2.removeAttribute('aria-hidden');
  btn2.removeAttribute('tabindex');
  btn2.focus();
});

#test_dialog2 {
  visibility: hidden;
}

#test_dialog2.show {
  visibility: visible;
  padding: 1em;
  box-shadow: 0 0 300px
}

button[aria-hidden] {
  opacity: .2;
}

*:focus {
  box-shadow: none;
  outline: 2px solid blue;
}

<button id="test_button2">
  Open Dialog
</button>

<div tabindex="-1" id="test_dialog2" role="dialog" aria-labelledby="test2">
  <h2 id="test2">example</h2>
  <p>a test paragraph</p>
  <button>close</button>
</div>

Answer 1

这正是 NVDA Bug 中描述的情况，该 Bug 仍处于开放状态。

与其他链接示例的区别在于，它们不关注对话框本身，而是关注其中的元素。最佳实践是让第一个互动的孩子集中注意力。如果没有，标题就可以了。

NVDA 将宣布该对话，因为它就像一个里程碑式的分组。当进入和离开它时（可以说跨越它的边界），它的角色和名称将会被宣布。

const btn2 = document.getElementById('test_button2');
const dialog2 = document.getElementById('test_dialog2');
const btnClose2 = dialog2.querySelector('button');
const h2 = document.getElementById('test2');

btn2.addEventListener('click', function() {
  dialog2.removeAttribute('hidden');
  dialog2.focus();
  this.setAttribute('aria-hidden', true);
  this.setAttribute('tabindex', '-1');
});

btnClose2.addEventListener('click', function() {
  dialog2.setAttribute('hidden', true);
  btn2.removeAttribute('tabindex');
  btn2.focus();
});

#test_dialog2 {
  padding: 1em;
  box-shadow: 0 0 300px
}

button[aria-hidden] {
  opacity: .2;
}

*:focus {
  box-shadow: none;
  outline: 2px solid blue;
}

<button id="test_button2">
  Open Dialog
</button>

<div id="test_dialog2" role="dialog" aria-labelledby="test2" aria-modal="true" hidden>
  <h2 id="test2" tabindex="-1">example</h2>
  <p>a test paragraph</p>
  <button>close</button>
</div>

今天最好是

使用原生<dialog>

元素及其API

。

将对话框之外的任何内容渲染为不可访问也是必要的。