Question

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

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

Answer 1

如果您使用input image button，请使用其alt attribute：

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

如果您使用button img，请使用img的{{3}}：

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

如果您使用alt attribute img，请使用img的{{1}}属性：
```
alt
```
如果您要通过CSS（而不是HTML）添加图标，则应在HTML中包含文本标签，并使用CSS直观地隐藏它。

为了便于使用，您可以考虑同时使用图标和文字。但这可以在a讨论。例如，请参阅问题“User Experience SE”。

要决定使用哪个<a href="/account.html"><img src="account-icon.png" alt="Your account"></a>文字，请参阅问题“When to use icons vs. icons with text vs. just text links?”的my answer。您What should the ALT text be for an image that is also a link?用于指定替代文字。

Answer 2

因此，如果它是一个图标按钮，我在CodePen上有一个示例：A super accessible button with tooltip

这是我使用的标记：

<button type="button" class="button"> 
  <span class="button-icon" aria-hidden="true" data-icon="&#x78;"></span>
  <span class="button-text"><strong>Navigation menu</strong></span>
</button>

您可以使用css隐藏文本内容，并使其在悬停/焦点上可见。有关CSS的更多deatail，请参阅示例。

以下列出了此方法实现可访问性的方法：

是原生<button>，因此继承：
- 鼠标＆amp;键盘（输入和空格）可点击性
- 键盘可憎性
- 宣布为屏幕阅读器的按钮
CSS为非视觉网络浏览器注入图标
为屏幕阅读器隐藏图标
为屏幕阅读器使用隐藏文字
通过屏幕外的z-index -1 insead隐藏文本，使其可以使用VoiceOver屏幕阅读器轻松使用
在悬停和焦点上将文本显示为工具提示
工具提示在鼠标悬停或稍微外露时不会消失。这使得文本可以完全缩放阅读。

Answer 3

您可以添加按钮文字并以可视方式隐藏ID，也可以在图标中添加alt属性（如果它是img）。在我看来，后者甚至更好。

Answer 4

以下文章提供了有关使用ARIA增强SVG可访问性的信息：Using ARIA to enhance SVG accessibility。它的日期为2013年，包含几个兼容性图表以及以下具有最佳可访问性的代码段：

<svg xmlns=http://www.w3.org/2000/svg role="img" aria-labelledby="title desc">
  <title id="title">Circle</title>
  <desc id="desc">Large red circle with a black border</desc>
  <circle role="presentation" cy="60" r="55" stroke="black" stroke-width="2" fill="red" />
</svg>

将其放在button内，您应该得到广泛的支持。当然，既然SVG2.0已着陆，ARIA usage可能会稍有变化。

如果使用CSS ::after放置图标，则您的按钮可能看起来像这样：

<button></button>

在这种情况下，您可以这样做并完全跳过ARIA：

<button>the label</button>

否则，以下方法可以解决问题：

<button aria-label="the label"></button>

这是SVG Accessibility API Mappings（自2019年1月起草稿），它映射了SVG如何与可访问性API结合使用，如果您想获得更多的技术知识。

尽管只要将title插入SVG内，由于显而易见，它现在可能会起作用。

Answer 5

为此使用Trusted Root Certificates。示例：

aria-label

来自MDN：

aria-label属性用于定义标记当前元素的字符串。如果文本标签在屏幕上不可见，请使用它。如果有可见的文本标记了元素，请改用aria-labelledby。

什么是标记仅内容为图标的按钮的可访问方式？

5 个答案: