Accessibility issue on mouse hovering using NVDA tool

Question

I have been using NVDA tool to identify accessibility issues in HTML page. I have been receiving an issue where the tool tip is not readable.

 <span class="icon-interface-question-mark" title="Click for Info" (click)="showAdditionalInfo()"> 

I had added title attribute to fix the issue. But it is not working. Please suggest.

Answer 1

If that's your only code for the tooltip, the keyboard focus will not move to it. You'd need tabindex="0" to allow a keyboard user to tab to it.

But that would be a bad design too because non-interactive elements should not be tab stops.

Take a look at the (not yet complete) tooltip design pattern on "WAI-ARIA Authoring Practices 1.1".

The tooltip should be associated with the input field and should be displayed when the input field receives focus. The tooltip itself should not receive focus.