电子商务搜索框可访问性/导航

Question

我正在寻找构建类似以下内容的内容，但我找不到可访问性和导航方面的最佳实践。

我读了很多文章，发现

aria-autocomplete

与

role="searchbox"

、

aria-owns

、

aria-controls

等很有用。但说实话，我不确定。

在导航方面，决定我应该使用的“正确”流程并不容易。例如，如果输入获得焦点并且按下 ArrowDown，则将焦点集中在第一个产品项（“长达 24 小时红度橡皮擦”）上是有意义的。到达那里后，使用箭头可以导航产品结果。但是，用户如何才能移动到“热门类别”，反之亦然？

(1) 我的第一个方法是这样做，当焦点位于第一个产品结果上并按下 ArrowLeft 时，将焦点移动到左侧面板上的第一个项目（“口红”），然后使用 ArrowDown/ 浏览建议ArrowUp，当“选择”建议时更新右侧的结果。然后，当按下 ArrowRight 时，焦点将移至第一个产品结果。

此外，每当焦点位于第一个产品项或第一个左侧面板建议上并且按下向上箭头时，输入文本就会获得焦点。

(2) 但后来我被要求让组件配置右侧的建议面板，所有导航流程都变得很奇怪，因为现在从第一个结果转移到建议没有任何意义使用箭头的产品项（第一项位于左上角，建议位于第三项的右侧）。

我的问题：

• 使该组件可访问的正确方法是什么？
• 你认为（1）是“正确的”吗？
• 我该如何解决（2）？

Answer 1

听起来你的设计过度了。保持简单并让浏览器尽可能处理键盘焦点。

许多用户不熟悉使用箭头键进行导航。大多数人会尝试使用TAB。如果您的产品是链接 ()，那么它们自然可以通过键盘上的 TAB 键进行聚焦。

您的搜索字段只是简单的文本输入还是在下拉列表中显示搜索建议？如果是后者，那么您应该遵循 combobox 模式，它利用

aria-autocomplete

、

aria-controls

和您提到的其他属性。如果它是一个简单的文本字段，那么您不需要这些属性。

当您在搜索字段中输入内容时，产品列表是否会更新？我在屏幕截图中没有看到任何内容说明有多少结果。如果内容在您键入时更新，这是另一个可访问性考虑因素（WCAG 4.1.3 状态消息）并且需要

aria-live

。

从屏幕截图中的布局来看，我希望从搜索字段按 TAB 到

1. “趋势类别”（假设“口红”是键盘可聚焦元素，例如链接）
2. “建议”（再次假设“reds...”是一个链接）
3. 产品列表

由于您在视觉上看到左侧有建议，因此大多数用户希望在产品之前点击该区域（因为人们期望从左到右点击）。