Accessible Tool Tips

Hey everyone,

I have another question for the group. Wondering if anyone out there has any examples of accessible tool tip implementations.

Here are two examples of what we're currently using:
On a form: https://www.nscc.ca/programs-and-courses/programs/default.aspx
On a content page: https://www.nscc.ca/programs-and-courses/programs/programfees/program.aspx?pfid=153

In both cases, the little green info bubble has a hover action. When I test this with JAWS screen reader, you can't access the content of the tooltip via tab because it's not a link and therefore just gets skipped over. And when using the arrow keys to proceed logically through the content of the page it also gets skipped over completely. We've been testing out some options (not implemented on the pages above) but none of them seem quite right so they're still in development. So, I was wondering if anyone had any examples they could share of tooltips that are working for screen reader and keyboard users.

Thanks in advance.

Susan Richter
Senior Web Interface Developer
Digital Products & Experience
Nova Scotia Community College
Institute of Technology Campus
Web: nscc.ca<http://www.nscc.ca/?utm_source=email-sig&utm_medium=email&utm_campaign=email%20signature%20link>
[cid:image001.png@01DC4299.DEF96CB0]






This communication (including any attachments) may contain privileged or confidential information of Nova Scotia Community College and is intended for a specific individual. If you are not the intended recipient, you should delete this communication, including any attachments without reading or saving them in any manner, and you are hereby notified that any disclosure, copying, or distribution of this communication, or the taking of any action based on it, is strictly prohibited.