什么是标记唯一内容是图标的按钮的可访问方法？

Question

我正在实施的设计有一个通用的“帐户”按钮，其唯一内容是用户图标（和一个小的下拉图标）。

向按钮（“您的帐户”）添加标题属性是否足够，或者我应该在按钮内添加文本，我只是在视觉上隐藏（同时保持屏幕阅读器可以访问），还是两者兼而有之？

Answer 1

• 如果您使用的是input图像按钮，请使用其alt属性：

  <input type="image" src="account-icon.png" alt="Your account">
  

• 如果您使用buttonwith img，请使用img'salt属性：

  <button type="button"><img src="account-icon.png" alt="Your account"></button>
  

• 如果您使用awith img，请使用img'salt属性：

  <a href="/account.html"><img src="account-icon.png" alt="Your account"></a>
  

• 如果您通过 CSS（而不是 HTML）添加图标，您应该在 HTML 中包含一个文本标签，并使用 CSS 在视觉上隐藏它。

为了可用性，您可以考虑同时使用图标和文本。但这可能会在User Experience SE 中讨论。例如，请参阅问题“何时使用图标、何时使用带有文本的图标与仅使用文本链接？ ”。

要决定alt使用哪个文本，请参阅我对问题“对于同时也是链接的图像，ALT 文本应该是什么？ ”的回答。您不应使用该title属性来指定替代文本。