无法使用键盘访问工具提示内容 [英] Tool tip content is not accessible using keyboard

查看:14
本文介绍了无法使用键盘访问工具提示内容的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

当使用键盘聚焦时,我无法看到图像工具提示的内容.下面是一个代码示例:

I am unable to see the contents of the image tool tip when focussed on it using keyboard. Below is a code example:

<img id="id1" title ="title1" tabindex ="0" src="/images/home.gif" alt="title1"/>

我可以在使用鼠标悬停时看到工具提示内容.

I am able to see the tool tip contents when hovered using mouse.

推荐答案

简答

不要使用 title 属性,它不会用于任何不适合作为图像或 下的标题的目的> 在 <input> 上(请不要在输入上使用 title ......即使对于搜索框,即使是占位符"文本也是可取的至少有一些屏幕阅读器会读到它,而您的触摸屏用户仍然能够阅读输入的内容).

Short Answer

Don't use the title attribute, it doesn't serve any purpose that wouldn't be better suited as a caption under an image or a <label> on an <input> (please don't use a title on an input....even for a search box, even 'placeholder' text is preferable as at least some screen readers will read that and your touch screen users will still be able to read what the input is for).

title 属性支持率低,对现代触摸屏时代的人们提供的很少(只有不使用放大镜或其他辅助技术的视力正常的鼠标用户才能从title 属性),通常对于大多数用例来说不是一个好主意.

The title attribute has low support, offers very little to people in the modern age of touch screens (it is only sighted mouse users who don't use magnifiers or other assistive tech who gain anything from a title attribute) and in general is not a good idea for most use cases.

作为一般规则,如果您确实想使用它(以便鼠标用户可以看到图像的内容),请确保它与 alt 属性相同 以便您向屏幕阅读器用户提供与非屏幕阅读器用户相同的信息/体验.

As a general rule if you do want to use it (so mouse users can see what an image is about) then make sure it is the same as the alt attribute so that you are providing the same information / experience to screen reader users as non screen reader users.

我们玩了一段时间,在某些情况下 title 属性(或至少显示有关图像的额外信息的效果)可能很有用.最后,我们推出了我们自己的"版本的 title 属性,它允许我们获得关于图片的附加信息,而不会中断带有 caption 的文档流.

We played with this for a while, there are some circumstances where the title attribute (or at least the effect of revealing extra information about an image) can be useful. In the end we 'rolled our own' version of the title attribute that allowed us to have additional information about a picture, without interrupting the flow of a document with a caption.

在下面的示例中(我们使用的精简版),我们有:-

In the example below (a stripped back version of what we use) we have:-

  1. 使其可通过键盘和悬停进行访问.
  2. 向需要的人提供了有用的信息,这有一个额外的好处是易于访问(因为标题工具提示不遵循某些浏览器中的最小尺寸指南,即使您更改浏览器中的字体大小设置也不会缩放).
  3. 使其适用于触摸设备.
  4. 设计为像插件一样运行,您可以生成标准标记,其余部分由 JavaScript 和 CSS 魔法完成.

它仍然不如简单地在图像下提供标题,但我相信它抓住了图像上标题"属性的设计精神,同时考虑了从那时起的可访问性和技术变化介绍.

It still isn't as good as simply providing a caption under the image but I believe it captures the spirit of what the 'title' attribute on an image is designed for, while accounting for accessibility and technology changes from when it was introduced.

请注意 - 前 80 行左右的 JavaScript 只是一个允许 jQuery 样式语法的小型辅助库,相关部分从 $("img").each 开始(function(){.

Please Note - the first 80 or so lines of JavaScript are just a small helper library that allows jQuery style syntax, the relevant part starts at $("img").each(function(){.

//tiny replacement for jQuery - adapted version of ki.js
!function (b, c, d, e, f) {

  f = b['add' + e]

  function i(a, d, i) {
    for(d = (a && a.nodeType ? [a] : '' + a === a ? b.querySelectorAll(a) : c), i = d.length; i--; c.unshift.call(this, d[i]));
  }

  $ = function (a) {
    return /^f/.test(typeof a) ? /in/.test(b.readyState) ? setTimeout(function() { $(a); }, 9) : a() : new i(a);
};

  $[d] = i[d] = {
    on: function (a, b) {
      return this.each(function (c) {
        f ? c['add' + e](a, b, false) : c.attachEvent('on' + a, b)
      })
    },
    off: function (a, b) {
      return this.each(function (c) {
        f ? c['remove' + e](a, b) : c.detachEvent('on' + a, b)
      })
    },
    each: function (a, b) {
      for (var c = this, d = 0, e = c.length; d < e; ++d) {
        a.call(b || c[d], c[d], d, c)
      }
      return c
    },
    splice: c.splice
  }
}(document, [], 'prototype', 'EventListener');
$.each = function(arr, callback) {
  if(toString.call(arr) === '[object Array]'){
    var i = 0, l = arr.length;
    for(; i < l; ++i) {
      callback.call(arr[i], i, arr[i]);
    }
  } else {
    for (i in arr)
      callback.call(arr[i], i, arr[i]);
  }
  return arr;
};
//extended to include "attr"
$.prototype.attr = function(a, b) {
  return b === []._ ? this[0].getAttribute(a) : this.each(function(c) {
    c.setAttribute(a, b);
  });
};
//extended to include "removeAttr"
$.prototype.removeAttr = function(a) {
  return this.each(function(b) {
    b.removeAttribute(a);
  });
};
//extend to include "parent"
$.prototype.parent = function() {
  return (this.length < 2) ? $(this[0].parentNode): [];
};
//custom function to wrap an element in another
$.prototype.wrap = function(a) {
  return this.each(function(b) {
    var c = document.createElement(a)
    b.parentNode.insertBefore(c, b);
    c.appendChild(b);
  });
};
//quick way of exposing everything like 'addClass', 'removeClass' etc. without having to define each one indivdually
var props = ['add', 'remove', 'toggle', 'has'],
maps = ['add', 'remove', 'toggle', 'contains'];
props.forEach(function(prop, index) {
  $.prototype[prop + 'Class'] = function(a) {
    return this.each(function(b) {
        if(a){
            b.classList[maps[index]](a);
        }
    });
  };
});
//extend to include "after"
$.prototype.after = function(a) {
  return this.each(function(b) {
    b.insertAdjacentHTML('afterend', a);
  });
};

//Below is the actual function, all of the above is just a simple replacement for jQuery.

//Should work with just jQuery but you would have to check.

$("img").each(function(){
  $(this).wrap("div"); //create a div around an image
  var title = $(this).attr("title"); //grab the title
  var wrapper = $(this).parent(); //grab the div we just created
  wrapper.attr("data-title", title); //set the data-title that we use in the CSS on the wrapper
  wrapper.addClass("image"); //add the class that we use for CSS
  wrapper.attr("tabindex", "0"); //make the div focusable with tabindex="0"
  $(this).after('<span class="visually-hidden">, Title ' + title + '</span>'); //add a span with the title in that is accessible to screen readers - note the use of a comma before the 'Title' part as this makes it more natural (as we are 'hacking' an experience similar to that of a screen reader reading an actual title.)
  $(this).removeAttr('title'); //remove the actual title, otherwise some screen readers will announce the title twice.
});

.image{
  display:block;
  overflow:hidden;
}
/*need relative position in order to absolutely position the overlay*/
.image {
    position:relative;
    width:200px;
    height:200px;
    margin: 10px;
}
.image img {
    width:100%;
    vertical-align:top;
}
/*add a transition*/
.image:after, 
.image:before {
    position:absolute;
    opacity:0;
    transition: all 0.5s;
}
/*remove the transition for people who have reduced motion as a preference*/
@media (prefers-reduced-motion: reduce) {
  .image:after, 
  .image:before {
    transition: none;
   }
}
/*create an overlay*/
.image:after {
    content:'';
    width:100%; 
    height:100%;
    top:0; 
    left:0;
    background:rgba(0,0,0,0.4);
}
/*create a box at the bottom that contains the 'data-title' text that was added to the div we created*/
.image:before {
    content: attr(data-title);
    font-size: 1.25rem;
    line-height: 1.9rem;
    width:100%;
    color:#fff;
    z-index:1;
    bottom:0;
    padding:4px 10px;
    text-align:left;
    background:black;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}
/*make the overlay visible on hover and focus*/
.image:hover::after, 
.image:hover::before,
.image:focus::after, 
.image:focus::before{
    opacity:1;
}
/*put a border around on focus*/
.image:focus{
    outline: 2px solid #333;
    outline-offset: 4px;
}

/*visually hidden class used to make text screen reader accessible but not visible*/
.visually-hidden { 
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added line */
}

<img src="https://via.placeholder.com/150" title="First Image" alt="First Image"/>
<img src="https://via.placeholder.com/150" title="Second Image, A Longer Text Test for a more complex title, adjust to your needs" alt="Second Image"/>

这篇关于无法使用键盘访问工具提示内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆