CSS tooltips that are both keyboard navigable and touchscreen functional - html

Question

This is my first time posting here, but I have found this site an invaluable repository for many years.
I have recently been adding tooltips to a website form. Initially, my concern was to make these work when a mouse-user hovers over the tooltip icon (in my case simply '(?)'). I was using the following CSS:
.tooltip
{
border-bottom: 1px dotted #000000;
color: #000000;
outline: none;
cursor: help;
text-decoration: none;
position: relative;
}
.tooltip span
{
margin-left: -999em;
position: absolute;
}
.tooltip:hover span, .tooltip:focus span
{
border-radius: 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000000;
font-family: Arial, Helvetica, sans-serif !important;
position: absolute;
left: 1em;
top: 2em;
z-index: 99;
margin-left: 0;
width: 250px;
background-color: #b4e0e0;
font-size: 1em;
}
.ttipcontent
{
padding: 0.8em 1em;
}
With the following HTML:
<a class="tooltip" href="#">(?)<span class="ttipcontent">This is the tooltip content which will be displayed</span></a>
This worked well enough for the intended use, creating on-hover tooltips for use with a mouse/ pointer device. However, to use this with a touchscreen device was a nightmare. Every time you clicked the (?) icon, you were of course taken to the top of the page.
So I replaced the HTML with the following (keeping the same CSS):
<span class="tooltip">(?)<span class="ttipcontent">This is the tooltip content which will be displayed</span></span>
This now works well with both mouse/ pointer devices and touchscreen devices. However, I have inadvertently removed the ability of a user to keyboard-navigate to the tooltips by 'tabbing' through the links. This poses an accessibility problem.
My question is, is there a way to combine all three elements of functionality: the ability to display tooltips on hover, on touch, and by keyboard navigation?
Thanks in advance for any help!

Answer 1

You need to realize that tabbing is mostly good for when you are filling out forms. When I'm filling out a form, I don't expect to land on a button with a question mark.
This element does not (necessarily) need to be focusable. However, you do need to notify the user that it exists. For example:
<label for="mytextbox">First name <span class="tooltip">(?)<span class="ttipcontent">Fill in your real first name</span></span></label>
<input id="mytextbox" />
This way, when a user passes over the text field, his screen reader announces "First name (?)", which alerts him to explore the question mark, and press enter on it (screen readers announce that an item is "clickable" if it has an onclick event).
I would advise you to stop presenting this item using just CSS and throw in some Javascript as well. For example, show and hide the extra text using Javascript by dynamically setting the contents of an element with the aria-live attribute set to polite (which makes the screen reader read out the help text presented), or just hiding and showing the extra text (which should just be beneath the line that has the question mark in it) when a click happens on the question mark.
Please have a look at Making clickables accessible if you do decide to take the (recommended) clickable approach I presented in the previous paragraph.

Answer 2

With many thanks to Parham Doustdar, I now appear to have something which is fully functional across devices and with a screen reader. I am including what I have ended up with below in case it is useful to others.
The 'hover' functionality has now been removed, and the user must now click on/ touch/ tab to the tooltip icon to show/ hide the tooltip text.
CSS:
.ttipcontainer
{
position: relative;
}
.tooltip
{
border-bottom: 1px dotted #000000;
color: #000000 !important;
outline: none;
cursor: help;
text-decoration: none !important;
position: relative;
}
.tooltip:focus
{
border: 1px dotted #000000;
}
.ttiptext
{
border-radius: 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000000;
font-family: Arial, Helvetica, sans-serif !important;
position: absolute;
left: 1em;
top: 2em;
z-index: 99;
margin-left: -999;
width: 250px;
background-color: #b4e0e0;
font-size: 1em;
}
HTML:
<span class="ttipcontainer">
<span class="tooltip" title="tool tip" role="button" tabindex="0" onclick="show('tttext1')">
(?)
</span>
<span class="ttiptext" id="tttext1" style="display:none" aria-live="polite">
This is the tooltip text
</span>
</span>
JavaScript (Sourced from: http://www.codeproject.com/Articles/15237/Hide-and-Show-Any-Element):
function show(ele) {
var srcElement = document.getElementById(ele);
if(srcElement != null) {
if(srcElement.style.display == "block") {
srcElement.style.display= 'none';
}
else {
srcElement.style.display='block';
}
return false;
}
}

Answer 3

If you want to have the keyboard navigation you will need one of the following elements that support the tabindex attribute: A, AREA, BUTTON, INPUT, OBJECT, SELECT, and TEXTAREA.
The button would be your best shot here.