aria-label、h-card，还是两者兼而有之？

Question

使用 h-card 时是否需要 aria-label 属性（这是用于页脚中的公司联系信息）？

<div class="h-card">
  <a class="u-url" href="http://example.com">
    <img src="http://example.com/static/logo.svg" alt="Example Logo">
    <span class="p-name sr-only">Example Corp.</span>
  </a>
  <div aria-label="Address" class="p-adr h-adr">
    <span class="p-locality">Eugene</span>
    <span class="p-region">OR</span>
    <span class="p-postal-code">97403</span>
  </div>
  <a aria-label="Telephone" class="p-tel" href="tel:12345678">(12) 345-678</a>
</div> 

这里的 aria-labels 是多余的还是它们提供了一些价值？应该有更详细的aria- 属性吗？ （如果是，是哪个？）

Answer 1

WAI-ARIA 和微格式不“竞争”：

• WAI-ARIA 是一个框架，用于增强您的网络内容的可访问性。

• Microformats 是在 HTML 页面上标记结构化数据的惯例。

他们有不同的目标，WAI-ARIA 的消费者不一定支持 Microformats，Microformats 的消费者也不一定支持 WAI-ARIA。

因此，当您决定在示例中是否需要 WAI-ARIA 属性 aria-label 时，请忽略是否或如何使用微格式 h-card，反之亦然。他们不互相交流。

Answer 2

这里最好不要使用aria-label；在最坏的情况下，屏幕阅读器最终会读出 aria-label 而不是您的内容，使其不易访问。

As spec'd，aria-label 值（如果存在）用于代替元素内容（有点简化）；但实际上，行为因元素类型和使用的特定屏幕阅读器/浏览器而异；

事实证明，如果aria-label 被用于SPAN，

• Mac 上的 VoiceOver 会读出标签而不是内容

• Windows 上的 NVDA 和 JAWS 完全忽略 aria-label 并只读出 div/span 内容。 （这种行为可能会在未来对这些工具的更新中发生变化……）

所以充其量，它被忽略了；在最坏的情况下，它会替换您的实际内容。最好不要在你的情况下使用它。

如果小心使用，ARIA 会非常有用；但是浏览器兼容性问题意味着不幸的是它充满了陷阱；如果您打算使用它，建议您查看规格，并确保您使用真实的屏幕阅读器进行测试，这样您就可以确保使用 aria 不会产生使您的内容更少的意外后果 可访问！