学习密度与专注力_学习专注

最新推荐文章于 2025-05-16 10:30:01 发布

dingshi7798

最新推荐文章于 2025-05-16 10:30:01 发布

阅读量123

点赞数

文章标签： java python css javascript 设计模式 ViewUI

原文链接：https://www.sitepoint.com/learning-to-focus/

版权

学习密度与专注力

多亏了好运，我的双眼看上去很正常。当遍历网页时，这是一个福音，因为将我的焦点从页面的一部分转移到另一部分只需要半自觉地收缩眼外肌并旋转眼球圆周的一小部分。

尽管现在可以说我的视觉（以及因此的认知）焦点发生了变化，但是用户界面本身并不知道我的注意力已经转向了。至少直到我开始与新检查过的区域进行物理交互时为止。换句话说，转动眼球是一个未记录的事件。

这是一个非常普遍但经常无法解决的可访问性问题：如果我不用眼睛（和鼠标指向），如何“专注于”某事物以便与之交互？我确定您知道答案是通过程序化焦点。但是，这不只是将“可聚焦”元素整合到我们的设计中那么简单。有时，必须由用户而是代表用户的界面在不同区域之间转移焦点。这要求开发人员进行有针对性的重点管理。

为了实现可访问性，即使在最简单JavaScript驱动的交互式小部件中，管理焦点也是必不可少的，但是使用自动化质量检查工具几乎无法测试正确的用法。这就是为什么我今天想带您看几个简单的例子。

ScrollTop动画

在此示例中，我邀请您想象您已“增强”了同一页的导航链接，以便通过JavaScript轻松地将您引到该目标，而不是突然跳转到链接的目标片段（假设是#section1 ） scrollTop动画。使用此技术时，有关可访问性的重要注意事项是必须覆盖<a>元素的默认功能。

event.preventDefault();

通过这样做，您是在告诉浏览器不惜一切代价避免执行任何标准的，预期的或可互操作的操作。您告诉链接不链接。实际上，确定链接实际上将用户正确地带到页面片段的唯一方法是关闭JavaScript。好吧。

通过简单地链接到页面片段（就像关闭JavaScript一样），浏览器实际上将重点放在该片段上。这是屏幕阅读器输出和键盘交互的基础。通过对scrollTop动画，不会发生任何此类聚焦操作，这意味着屏幕阅读器输出和键盘交互将从不再可见的页面区域继续。不好

补救措施

我们需要通过JavaScript聚焦目标片段。首先，我们首先需要使片段以编程方式可聚焦，这需要使用tabindex属性。 tabindex值为-1是一个特殊值，这意味着脚本可以使元素（而不是用户）聚焦。在这种情况下，它比tabindex: 0更可取，因为没有理由不使用TAB键使该非交互式元素可聚焦。

注意：感谢Patrick和其他人在评论中指出了这样的事实，即它应将tabindex值使用“ -1”而不是“ 0”，我们现已对其进行了更正。

<section id="section1" tabindex="-1">
    ...
</section>

我们的第二个任务是在动画的回调中包括JavaScript focus()方法，以确保片段在动画结束后被聚焦。

document.getElementById('section1').focus();

最后，最好在URL中记录子页面的位置，就像通过简单地链接到片段（例如http://my-site/#section1 ）那样。这样，我们就可以将地址复制为指向特定部分的链接（即，我们可以“深层链接”）。在focus()发生之后添加以下行：

window.location.hash = 'section1';

当然，您可以根据相应链接的href减去#用变量替换“ section1”。

<a href="#whatever">scroll to section 'whatever'</a>

结果

下面嵌入了一些CodePen演示。尝试仅使用TAB和SHIFT + TAB来使用它，就像惯常的键盘用户一样。

请参阅CodePen上的SitePoint（ @SitePoint ）提供的Pen idxjL 。

请注意，我们正在JavaScript中动态添加tabindex属性。现在，我们将焦点集中在要滚动到的部分（片段）上，我们所感知的位置不仅仅是视觉上的。也就是说，如果我在移到新部分后按TAB键，则将在该部分中的下一个可聚焦元素上进行聚焦；在以下示例中，超链接显示为“ heydonworks.com”。

<section id="section1" tabindex="-1">
   <p>Donec a congue leo? Fusce ac sodales magna. Aliquam nisl enim… tristique tempus placerat at, <a href="http://heydonworks.com">heydonworks.com</a> posuere in lectus. Curabitur consectetur faucibus nisl ac varius.</p>
</section>

如果我们不聚焦于section1 ，那么按下TAB键将聚焦于激励链接之后的下一个元素，这将使视口跳回到我们的导航块。换句话说，键盘用户将回到第一位。

<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a> <!-- not where we want to be -->

这是另一个小例子。假设用户按下<button>并打开了一个对话框或模式窗口。出于争论的考虑，此对话框要求用户确认或取消由按钮指示的可能的操作。

为了使打开此按钮可用，我们应该以与上一个示例集中页面片段相同的方式对对话框进行focus()设置。使用jQueryUI，对话框的第一个按钮（在我们的例子中为“ confirm”）将得到关注。其他实现着眼于对话框容器。无论哪种方式，都会以编程方式将用户发送到正确的位置 。

$('dialog button:first-of-type').focus();

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

问题是，“对话框关闭时会发生什么变化？” 如果我们不采取任何措施，那么新近隐藏的对话框必然会失去焦点，但是什么也不会取代。在许多用户代理中，这意味着<body>在默认情况下会处于焦点状态，从而使用户需要仔细阅读文档才能再次找到自己的位置。

重新聚焦打开对话框的元素将更加合乎逻辑。只需将DOM节点保存在内存中或在其上写一个标记以供以后使用就可以轻松实现，如下所示：

$(this).attr('data-dialog-trigger', true);

在对话框的close()方法末尾，我们将只关注原始元素：

$('[data-dialog-trigger]').focus();

大多数屏幕阅读器在按钮重新聚焦后会先声明页面标题，然后是聚焦的按钮。这样，您就知道自己在哪里。如果需要，可以使用使用此方法的对话框示例进行测试。

结论

将渐进式增强功能与可访问性相结合是一个常见的错误；认为确保某些东西降级到无法使用JavaScript（在这种情况下会如此）意味着这是“可访问的”。当然，它使没有JavaScript的人也可以使用它，但是大多数键盘和屏幕阅读器用户都像其他任何人一样在JavaScript的帮助下与您的应用程序进行交互。诀窍是使用JavaScript时要尊重所有用户以及他们可能使用的任何辅助技术的不同行为和输入。

还有一件事：如果您曾经负责使用Ember.js或AngularJS构建的一页应用程序，请grep JavaScript focus()方法的代码库。这些应用程序完全使用“视图”重写导航；动态重建单个页面。如果没有一些仔细的焦点管理，以这种方式重建DOM可能会很快使可访问性恶化。如果您的grep发现少于几个.focus实例，则可能有很多工作要做。