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

Question

我试图找到语义上正确的方式来描述 HTML 元素，该元素表示获取帮助的方式（例如帮助图标）及其帮助内容。我试图搜索此主题，但在帮助中搜索帮助并非易事。这是我的想法的一个简单示例（使用简单脚本 show/hide 帮助内容以及利用 "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 友好的方式来描述 "toggleable help content".

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

Answer 1

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

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

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

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

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

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

您还需要填写 alt 属性，否则您的图片根本不会显示给屏幕 reader 用户。

在此上下文中使用的最佳 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)，但这很草率。您可以使用脚本在使用类似 CSS 的 button 上切换 class，然后显示 span.

您可以将文本放入 <label> 并使用 CSS off-screen 技术将其隐藏，这意味着它将始终在 reader 屏幕上显示并且然后你可以转储 aria-describedby.

坦率地说，您可以通过几种不同的方式对其进行换肤。在 ARIA Practices description for a tooltip.

查看您必须考虑的键盘交互

但是，在大多数情况下，您最好让帮助文本始终可见（尤其是如果您想要满足模糊的 SEO 概念）。在真空中，我只是将此文本放入 <label> 并完成它。

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

Is there a semantic way in HTML5 and WAI-ARIA to describe "Toggleable Help Content"?

html

seo

semantic-markup

wai-aria