Not accessible at all

[jmuheim]

Neither keyboard only users nor screenreader users will ever be able to perceive these tooltips. A pity.

[sbible]

Keyboard support can be easily added using :focus.

[kazzkiq]

@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;
}

[sunnysingh]

Why not aria-label? GitHub's CSS library uses this technique: http://primercss.io/tooltips/

[jmuheim]

Yes, :focus with a tabindex="0" would work for keyboards. And aria-label would be a good solution for screenreaders.

[sunnysingh]

@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.

[spasticninja]

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.

[kazzkiq]

@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?

[kazzkiq]

Closing this as with v1.0 (being released soon) tooltips will accept :focus by default and will also make use of aria-label.

[ad1992]

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 ?

[kazzkiq]

@ad1992 That's an issue I didn't knew about.

In this case we have two options:

1. Replace aria-label attribute with data-balloon="text here" (again, as it were in v0.x);
2. 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.

[kazzkiq]

@ad1992 can you please open a new Issue explaining your discovery so we can track it better there instead of reopening this one?

[ad1992]

@kazzkiq done #146