关于 UX&A11y 的 12 月 3 个简短开发技巧

嘿伙计们！

我想谈谈如何帮助有视力障碍的用户找到搜索，当我们集中精力工作时的主要和附加目标，内容如何伪装。

但在开始阅读之前，我在我的 Substack 简报里留下了关于用户体验和 a11y 技巧的链接。你知道该怎么做了😎

另外，非常感谢我的赞助商：Ben Rinehart、Sergio Kagiema、Jesse Willard、Tanya Ten、Konstantinos Kapenekakis。没有他们的支持，我不可能写出这篇文章。

我们走吧！

帮助视力障碍的用户找到搜索

通常我们知道如何为没有视力障碍的用户进行搜索。但是对于有视力障碍的用户，我们该如何做到这一点呢？

WAI-ARIA 标准中有一个特殊的搜索角色，我们应该将其添加到表单元素中。这样，屏幕阅读器将开始以用户用于导航的“区域列表”模式显示搜索。

请注意，如果不这样做，搜索结果将不会在此模式下显示。因此，这会妨碍用户与搜索的互动。他们将不得不使用常用关键词进行搜索。这比使用“区域列表”模式要耗时得多。

当我们专注工作时，思考一个主要目标和一个附加目标

您是否有时会想过，当用户打开诸如模态框或对话框之类的元素时，如何更好地移动焦点？

我认为，当我们专注于焦点时，会有一个主要目标和一个附加目标。主要目标是用户在转移焦点后想要做什么，以便用最少的操作实现他们的目标。附加目标是他们还能做什么其他事情。

让我们以 Booking 网站上选择语言为例，来思考一下我的意思。如果我们点击选择语言的按钮，就会看到包含多种语言的模态框。

焦点将移到关闭按钮上。按回车键关闭模态窗口真是太棒了。但这难道不是我们打开模态窗口的目的吗？不，我们想选择一种语言。这才是主要目的。关闭模态窗口是另一个目的。

现在我们来看看 Booking 是如何选择语言的。如果我们只使用键盘，就必须使用 Tab、↑ 或 ↓ 键来切换语言。

然后我们重复按相同的键，直到找到所需的选项。按下回车键，我们就能选择一种语言。嗯，这是一个不错的解决方案，但我想建议另一个。

我们已经发现用户打开模态框是因为他们想要选择语言。这是主要目标。所以我们应该把这个功能提供给他们。我认为如果我们把焦点转移到当前语言上，就能做到这一点。

然后，我们应该立即实现使用 Tab、↑、→、↓ 或 ← 键在语言之间切换的功能。语言的选择将使用 Enter 键。此外，我们还保留了像 Booking 那样使用 Esc 键关闭模式的功能。

我希望我能够传达出在专注工作时定义主要目标和附加目标的重要性。请认真思考这一点，你的界面将会更加友好。

你们帮助内容进行伪装吗？

各位，我们来看看 ASOS 的主页吧。页面加载的时候，你看到文字和按钮了吗？🤔

确实有！只是它们伪装了一下😄让我们用 CSS background-color 属性添加一个高对比度的背景，就能看到它们了 🙂