CSS工具提示，既是键盘导航和触摸屏功能 [英] CSS tooltips that are both keyboard navigable and touchscreen functional
问题描述
这是我第一次在这里发布，但我发现这个网站多年来是一个宝贵的存储库。
This is my first time posting here, but I have found this site an invaluable repository for many years.
我最近已经添加工具提示到网站表单。最初，我的关注是当鼠标用户悬停在工具提示图标（在我的情况下简单的（？））时使这些工作。我使用了以下CSS：
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;
}
使用以下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.
所以我替换了下面的HTML（保持相同的CSS）：
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>
现在鼠标/指针设备和触摸屏设备都可以正常工作。但是，我无意中删除了用户键盘导航到工具提示的能力，通过tabbing通过链接。这导致了辅助功能问题。
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?
感谢您提供任何协助！
推荐答案
实现tabaf是最好的当你填写表单。当我填写表单时，我不希望着陆于带有问号的按钮。
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" />
这样，当用户通过文本字段时，他的屏幕阅读器宣布 ），它提醒他探索问号，然后按enter键（屏幕阅读器宣布一个项目是可点击，如果它有一个onclick事件）。
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).
我建议你停止展示这个项目使用CSS和投入一些Javascript以及。例如，通过使用aria-live属性设置为polite（这使得屏幕朗读器读出所呈现的帮助文本）动态设置元素的内容，或者仅隐藏和显示额外的文本，来显示和隐藏额外的文本
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.
这篇关于CSS工具提示，既是键盘导航和触摸屏功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
