html - 移动设备上可点击的 H3 按钮 : How to Handle Accessibility

Question

我有一系列 <h3>在我网站的页脚中带有链接列表的标题。在移动设备上，链接会折叠，用户可以点击 <h3>。展开列表。

我想知道使用以下内容是否合适:

<h3><button>Section Title</button></h3>

这些标题在大屏幕设备上不能用作按钮。这个可以用吗？我该如何处理？

谢谢

Answer 1

是的，这是合适的。

• HTML 允许标题中包含按钮元素。
• 标题应该用来标记标题内容
• 按钮应该用于标记交互式控件
• 关于在 HTML 中使用 ARIA 的(当前草案)注释包括 an example of this (感谢 Vecta 发现了这一点)

在我看来，唯一的症结在于您的内容有条件地根据屏幕尺寸进行交互。

您可能希望通过使用 JavaScript 根据窗口大小使用按钮动态包装(和解包)标题内容来解决这个问题。 (由于交互性首先取决于 JS 的功能，因此不应引入任何支持问题)。