用于可访问性测试的 Cypress-axe 插件中的误报

Question

我正在运行使用带有 cypress 和 storybook 的 cypress-axe 插件进行可访问性测试。 cypress-axe 插件在进行所需更改后不断给出误报。

误报是针对 page-has-heading-one 但我在屏幕截图中显然有一个 h1 元素。

False Positive screenshot

赛普拉斯版本：6.1

cypress-axe 版本：0.12.0

这里是相关元素的 html：

<div role="main"class="example-slider">
  <h1 role="banner">Slider</h1>
    <mat-slider 
      min="1"
      max="50"
      step="0.5"
      themePalette="primary"
      id="slide"
      value="1.5"
      aria-label="slider"
      role="contentinfo"
      >
    </mat-slider>
  </div>

如果有人可以提供帮助，请提前致谢。

Answer 1

不是误报。

你给 <h1> 的第二个 role 你改变了它的语义。

role="banner" is effectively the same as <header> in HTML5，因此就计算机和辅助技术而言，您已将 <h1> 更改为 <header> 元素。

从您的 <h1> 中删除 role="banner"，它将按预期工作（并且在语义上是正确的）。

此外，当您整理内容时 <div role="main" 与 <main> 相同，您应该始终尽可能使用语义正确的原生 HTML 元素，因为它们将使您的标记更清洁，他们有更广泛的支持。

用于可访问性测试的 Cypress-axe 插件中的误报

False Positives in Cypress-axe Plugin for Accessibility Testing

accessibility

storybook

cypress