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

Posted 2023-03-14

【中文标题】手风琴的“咏叹调角色”应该是啥？在可访问性检查期间，我的手风琴被读取为按钮，这可能会使用户感到困惑

【英文标题】：What should be the `aria-role` of an accordion? During accessibility check, my accordions are read as buttons, which may confuse the user手风琴的“咏叹调角色”应该是什么？在可访问性检查期间，我的手风琴被读取为按钮，这可能会使用户感到困惑

【发布时间】：2019-04-30 01:32:55

【问题描述】：

我有一个网页，我也设法在其中保留了一些手风琴。因为我在手风琴上给出了"role"="button"，所以在可访问性测试期间我的手风琴被读作“按钮”。

如果我想让手风琴本身而不是按钮被读取，那么 aria-parameter 值应该是多少？

有人可以提供见解吗？此外，如果任何人都可以分享可访问性测试标准，那就太好了。

【参考方案1】：

我的建议是：

使用带有role="presentation" 属性的dl 元素。 使用dt 元素和role="heading" 作为手风琴标题。 将按钮放在dt 或标题中，这样它就可以通过tab 顺序隐式聚焦 给按钮 `aria-expanded' 属性并在手风琴面板展开时将其设置为 true，否则设置为 false。 将数据放入dd元素中

Here you can find more information with example in w3c

【讨论】：

对于手风琴小部件角色是 role="presentation"。 — 错误，不，不是真的。这意味着“忽略此元素的正常语义，它仅用于演示”。它没有添加“这是一架手风琴”的意思。

@Quentin 那是基于w3c best practice，他可以使用aria-label="accordion some other label"，而bootstrap是使用role='tablist', There is no specific role`进行手风琴

我知道你从哪里得到的信息。我在批评你对它的解释。使用aria-label 将某些东西描述为手风琴（这是行业术语）是一个糟糕的主意，除非该网站针对的是 UX 专业人士。无论如何，在这种情况下使用aria-label 是一个非常糟糕的主意，它在没有可见标签的情况下使用（例如，当您有一个仅用图标描述的按钮时）。我想不出任何适合在手风琴上使用的情况。

@昆汀。是的，你是对的。我的观点是没有咏叹调角色来描述手风琴

【参考方案2】：

对于普通用户而言，按钮是您激活以使某些事情发生的东西，而手风琴是一种乐器。你已经拥有的角色都很好。

没有咏叹调角色可以将某物描述为手风琴。

最新的 W3C WAI-ARIA 创作实践说明包括一个section about accordions，它使用带有a complete example 的按钮。

【讨论】：

既然我们现在针对的是残疾客户，将手风琴作为按钮阅读是向他们传达错误信息的东西，不是吗？处理这种情况的理想方法是什么？你有什么想法吗？

@ArunRamachandran — 它没有将手风琴作为按钮传递。它将按钮（使某些内容可见）作为按钮传递。

高度怀疑任何客户都知道什么是“手风琴”模式，因此拥有某种标签（无论是可见的还是仅用于屏幕阅读器）都没有帮助。一个习惯可能熟悉选择某些东西并让它导致其他东西出现或隐藏（展开或折叠）。这是您应该公开的信息，并使用@Quentin 发布的手风琴创作实践参考中提到的aria-expanded 完成。

【参考方案3】：

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

无论如何，WAI 不会在https://www.w3.org/TR/wai-aria-practices-1.1/#accordion 中这样做。相反，他们要求显示/隐藏面板的控件是按钮（最好使用<button>s 并且没有明确的角色），并且它们与面板的交互使用aria-expanded、aria-controls 和（取决于实现）@ 描述987654327@。如果您认为内容足够重要，该面板可能是region。最后，别忘了让手风琴可以通过键盘访问。