文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

HTML的title属性怎么用

2024-04-02 19:55

关注

小编给大家分享一下HTML的title属性怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

  如果你想对使用手机,平板电脑和辅助技术的用户隐藏某些内容,而只对键盘用户显示,那么请使用title属性。

  细节

  HTML的title属性本身有问题。之所以有问题是因为它在一些重要的方面表现的不够好,尽管它陪伴我们超过14年了。随着触摸设备的兴起,这个属性的作用进一步降低。title属性的可访问性变得很鸡肋,由于缺少浏览器的支持,屏幕阅读器的支持和制作人员的重视。

  下列情况下title属性由于缺乏支持变得多余:

  对于在手机浏览器里访问web内容信息的人。通常title属性的内容在桌面浏览器里显示为提示信息。据我所知,没有任何手机浏览器支持显示提示信息,并且也没有其他访问title属性内容的视觉方法。

  对于那些无法使用鼠标的人提供信息。通常title属性的内容在桌面浏览器里显示为提示信息。虽然提示信息的行为已经有10多年历史,但一直没有浏览器实现使用键盘显示title属性的方法。

  对于在大多数HTML元素上使用它为使用各种辅助技术的人提供信息。据我所知屏幕阅读器对访问title属性信息一致不支持。

  title属性不友好用户如下

  手机用户

  仅使用键盘的用户

  使用屏幕放大器的用户

  屏幕阅读器用户

  精细运动技能障碍的用户

  认知障碍的用户

  title属性有用的例子:

  为frame或iframe元素贴上标签:

  <frametitle="navigation">

  提供需要程序才能实现的在特殊情况下才显示的标签,直接使用可见的文本标签会显得多余:

  <inputtype="text"title="search"><inputtype="submit"value="search">

  数据表格中的标签控件。

  title属性无用或用处不大的例子:

  为不能作为文本的链接或周围内容添加额外信息:

  <ahref="newsletter.PDF"title="PDFfile,size1mb.">newsletter</a>

  相反这样的信息应该作为链接文本的部分或在链接的旁边。

  提供和链接文本相同的信息:

  <ahref="newsletter.PDF"title="newsletter">newsletter</a>

  建议不要复制链接内容作为title属性。这其实相当于什么都没做。

  用于图像的标题:

  <imgsrc="castle1858.jpeg"title="Oil-basedpaintoncanvas.MariaTowle,1858."

  alt="Thecastlenowhastwotowersandtwowalls.">

  大概标题信息是最重要的信息,应该能被所有用户默认访问。如果是这样,那么这个内容应该紧挨着图片。

  用来代替表单的标签,去掉可见的文本标签:

  <inputtype="text"title="name">

  屏幕阅读器的用户将会访问表单元素的标签,由于title属性被列入可访问性api内的属性名称(当文本标签使用标签元素时是不被支持的)。许多其他用户并不如此。建议尽可能包括一个可见的文本标签。

  为表单元素提供和可见的标签内容相同的信息:

  <labelfor="n1">name</label><inputtype="text"title="name"id="n1">

  重复可见的标签文本不可能除了添加一系列的用户认知噪声。不做它。重复可见的标签文本除了添加一系列令人讨厌的认知噪声外,似乎没有其他作用,停止这种用法。

  为表单元素提供额外的指令:

  <labelfor="n1">name</label><inputtype="text"title="Pleaseuseuppercase."id="n1">

  如果这指令对于正确的使用表单元素非常重要,请在元素周围提供文字信息,确保每个用户都能读到。

  作为缩写的扩展:

  <abbrtitle="worldwidewebconsortium">W3C</abbr>

  虽然abbr元素的title属性被屏幕阅读器软件所支持,但使用它仍然是有问题的,因为其他用户群无法使用。建议当缩写词在文档中首次出现时提供文本格式的全称,或提供全称形式的术语表。这并不是说不可以使用title属性,因其具有局限性,应该提供文本形式的全称。

  HTML5.1包括使用title属性的一般性建议:

  依赖title属性目前是不被鼓励的,由于许多用户代理不能按照规范的要求显示这个属性(如需要鼠标指针设备引起提示信息的显示,排除了仅使用键盘的用户和触摸屏用户)

  用title属性代替img元素的alt属性或作为图片的标题是被禁止的

  依托title属性目前来看是被禁止的,由于许多用户代理对这属性的可访问性支持很弱&hellip;&hellip;

HTML的title属性怎么用HTML的title属性怎么用

以上是“HTML的title属性怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯