Improve Screen Reader Users' Navigation Experience by Hiding Control Tooltips from Screen Readers

[brichwin]

Description: When using VoiceOver on the Kaltura Video Player, navigating through controls using VO-Left Arrow and VO-Right Arrow results in the VoiceOver cursor stopping on both the control buttons and their associated tooltips. This creates two issues:

1. Inefficient Navigation: Users must press navigation keys twice as many times to move through the player controls since they need to navigate past both the button and its tooltip.

2. Potential User Confusion: When navigating quickly, users may be unsure whether they're focused on the actual control button or its tooltip, potentially leading to a confusing experience.

This affects all controls with tooltips, including:

• Play button
• Seek backwards (10 seconds) button
• Seek forwards (10 seconds) button
• Mute button
• Enable Captions button
• Settings button
• Picture in Picture button
• Fullscreen button

Note: This issue effects screen reader users in general as the tool tip text is discoverable when other screen readers (NVDA, JAWS, etc.)

Here is a video demonstrating the issue: Video: Improve VoiceOver Navigation Experience by Hiding Control Tooltips from Screen Readers (2:34)

Proposed Solution: Add aria-hidden="true" to the tooltip component in src/components/tooltip/tooltip.tsx. This change:

• Hides tooltip text from screen readers while maintaining visual tooltip functionality
• Results in VoiceOver cursor only stopping on the actual control buttons
• Creates a more streamlined navigation experience

return (
      <div
        className={style.tooltip}
        onMouseOver={this.onMouseOver}
        onMouseLeave={this.onMouseLeave}
        ref={el => (el ? (this.tooltipElement = el) : undefined)}>
        {children}
        <span aria-hidden="true" style={{maxWidth: props.maxWidth}} ref={el => (el ? (this.textElement = el) : undefined)} className={className.join(' ')}>
          {props.label}
        </span>
      </div>
    );

Sample video player with this fix applied: demo-with-aria-hidden-on-tooltip

Testing Completed:

• Verified improvement with VoiceOver navigation
• Tested with additional assistive technologies:
  • NVDA
  • JAWS
  • VoiceControl
  • Dragon NaturallySpeaking
• Tested across multiple browsers
• Confirmed no negative impact on existing functionality

Impact: This change significantly improves the navigation experience for screen reader users while maintaining the visual tooltip functionality for sighted users.