Comments (12)
Why not aria-label
? GitHub's CSS library uses this technique: http://primercss.io/tooltips/
from balloon.css.
Closing this as with v1.0
(being released soon) tooltips will accept :focus
by default and will also make use of aria-label
.
from balloon.css.
Keyboard support can be easily added using :focus.
from balloon.css.
from balloon.css.
@jmuheim For screenreaders, a good technique would be appending a hidden element with the same content of the tooltip inside the tooltip elements.
As Balloon.css do not use JavaScript, you cannot achieve it with this library alone. However this can be easily achieved with a little bit of JavaScript and CSS on your project:
// Append a span with tooltip text to all elements containing tooltips
var tooltips = document.querySelectorAll('[data-balloon]');
tooltips.forEach(function (tooltip) {
var span = document.createElement('SPAN');
span.setAttribute('class', 'hide-me');
span.innerHTML = tooltip.getAttribute('data-balloon');
tooltip.appendChild(span);
});
/* make the span invisible to non-screenreaders */
[data-balloon] span.hide-me {
position:absolute;
width: 1px;
height: 1px;
overflow: hidden;
}
from balloon.css.
Yes, :focus
with a tabindex="0"
would work for keyboards. And aria-label
would be a good solution for screenreaders.
from balloon.css.
@kazzkiq Are there any plans on replacing data-balloon
with aria-label
for this library, or at least allowing that option? I feel like this and :focus
should be built in, rather than having to add on top of the library for accessibility. See Primer as a good example.
from balloon.css.
Anywhere there is a :hover
we can add :focus
and :active
. Then at least it's keyboard accessible.
Unfortunately to get more screen reader friendly, we'd need to toggle aria-expanded and aria-hidden (which I would also recommend) we'd need to rely on jQuery or javascript. Or as mentioned above, duplicating the information in an aria-label could work. Screen readers can't read content in a psudo element.
I'd be happy to help contribute.
from balloon.css.
@eladrin201 It seems PR #56 addresses most of those points. But since I've never worked directly with accessibility, I believe I'm not the best fit to define if that PR is enough to solve our problems
(and that PR ended up sitting there for quite a while because of that).
Could you please take a look at it and check if it fixes accessibility or if we should add any other features to it?
from balloon.css.
Adding aria-label
does announce it to screen readers but the container element on which 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 accessibility role
tooltip
should be added to the tooltip so screen readers announce it as tooltip but since it use pseudo-element so won't be possible.
Any thoughts on this @kazzkiq ?
from balloon.css.
@ad1992 That's an issue I didn't knew about.
In this case we have two options:
- Replace
aria-label
attribute withdata-balloon="text here"
(again, as it were inv0.x
); - Keep it as it is so readers will only read tooltip texts (which are button texts with more details) instead of button.
Both cases are harmful to acessibility and not ideal IMO, so I would like to hear opinions on this one. Workarounds are also welcome.
from balloon.css.
@ad1992 can you please open a new Issue explaining your discovery so we can track it better there instead of reopening this one?
from balloon.css.
Related Issues (20)
- Accessibility issue due to aria-label HOT 5
- Tooltip causing extra overflow when inside an overflow container on mobile HOT 1
- question/feature_request(enhancement): tooltip on click HOT 2
- Tooltip does not appear when triggered for a svg <line> element HOT 1
- question/feature_request(mobile): sticky hover
- bug/question(positioning): tooltips goes off a screen HOT 1
- Ballons are still working with font-awesome? HOT 1
- bug/(positioning):tooltips text is off on Chrome
- Features suggestion
- Feature request: fade out
- Italic tooltip text HOT 2
- Bug report sticky header and tooltip
- Is it possible to remove the arrow that appears with the popup? HOT 2
- Add link in tooltip
- Add IDs to heading elements on Github Pages documentation site
- Bug: Transparent pixels between triangle and rounded rectangle
- Is it possible to hide tooltip when focus but still show when hover
- Not disappearing after click ( Angular Material 15.1.0) HOT 1
- Is it possible to show it initially the hide on hover?
- Center text HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from balloon.css.