aria-labelledby attribute not reading when pressing tab and navigation key(right/left arrows)

Question

I am new to aria accessibilities. When I am pressing tab or left/right arrow screen reader NVDA reading as clickable but when I am mouse over it was reading properly. I am using angular 7

Template:

<span role="alert" aria-live="assertive" aria-labelledby="chart-close" id="close_svg" style="width: 25px; height: 31px; margin-top: -6%; padding-right: 4px; fill: #ffffff; stroke: #ffffff; stroke-width: 0.1rem; display: inline-block;" tabindex="0" (click)="closeChat()" placement="bottom" [ngbTooltip]="CloseChat" ng-reflect-inline-s-v-g="/assets/icons/chat-close.svg"> <ng-template #CloseChat tabindex="-1"> Close Chat

Answer 1

If an element has a click() handler or one of the element's ancestors has a click() handler, then NVDA will say "clickable" if the element is not a natively interactive element. In your case, a <span> is not a natively interactive element and it has a click() handler, so you're going to hear "clickable". It's a way for the screen reader to tell the user they can select the element even though it's not normally a clickable thing.

Most screen reader users aren't mouse users so you don't have to worry about not hearing clickable when you hover with the mouse. Most NVDA users turn off mouse tracking anyway so that the screen reader isn't so chatty when moving the mouse over elements.