False Positives in Cypress-axe Plugin for Accessibility Testing

Question

I am running accessibility testing using the cypress-axe plugin with cypress and storybook. The cypress-axe plugin continually gives false positives when having made the required changes.

The false positive is for page-has-heading-one but I clearly have a h1 element present in the screenshot.

False Positive screenshot

Cypress version: 6.1

cypress-axe version: 0.12.0

Here's the html for the element in question:

<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>

Thank you ahead of time if anyone can help with this.

Answer 1

Not a false positive.

The second you gave the <h1> a role you changed it's semantic meaning.

role="banner" is effectively the same as <header> in HTML5, so you have changed your <h1> into a <header> element as far as a computer and assistive technology is concerned.

Remove that role="banner" from your <h1> and it will work as expected (and be semantically correct).

Also while you are tidying things up <div role="main" is the same as <main>, you should always try to use semantically correct native HTML elements where you can as they will make your mark-up cleaner and they have wider support.