[Bug]: UI button tooltips unavailable to keyboard navigation users - make tooltip appear also via focus - Accessibility issue

[dmer]

Attach (recommended) or Link to PDF file

Applies to any PDF viewed in pdfjs
https://mozilla.github.io/pdf.js/web/viewer.html

Web browser and its version

Chrome Version 131.0.6778.86

Operating system and its version

Mac OS 14.6.1

PDF.js version

v4.3.136

Is the bug present in the latest PDF.js version?

Yes

Is a browser extension

No

Steps to reproduce the problem

1. Open a PDF in pdfjs
2. use the keyboard to navigate through the buttons in the toolbar

What is the expected behavior?

When I navigate to a button (e.g. "Highlight") with the keyboard (focus moves to Highlight button) the tooltip should show so that I know the purpose of the button.

What went wrong?

Mouse hover over the buttons shows a tooltip and I can get screen readers to read the button title, but for users purely using keyboard navigation, the button names are not shown.

Link to a viewer

https://mozilla.github.io/pdf.js/web/viewer.html

Additional context

This came up in a site Accessibility Audit.

[Snuffleupagus]

When I navigate to a button (e.g. "Highlight") with the keyboard (focus moves to Highlight button) the tooltip should show so that I know the purpose of the button.

That doesn't appear to be the case for the main toolbar of the Firefox browser itself either, so if it's not even implemented in Firefox it's not obvious to me that we "need" to do that in the PDF.js viewer.

[calixteman]

@dmer would you mind to point out some kind of a11y specs/recommendations about having such a tooltip ?

[calixteman]

@anna-yeddi, wdyt ?

[dmer]

The auditors I'm working with flagged this as a problem with the WCAG Success Criteria: 2.1.1 Keyboard (A)
Essentially, button labels are not available to keyboard-only users.

[calixteman]

The auditors I'm working with flagged this as a problem with the WCAG Success Criteria: 2.1.1 Keyboard (A) Essentially, button labels are not available to keyboard-only users.

Sorry I don't find anything specific about button labels/tooltips.

[dmer]

I'm admittedly new to WCAG a11y compliance work so I won't claim any expertise, but having read through the 2.1.1 Success Criteria documentation, it seems clear that their goal was not to itemize and specify every solution or recommendation, but rather to put in place some semantically clear criteria for each category. There is an element of subjective decision making one has to make when assessing a site or software. The criteria I linked begin with these statements:

Goal
Everything can be done with a keyboard except freehand movements.
What to do
Ensure pointer actions have a keyboard equivalent.
Why it's important
Many people rely on the keyboard interface, including blind and some mobility impaired people.

If I'm trying to use the PDFJS interface with only a keyboard and I don't already know what all the buttons do, I will be at a disadvantage since there is no displayed label.