Question

是否有一种方法可以确保用户不会使用线性导航返回到对话框之外。我有一个javascript，它在标签导航中处理这个。

注意：

线性导航：通过线性导航，我并不是指使用Tab键进行导航，而是使用屏幕阅读器提供的线性导航。（在goolge chrome中，ChromevoxKey +箭头向前或向后移动）。这基本上通过DOM导航，屏幕阅读器读出DOM元素

Answer 1

我遇到了一个黑客来实现这个目标。

屏幕阅读器只会读取可见的元素。因此，如果我将"aria-hidden"="true"属性添加到HTML元素，屏幕阅读器将永远不会将线性焦点放在该元素上（屏幕阅读器甚至永远不会读取div及其内容标记为隐藏）。

黑客：我在div内将对话框显示为不同的body，并将主要内容保留在div下的单独body内每当我显示对话框时，都会将aria-hidden="true"添加到主要内容div。一旦我关闭对话框，我就从主要内容div中删除了aria-hidden attr。

<body>
    <div id="dialog box"> <--- This is the dialog box ----> </div>
    <div id="main content" aria-hidden="true"> <-- This is the main content --> </div>
</body>

Answer 2

我在使用onblur事件之前已经这样做了。 Onblur听众无论你想要保证什么模态都能保持专注（onblur不会在所有浏览器中冒泡，所以这可能很棘手，但可能）。当你的模态通过用户的某些动作失去焦点时，只需宣布你已经强制重点回到模态中你想要的任何元素。从可用性的角度来看，它应该是模态中具有焦点的最后一个对象。一定要特别宣布你已经完成了这项工作，因为它可能会受到刺激，特别是对于非选址用户而言，期望他们专注于指导AT放置它。

更好的方法是宣布模式在失去焦点时关闭。 AT用户用于处理模态，并且如果AT由于网站设计而在模态之外提供导航，则AT用户将习惯于模态关闭本身的想法，而不再是交互的焦点。就像大多数模态在用户点击模式到网页的其他部分时消失一样。除非你的模态在继续之前绝对需要注意，否则这种方法更加用户友好。特别是对于选址的键盘用户，依靠AT进行导航帮助。

聚焦/模糊事件和冒泡/捕捉： http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html

捕获对话框内的线性导航

2 个答案: