首页 / 知识
如何使用HTML的title属性
2023-04-11 15:01:00
如果你想对使用手机，平板电脑和辅助技术的用户隐藏某些内容，而只对键盘用户显示，那么请使用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.webp"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属性目前来看是被禁止的，由于许多用户代理对这属性的可访问性支持很弱……
本文转载自中文网 |
最新内容
相关内容
python如何读取列表中元素的位置?
python如何读取列表中元素的位置?，位置，数据，异常，培训，字符串，元素，索引，方法，示例，结果，python读取列表中元素位置的方法：1、使用index()方
python3如何引入模块?
python3如何引入模块?，系统，位置，培训，标准，模块，方法，成员，路径，下面，别名，使用Python进行编程时，有些功能没必须自己实现，可以借助Python现有
python使用matplotlib绘图怎么在线
python使用matplotlib绘图怎么在线上标注?，地方，培训，坐标轴，图像，范围，画图，示例，注释，文字描述，以上，python画图常用标注包含，坐标轴的值和
python如何replace(替换)多个字符?
python如何replace(替换)多个字符?，培训，字符，字符串，方法，正则，括号，数组，函数，定义，以上，python中使用replace替换多个字符的方法：1、使用re
python如何导入txt数据库?
python如何导入txt数据库?，数据，时间，代码，培训，数据库，函数，读数，数据表，以上，方法，python将TXT数据导入数据库的方法代码如下：#!/usr/bin/py
python中获取路径的三种方法
python中获取路径的三种方法，工作，代码，情况，培训，下来，路径，文件，也就是，桌面，目录，python中获取路径总结下来分为三种情况：1、获取工作目录
python如何调用另一个文件夹中的内
python如何调用另一个文件夹中的内容?，系统，培训，文件，模块，内容，路径，函数，所在，前缀，语句，python中调用另外一个文件夹中的内容：1、同一文件python里小数如何表述?
python里小数如何表述?，银行，培训，小数，位数，问题，精度，表示，以上，存在，更多，1、Python中的小数存在精度问题：>>>0.1+0.1+0.1-0.35.5511151231
python中怎么对一个数进行因式分解
python中怎么对一个数进行因式分解?，代码，培训，因式分解，因数，个数，最小，整数，数组，假定，分解，1、Python因式分解代码：importtime#对一个数进
python怎么找出所有的数字?
python怎么找出所有的数字?，数字，培训，代码，小数点，小数，字符串，整数，表达式，含义，思路，python中获取字符串中所有数字的方法：1、使用正则表达
python如何去空格和回车?
python如何去空格和回车?，培训，空格，方法，字符串，两端，以上，更多，内容，python去掉空格和回车的方法：1、使用strip()、lstrip()、rstrip()等
python如何做可视化界面?
python如何做可视化界面?，代码，标准，培训，函数，界面，控件，文件，按钮，以上，编辑，python创建可视化界面步骤：1、首先，创建一个.py文件，暂命名为PyQ