accessibility - 尝试了解 aria 和可访问性

Question

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

我使用多种工具来使页面变得更好:FireFox 的accessibility 树查看器； Chrome 的 lighthouse 检查器； “wave”辅助工具，我正在尝试 tenon.io (遗憾的是，我无法使用像样的屏幕阅读器 - 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 网站没有标记 ul - 但随后它们在 Firefox 中显示为未命名元素)

我绝对想标记地标和部分......那么它实际上提示什么呢？

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

....这是我想要为元素提供更具描述性标签的示例 - 在扫描可访问性树时，仅使用裸露的链接文本是不行的(我)阅读并了解一些上下文:作为一个有视力的用户，我知道我的眼睛已经浏览过页面的大部分内容，并看到了其他文本，因此下意识地为菜单项提供了一些上下文。

我的问题

辅助功能标签是如何计算的？

为什么我不能在链接上添加更具描述性的标签？ (如果替代文本不包含链接文本，lighthouse 会提示...但如果它比链接文本多，它会很高兴) - 还是这个 tenon.io 过于挑剔？

Answer 1

accessible name computation这是可访问性标签的计算方式。

您正在使用aria-label太多，结果可能很难听，或者让使用辅助技术的人类访客完全感到困惑。

first rule of ARIA除非确实必要，否则不要使用 ARIA。

• 使用 aria-label 比较合适。关于<nav>和<section>元素。保留这一点。

• 我想不出任何使用 aria-label 的好理由。在<ul>上元素。我建议删除它。

• 使用 aria-label在 anchor 固元件上通常是不必要的，应谨慎对待。除非您有真正充分的理由，否则您可能不应该使用辅助技术向访问者呈现不同的内容。

• 我还建议删除 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 是当今最好的免费屏幕阅读器。如果您可以使用 Mac/iOS 产品，VoiceOver 也非常好用。