我正在努力寻找语义正确的方式来描述HTML元素，该元素表示获取帮助(例如帮助图标)及其帮助内容的方式。我试着搜索这个主题，但搜索帮助并不是一件容易的事。下面是一个我想做的简单例子(使用一个简单的脚本来显示/隐藏帮助内容，并利用"标题"属性)：
<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)-我正在寻找我的示例的最佳元素表示(如果存在这样的概念)。
根据您的标记，我认为这个问题比您想要的要大。首先，让我们清理一下您的示例，这样就有了适当的语义和结构元素，用户也可以访问这些元素：
<div>
<label for="pwd">Please enter your password</label>
<input type="password" id="pwd">
</div>
这就形成了一个可访问的字段。没有脚本，就没有ARIA。只是一个与字段正确关联的<label>。
现在，您希望为用户提供一些帮助，并且仍然将其与字段相关联。
首先，不要使用锚。这告诉辅助技术的用户，这将使他们离开页面，他们可能不想单击或激活控件。使用<button>。
然后，您可以使用ARIA将该提示与字段相关联。在这种情况下，aria-describedby将与字段一起公布。
您还需要填写alt属性，否则根本不会向屏幕阅读器用户公布您的图像。
在这种情况下，最好使用的ARIA角色是role=tooltip(请参阅ARIA规范中的更多内容)。
以下是一种方法：
<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实践描述中查看工具提示。
然而，在大多数情况下，你最好让你的帮助文本始终可见(尤其是如果你想满足SEO的模糊概念)。在真空中，我会把这段文字放在<label>中，然后就完成了