Comments (12)
Keyboard navigation support added in commit 85da84d.
Still have to determine if it is possible to implement ARIA, and if so, how best to do it.
from jquery-powertip.
It does not appear that I can implement ARIA standards without a fundamental change to how the tooltip system works.
Right now there is only one tooltip div used, it would be preferable for the ARIA implementation that each tooltip item have it's own div to preserve a fixed aria-describedby
relationship. But my testing with JAWS shows that this isn't an absolute requirement.
Unfortunately, the combination of the single-div system and the nice queue and fade system simply wont work for a aria-describedby
relationship. If the cursor reaches an element with a tooltip while another tooltip is open, then the content of the tooltip div will still be that of the last tooltip when the screen reader processes the ARIA attributes (due to the tooltip gracefully closing).
The only solution that I can think of right now is to create a new tooltip div for each tooltip item.
from jquery-powertip.
I don't have JAWs handy to test, but would setting aria-live to polite or assertive on the tooltip work?
from jquery-powertip.
Actually, it just might, if I combine the aria-live
attribute with aria-describedby
and don't set the reference until the tooltip content has loaded. I'll give it a shot after I finish the work for elastic tooltips.
from jquery-powertip.
I still couldn't get it to work right.
The aria tags just don't seem to work as expected for the queued tooltips. I've tried various configurations of aria-live
, aria-describedby
, and aria-controls
. None of them do what I would expect. The closest I can get is with a direct described by relationship, but if I tab from one tooltip element to another, then another, in rapid succession, JAWS will read the tooltip for the one I skipped over (because of the queued transition).
I've tried setting aria-busy
during the tooltip transition, and resetting it when complete, but that doesn't seem to work at all. JAWS will never read the tooltips. Setting aria-describedby
late has the same effect.
Even when I get it close to working JAWS says "Use JAWS key plus ALT plus R to read descriptive text", then it reads the descriptive text immediately anyway. I cannot figure out what is triggering JAWS to announce that, but the original ARIA example does not do that.
Working with JAWS and ARIA has been completely frustrating for me. I wish there was another decent screen reader that supported ARIA and didn't have a 40 minute timer (or cost $900). I need to setup JAWS on a virtual machine before I do any more work on this.
Right now it still looks like I will have to create a new tooltip div for each element if I want to support ARIA. But I really don't want to pollute the document with possibly hundreds of elements that may never be used if I can help it.
from jquery-powertip.
Nice to see you're trying with ARIA, I've been looking for a new tooltip plugin and as usual none cater for ARIA or even the basics of accessibility e.g. keyboard support.
You don't need to create a separate div
for each tooltip to get this to work for ARIA. Basically the ARIA that's needed is this:
Tooltip div
:
role="tooltip"
(easy enough)- a unique
id
(can do something likeid="powertip-1"
, and just increment the number by 1 each time)
Tooltip trigger:
aria-describedby="id-of-tooltip"
It's being done here: http://hanshillen.github.com/jqtest/#goto_tooltip, this a reputable source and a benchmark for me when trying to make jQuery plugin's more accessible.
Also you can try the free NVDA screen reader: http://www.nvda-project.org/. Testing the above example with NVDA works fine.
Be great if you could have a go at this as this is the best plugin I've seen so far and like you I'd rather not have seperate div
s for each tooltip littered everywhere in my markup.
Cheers
from jquery-powertip.
The example I provided above is based off the jQeury UI library: http://jqueryui.com/tooltip/.
from jquery-powertip.
Thanks for the links and tips. I'll give that a shot and see if I can get it working.
There is one gotcha though, right now PowerTip uses the id for CSS targeting. If the id is no longer static then it would break existing PowerTip installations, so even if I can get this working it will have to wait until the 2.0 release because of the breaking changes.
Alternatively, I could add a div inside the #powertip div with the unique id, but that could also break some peoples styles.
I'll do some experimenting.
from jquery-powertip.
No worries.
I see what you mean about the CSS hook, I'd move the CSS hook to a class anyway with ver 2.0 as id
's should be avoided for CSS styling, this is advocated by most of the CSS experts out there e.g. Harry Roberts, Jonathan Snook, etc. I adhere to this also.
Be great to implement this as it would really make your already great plugin even more great, as I said accessibility is just not implemented into so many plugins out there and for some this is a deal breaker.
Cheers
from jquery-powertip.
There's an open ticket over at Twitter Bootstrap to implement accessibility for their tooltip: twbs/bootstrap#3535, the ticket provides a nice list of what needs to be done.
from jquery-powertip.
I know it's a decade old, but accessibility features are more important now than ever. If there is any way I can help, would be happy to contribute.
from jquery-powertip.
I would love to see screen reader support added.
It's actually quite embarrassing that it never got implemented, as it was something I had planned to add from the beginning. When I first tried to do this, the tooling implementing ARIA was so terrible to work with, the behavior so seemingly random, and the effects so inconsistent between screen reader programs. I just gave up after a while. It seemed that the requirements of PowerTip were incompatible with screen reader software implementing ARIA.
I hope it is better now, but I haven't been following the technology much in recent years. On Windows, it seems that NVDA has gained more traction, and JAWS less, which is good news if my previous experience still holds true.
If you're volunteering to try to get AIRA working, then I would gratefully accept. But I do have a couple requests:
- If it looks like a big project then break it up into small pull requests with small changes and submit them as you make progress, rather than as one big collection of commits (so it's easy for me to code review and asses risk along the way).
- If it will require breaking backwards compatibility (like the unique
id
problem mentioned above), please confirm with me before putting any time into it (because don't have plans for a new major version in the foreseeable future).
Right now PowerTip is basically in maintenance mode, since interest has dried up in favor of newer tech. So I want to keep changes low-risk and backwards compatible, that way I can roll out fixes to legacy users without requiring them to perform code rewrites to upgrade (which many will never do).
from jquery-powertip.
Related Issues (20)
- Uncaught TypeError: Cannot read property 'data' of null HOT 3
- Allow different positions by using HTML data attribute HOT 2
- Attach powertooltip to range object HOT 3
- MouseOn and Touch Support HOT 2
- Combination of `closeEvents: ['click']` and `mouseOnToPopup: true` doesn't work as expected HOT 2
- Powertip offset when browser scrollbar appears after load HOT 2
- Powertip E with smart placement not showing tooltip when element next to browser right edge HOT 1
- Performance issues while migrating from 1.2.0 to latest version (1.3.1) HOT 2
- Apply powertip to dynamically created elements? HOT 2
- question regarding adding copy button in the powertip to copy its content HOT 1
- North positioning issues HOT 3
- Add a parameter to choose the coloration style of the tooltip HOT 2
- Add a option for hide the arrow HOT 1
- Crash When Showing but No Active Hover: Cannot read properties of null (reading 'data') HOT 7
- Powertip Arrows: Add Ability for Borders or Drop-shadow HOT 1
- jQuery Migrate warning: jQuery.type is deprecated HOT 2
- Doesn't work on multiple pages in iframe HOT 2
- Nested titles confuse powertip HOT 2
- jQuery 4.0.0 support HOT 1
- Automate publishing to npm
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 jquery-powertip.