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 和微格式没有 "compete":

WAI-ARIA 是一个框架，可以增强您的网络内容的可访问性。
Microformats 是在 HTML 页面上标记 结构化数据 的约定。

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

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

Answer 2

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

As spec'd，aria-label 值（如果存在）用于代替元素内容（稍微简化）；但在实践中，行为因元素类型和使用的特定 screenreader/browser 而异；

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

Mac 上的 VoiceOver 读出标签而不是内容
Windows 上的 NVDA 和 JAWS 完全忽略 aria-label 并只读出 div/span 内容。（此行为可能会在这些工具的某些未来更新中改变...）

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

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

aria-label、h-card 或两者？

aria-label, h-card, or both?

microformats

hcard

wai-aria