kazzkiq/balloon.css

Accessibility issue due to aria-label

Open

#146 opened on Sep 20, 2020

View on GitHub
 (5 comments) (0 reactions) (0 assignees)CSS (5,029 stars) (441 forks)batch import
accessibilityhelp wanted

Description

Adding aria-label does announce it to screen readers but the container element on which the tooltip is shown, the text of that button for example won't be announced as shown in https://kazzkiq.github.io/balloon.css/ the text Hover me is not announced since the aria-label now just has the tooltip text which is an accessibility issue.

ideally, first, the button content should be announced and then the tooltip content.

For the accessibility, role tooltip should be added to the tooltip so screen readers announce it as tooltip but since it uses pseudo-element so won't be possible.

Contributor guide

Tech stack
csshtml
Domain
frontendaccessibility
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic HTML/CSSUnderstanding of ARIA attributes
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65
Research direction
The issue is in balloon.css, a pure CSS tooltip library. The problem is that using aria label on the tooltip container overrides the button text for screen readers. Investigate the current CSS and HTML structure (likely using data attributes and ::before/::after pseudo elements). Consider adding role='tooltip' via JavaScript or modifying the HTML to include both the button text and tooltip text in the accessibility tree. Refer to the official demo at https://kazzkiq.github.io/balloon.css/ and comments for more context.