手风琴的“咏叹调角色”应该是什么?在可访问性检查期间,我的手风琴被读取为按钮,这可能会使用户感到困惑

What should be the `aria-role` of an accordion? During accessibility check, my accordions are read as buttons, which may confuse the user

我有一个网页,我也设法在其中保留了一些手风琴。由于我在手风琴上给出了 "role"="button",因此在可访问性测试期间我的手风琴被读取为 'button'。

如果我想让我的手风琴被当作手风琴本身而不是按钮来读取,aria-parameter 值应该是多少?

有人可以提供见解吗?另外,如果有人可以分享可访问性测试标准,那就太好了。

我的建议是:

  • 使用具有 role="presentation" 属性的 dl 元素。
  • dt 元素和 role="heading" 用于手风琴的标题。
  • 将按钮放在 dt 或标题内,以便它可以通过 Tab 键顺序隐式聚焦
  • 赋予按钮“aria-expanded”属性,并在手风琴面板展开时将其设置为 true,否则设置为 false。
  • 将数据放入dd元素

Here you can find more information with example in w3c

对于普通用户来说,按钮是你激活它来让事情发生的东西,而手风琴是一种乐器。你已有的角色都很好

没有咏叹调角色来描述手风琴。

最新的W3C WAI-ARIA 创作实践注释包括 section about accordions which uses buttons which is accompanied by a complete example.

我见过 tablist 角色用于手风琴小部件的示例 -- 这似乎非常合理 (https://www.w3.org/TR/wai-aria-1.1/#tablist)。

无论如何,WAI 在 https://www.w3.org/TR/wai-aria-practices-1.1/#accordion 中不会那样做。相反,他们要求 show/hide 面板的控件是按钮(理想情况下带有 <button> 并且没有明确的角色)并且它们与面板的交互用 aria-expanded、[=13= 描述] 和(取决于实现)aria-disabled。如果您认为内容足够重要,该面板可能是 region。最后,不要忘记让手风琴可以通过键盘访问。