Question

我是否需要将焦点移到之前隐藏的位置，但是点击/触摸链接显示div？我将通过以下示例解释它：

HTML：

<a href="javascript:void(0)">content</a>
<div>blablabla</div>

CSS：

div {
  display:none;
  width: 500px;
  height:200px;
  line-height: 200px;
  background: #007;
  color: #fff;
  text-align: center;
}
.block {
  display:block;
}
a:focus {
  border: 2px solid red;
}

jQuery的：

$(function () {
    $("a").on("click touchstart", function () {
    $("div").addClass("block");
  });
});

正如您所看到的，点击时焦点仍保留在链接上。我是否真的需要将焦点移除到显示的div？如果是这样，我应该tabindex吗？很高兴看到你的任何例子（当然不一定），所以它应该更清楚如何完成。

Answer 1

对话模式

https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal

当对话框打开时，焦点通常设置在第一个可聚焦元素上。

当对话框关闭时，焦点将返回到在调用对话框之前具有焦点的元素。这通常是打开对话框的控件。

第一个可聚焦元素通常是关闭按钮。有时它是对话框的标题，取决于您选择如何编码和用户测试。

Disclosure Widget

这在很大程度上取决于内容的性质。

如果您像菜单按钮一样使用它，请阅读：https://www.w3.org/TR/wai-aria-practices-1.1/#menubutton
如果您像手风琴一样使用它，请阅读：https://www.w3.org/TR/wai-aria-practices-1.1/#accordion
如果只是隐藏一些屏幕阅读器无法隐藏的内容，那么您可能根本不需要管理焦点。
如果它显示屏幕阅读器隐藏的内容，那么您可能需要在其上放置aria-expanded并相应地更改其值，并且可能根本不会移动焦点。
< / LI>
如果它打开的内容将交互式控件作为此窗口小部件的主要用途，那么您可能需要将焦点放在第一个交互式控件上。

换句话说，这取决于。这就是为什么看到现场例子对提供良好指导非常重要的原因。

我可以告诉您，从我看到的内容您需要将<a href="javascript:void(0)">content</a>更改为<button>content</button>，因为它不会将用户带到新页面。简而言之，如果您的href属性不是新的URL（或页面上的有效命名锚点），那么它可能根本不应该是<a href>。如果我无法右键单击并在新标签页中打开，则它不应该是<a href>。

专注于揭示（以前隐藏）的div - 什么是正确的方式

1 个答案:

对话模式

Disclosure Widget