试图了解 aria 和可访问性

Question

我正在更新网站，对可访问性进行迭代改进。

我正在使用多种工具来改善页面：FireFox 的 accessibility 树查看器； Chrome 的 lighthouse 检查器； “wave”辅助工具，我正在尝试 tenon.io （遗憾的是，我无法访问像样的屏幕 reader - nvda 太快了，我听不见，orca 似乎可以读取当前行，而且我无法访问 JAWS）

这就是我所拥有的：

我有这样的导航结构：

  <nav aria-label="Main navigation">
    <section class="desktop-navigation" aria-label="Main Menu">
      <ul aria-label="Menu items">
        <li><a href="/" aria-label="Return to the home page to read about Example">About Example</a></li>
        <li><a href="/documentation/" aria-label="Service Documentation">Documentation</a></li>
        <li><a href="/pricing/" aria-label="Subscription pricing">Pricing</a></li>
        <li><a href="https://example.statuspage.io" aria-label="Example Status" rel="external">Status</a></li>
        <li><a href="/contact-us/" aria-label="Example contact us form">Contact us</a></li>
      </ul>
    </section>

    <section class="main-nav-wrapper" aria-label="Header logos">
      <a href="/"><img src="/images/logo_example.svg?v=488a8c6971df396baaa401bb073b4a6b"
         class="header-logo" alt="The Example logo" aria-label="Example Logo"/></a>
        <div class="site-logos-right" aria-label="Corporate Logos">
          <a class="external-link" href="https://www.example.com/" rel="external"><img
             src="/images/logo_company.svg?v=98693292e027eca1f27cfc89b68a77d2" class="company-logo"
             aria-label="The Company logo" alt="Official logo for Company"/></a>
          <a class="external-link" href="https://example.com/department"
             rel="external"><img src="/images/logo_department.svg?v=ff0114bb2ebf7eff339341f9554220d0"
                 class="edina-logo" alt="Official Department logo" aria-label="department logo" /></a>
        </div>
    </section>
  </nav>

..... 根据 lighthouse，这是 100%，但是 tenon.io 报告了一个问题（多次），我不明白 为什么:

This element uses multiple strategies to create labels

This element has more than one possible label. The manner in which the accessible name is calculated for controls uses an algorithm in which only one of these labelling approaches will win. This means one of these labels will be ignored by assistive technologies. There should be only one label provided and the others should be removed.

确定的项目示例：

<nav role="navigation" aria-label="Main navigation">
    <section class="desktop-navigation" aria-label="Main Menu">
      <ul aria-label="Menu items">
        <li><a href="/" aria-label="Return to the home page to read about

（我注意到 W3C 站点没有标记 uls - 但它们在 firefox 中显示为未命名元素）

我绝对想标记地标和路段....那么 实际上 抱怨什么？

<li><a href="/pricing/" aria-label="Subscription pricing">Pricing</a></li>

... 这是我想要为元素添加更具描述性标签的示例 - 在扫描可访问性树时，只需要 [=55] =]-文本（对我而言）阅读起来并没有一些上下文：作为一个有视力的用户，我知道我的眼睛已经扫过了页面的大部分内容，并且看到了额外的文本，所以下意识地对菜单项有一些上下文.

我的问题

无障碍标签是如何计算的？

为什么我不能在 link 上添加更具描述性的标签？（如果替代文本不包含 link 文本，lighthouse 会抱怨...但如果它超过 link 文本，则很高兴）- 或者这是 tenon.io挑剔？

Answer 1

accessible name computation 是计算无障碍标签的方式。

您使用 aria-label 太多，使用辅助技术的人类访问者可能难以听清结果或完全混淆。

first rule of ARIA 除非你真的必须，否则不要使用 ARIA。

在<nav>和<section>元素上使用aria-label比较合适。保留那个。
我想不出有什么好的理由在 <ul> 元素上使用 aria-label。我建议删除它。
在锚元素上使用 aria-label 通常是不必要的，应谨慎使用。除非您有真正充分的理由，否则您可能不应该使用辅助技术向访问者展示不同的内容。
我还建议从您的图像中删除 aria-label。这正是替代文本的用途。

如果你真的想在锚元素上使用 aria-label，WCAG 有一些指导：

Per the Accessible Name and Description Computation and the HTML to Platform Accessibility APIs Implementation Guide, the aria-label text will override the text supplied within the link. As such the text supplied will be used instead of the link text by AT. Due to this it is recommended to start the text used in aria-label with the text used within the link. This will allow consistent communication between users.

https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA8.html#description

暂时不要放弃 NVDA。我还发现默认语音设置太快且难以理解。您只需要调整设置即可。声音也可以换成更好的声音。配置需要一些工作，但我认为 NVDA 是当今可用的最好的免费屏幕 reader。如果您可以访问 Mac/iOS 产品，VoiceOver 也非常好用。

试图了解 aria 和可访问性

Trying to understand aria and accessibility

accessibility

wai-aria