手风琴的“咏叹调角色”应该是什么?在可访问性检查期间,我的手风琴被读取为按钮,这可能会使用户感到困惑
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
元素
对于普通用户来说,按钮是你激活它来让事情发生的东西,而手风琴是一种乐器。你已有的角色都很好
没有咏叹调角色来描述手风琴。
最新的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
。最后,不要忘记让手风琴可以通过键盘访问。
我有一个网页,我也设法在其中保留了一些手风琴。由于我在手风琴上给出了 "role"="button"
,因此在可访问性测试期间我的手风琴被读取为 'button'。
如果我想让我的手风琴被当作手风琴本身而不是按钮来读取,aria-parameter 值应该是多少?
有人可以提供见解吗?另外,如果有人可以分享可访问性测试标准,那就太好了。
我的建议是:
- 使用具有
role="presentation"
属性的dl
元素。 - 将
dt
元素和role="heading"
用于手风琴的标题。 - 将按钮放在
dt
或标题内,以便它可以通过 Tab 键顺序隐式聚焦 - 赋予按钮“aria-expanded”属性,并在手风琴面板展开时将其设置为 true,否则设置为 false。
- 将数据放入
dd
元素
对于普通用户来说,按钮是你激活它来让事情发生的东西,而手风琴是一种乐器。你已有的角色都很好
没有咏叹调角色来描述手风琴。
最新的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
。最后,不要忘记让手风琴可以通过键盘访问。