1

有没有一种方法可以确保用户不会使用线性导航返回对话框之外。我有一个 javascript 可以在选项卡导航中处理这个问题。

笔记 ：

线性导航：线性导航不是指使用tab键的导航，而是屏幕阅读器提供的线性导航。（在 goolge chrome 中，它的 ChromevoxKey + 箭头可以向前或向后移动）。这基本上是在 DOM 中导航，屏幕阅读器会读出 DOM 元素

4

2 回答 2

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>
于 2013-07-30T11:53:44.803 回答
0

我在使用 onblur 事件之前已经这样做了。Onblur 监听器在您想要确保保持焦点的任何模式上（onblur 不会在所有浏览器中冒泡，所以这可能很棘手，但可能）。当您的模态框因用户的某些操作而失去焦点时，只需宣布您已强制将焦点重新放在模态框中您希望的任何元素上。从可用性的角度来看，它应该是模态中最后一个具有焦点的对象。请务必明确宣布您已完成此操作，因为这可能会令人不快，尤其是对于非站点用户而言，预计焦点会集中在他们刚刚指示 AT 放置它的位置。

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

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

于 2013-07-22T18:26:54.863 回答