1

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

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

4

2 回答 2

3

WAI-ARIA 和 Microformats 不“竞争”：

  • WAI-ARIA是一个增强Web 内容可访问性的框架。

  • 微格式是在 HTML 页面上标记结构化数据的约定。

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

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

于 2015-02-16T05:21:56.360 回答
2

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

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

事实证明，在这种情况下或aria-label正在使用的情况下SPAN，

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

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

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

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

于 2015-02-17T22:05:03.843 回答