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-属性吗？（如果是的话，哪个？）

Answer 1

WAI-ARIA和Microformats没有“竞争”：

WAI-ARIA是一个增强网络内容辅助功能的框架。
Microformats是在HTML网页上标记结构化数据的惯例。

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

因此，在您的示例中确定是否需要WAI-ARIA属性aria-label时，请忽略您是否或如何使用Microformat 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不会产生内容的意外后果 less 可以访问！

咏叹调标签，h卡或两者兼而有之？

2 个答案: