html - HTML5 和 WAI-ARIA 中是否有语义方式来描述 "Toggleable Help Content"？

Question

我试图找到语义上正确的方式来描述代表获取帮助(例如帮助图标)及其帮助内容的方式的 HTML 元素。我试图搜索此主题，但在帮助中搜索帮助并非易事。这是我的想法的一个简单示例(使用一个简单的脚本来显示/隐藏帮助内容以及利用“title”属性):

<div>
    Please enter your password 
    <a class="help" title="Your password must have 5 characters">
        <img src="/images/help.svg" alt="">
    </a>
    <span class="helpText displayNone">
        Your password must have 5 characters.
    </span>
    <input type="password>
</div>

有没有更好的方式来表示这个(以这种格式)。这个想法是用一种可访问且 SEO 友好的方式来描述“可切换的帮助内容”。

问题是关于 HTML/HTML5 和 WAI-ARIA 属性(不是 JavaScript)——我正在寻找我的示例的最佳元素表示(如果这样的概念存在)。

Answer 1

根据您的标记，我认为这个问题比您预期的要大。首先让我们清理您的示例，以便有适当的语义和结构元素，也使用户可以访问它:

<div>
  <label for="pwd">Please enter your password</label>
  <input type="password" id="pwd">
</div>

这构成了一个可访问的字段。没有脚本，没有 ARIA。只是一个<label>与该字段正确关联。

现在您想为用户提供一些帮助，但仍将其与该字段相关联。

首先，不要使用 anchor 。这告诉辅助技术的用户，它将把他们带离页面，他们可能不想单击或激活控件。使用 <button> .

然后您可以使用 ARIA 将该提示与字段相关联。在这种情况下 aria-describedby将与现场一起公布。

您还需要填写 alt属性，否则您的图像根本不会向屏幕阅读器用户公布。

在此上下文中使用的最佳 ARIA 角色是 role=tooltip (read more in the ARIA spec)。

这是您可以采用的一种方法:

<div>
  <label for="pwd">Please enter your password</label>
  <button><img src="/images/help.svg" alt="Help"></button>
  <span id="pwd-tip" role="tooltip">Your password must have 5 characters.</span>
  <input type="password" id="pwd" aria-describedby="pwd-tip">
</div>

如果必须避免使用脚本，您可以使用 CSS 来确定按钮是否具有焦点并显示以下同级范围 (button:focus + span)，但那样很草率。您可以使用脚本在 button 上切换一个类它使用类似的 CSS 来显示 span .

您可以将文本放入<label>并使用 CSS 屏幕外技术隐藏它，这意味着它将始终向屏幕阅读器宣布，然后您可以转储 aria-describedby .

坦率地说，您可以通过几种不同的方式为它设置外观。在 ARIA Practices description for a tooltip 查看您必须考虑的键盘交互.

但是，在大多数情况下，最好让帮助文本始终可见(尤其是如果您想满足 SEO 的模糊概念)。在真空中，我会把这段文字放在 <label> 中并完成它。