CODEWITHSUNDEEP
htmlwai-arianvda
user14160660
user14160660

Reputation:

NVDA accessibility

I'm improving the accessibility of the component but when assigning the ARIA attributes the NVDA screen reader introduces "BANNER MARCO" before any sentence.

 <ani-button  class="modal-close" kind="tertiary"><span aria-label="Fechar janela modal"></span>
</ani-button>

enter image description here

Upvotes: 0

Views: 425

Answers (1)

slugolicious
slugolicious

Reputation: 17455

I'm not sure what your <ani-button> is but the "banner" announcement is because you have a banner landmark. That might be because you have a role="banner" on an element or you're using the <header> element. NVDA will announce the landmark type when you navigate to the first element in that landmark. It should not repeat it for every element in the landmark.

For example,

<header>
  <button>one</button>
  <button>two</button>
  <button>three</button>
</header>

When you tab to the first button, you'll hear "banner landmark, one button". When you tab to the second button, you'll just hear "two button" without "banner". When you tab to the third button, you'll just hear "three button" without "banner".

(It looks like "landmark" is translated to "marco" in Portuguese, as shown in your screenshot.)

If you tab backwards to the third button, you'll hear "banner landmark, three button".

Upvotes: 1

Related Questions