Voice over Accessibility - Avoid saying button as banner used inside header

Question

I need help with the accessibility issue. when the buttons are used inside the header and when I navigate to button from dropdown item voice-over says save button banner. Here I need to get rid of the banner. Any ideas, please?

 <header>
  <img src="companylogo.svg" alt="my company name" />
  <h1>Title</h1>
  <p>Subtitle</p>
  <button role="button">
  My button
  </button>
  <label for="cars">Choose a car:</label>

<select name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
</header>                        

Answer 1

There is nothing you need to do here as it is expected behaviour.

A "banner" is the older name for <header> so it is just telling you that the button is located within the banner landmark.

Using <header> is effectively the same as pre html5 where you would use role="banner" so that is why it is announced like this.

You can change screen reader settings to be less verbose, but that is a personal choice not a markup one!