简而言之:尽管WCAG建议之一,abbr并不是解释每个人缩写意义的完美解决方案,但是当你想宣布缩写的发音时,应该使用咏叹调标签.

Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g. requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).

我从不鼓励使用abbr标签有两个原因:

>它不是一个可聚焦元素,因此您无法使用键盘浏览它以查看缩写的含义.如果您打算提供明显的替代品,那么咏叹调标签绝对是您所需要的.

例如,当缩写是语言的一部分时,您需要解释它,但您可以提供一个替代语言:

Director: Mr Smith

>盲人确实理解缩写,就像我们大多数人一样

例如,以下句子是盲人完全理解的东西:

John Smith of the NATO was arrested by the FBI.

以下一个是不太可以理解的

John Smith of the North Atlantic Treaty Organization was arrested by the Federal Bureau of Investigation.

由于abbr用于首字母缩略词和缩写,你应该使用CSS属性speak:spell-out来宣布一个元素必须拼写出来.您可以使用abbr标记在语义上指示它是缩写或首字母缩写词,但它不会对全局可访问性产生任何影响.

如果您确实认为缩写需要解释(适用于所有人而不仅仅适用于盲人),那么您应该用完整的单词给出这个解释,而不要求用户将鼠标悬停在缩写上以查看小工具提示.

不好的例子,当缩写没有帮助可读性时:

Dr. Smith is located on Lincoln Dr.

很好的例子(简单就是更好):

Doctor Smith is located on Lincoln Drive

WCAG推广了许多其他方法,而不是使用abbr标签:

html span title属性,html – -Element:aria-label或title属性相关推荐

  1. Label控件属性AssociatedControlID

    可以使用Label控件来标注一个HTML表单字段.Label控件拥有属性AssociatedControlID,可以设置此属性来指向表示表单字段的ASP.NET控件. 例如,代码清单2-3中的页面含有 ...

  2. element 往node里面增加属性值_【Vue原理】Compile - 源码版 之 Parse 属性解析

    写文章不容易,点个赞呗兄弟 专注 Vue 源码分享,文章分为白话版和 源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧 研究基于 Vue版本 [2.5.17] 如果你觉得排版难 ...

  3. element元素 取属性_js element类型的属性和方法整理

    Element类型 除了Document类型,我们Web编程中最常用的类型就是Element类型啦.Element 类型用于表现XML或HTML元素,提供了对元素标签名,子节点,特性的访问 特征 no ...

  4. HTML元素 span,div,p,h,a盒子模型中padding属性的演示和理解

    在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容. 盒模型允许我们在其 ...

  5. matlab中figure的坐标轴label、title、xticklabel的旋转

    1. label旋转 坐标轴的label可以在label axis 的时候设置旋转角度 xlabel(str,'Rotation',Rotaiondegree) >> xlabel('Th ...

  6. element怎么设置复选框属性_【JavaScript 教程】DOM——属性的操作

    作者 | 阮一峰 HTML 元素包括标签名和若干个键值对,这个键值对就称为"属性"(attribute). <a id="test" href=" ...

  7. label标签for属性的使用

    <label>是我们经常是用到的标签,一般用在<input>标签之前,用来指示该输入框需要的信息.但<label>标签还有个for属性,可以关联<input& ...

  8. element元素 取属性_JS-DOM Element方法和属性

    setAttribute方法: var a=document.createElement("div");        //新建一个DIV a.id="div1" ...

  9. label标签的属性

    //label标签的属性 1 - (void)viewDidLoad { 2 //初始化一个label1标签对象,初始化有很多方法,最原始的就是init,此处用带有frame的方法 3 UILabel ...

最新文章

  1. vivo 互联网业务就近路由技术实战
  2. 世界32条谣言,你被骗了多少?
  3. Android - N级树形结构实现
  4. boost::filesystem模块演示错误报告的工作原理的测试程序
  5. sql数字转换为字符_Python|图片转换为字符画^_^
  6. linux内核多大 4.17.8,Linux Kernel 4.17结束支持,请升级到Linux 4.18内核
  7. Markdown--绘制流程图(flowchart)_验证
  8. Linux正则表达式与grep
  9. 天池学习赛——街景字符编码识别(得分上0.93)
  10. Java之添加环境变量
  11. DedeCms网站防挂马注意点
  12. Maven坐标和依赖
  13. matlab遗传算法求解TSP旅行商问题
  14. DeFi中的关键——智能合约 | 白话区块链入门220
  15. Azure上的物联网产品介绍
  16. 下次激活策略10_宋楠:解读北汽新能源EU5R550核心技术之低温充电预热策略
  17. 离职后重回老东家?你需要明白这些事情
  18. python中sklearn实现决策树及模型评估_sklearn实现决策树
  19. Unity Transform 检视器快速复制粘贴
  20. unity 手机游戏优化(场景篇)

热门文章

  1. 微型计算机也称为个人计算机由,微型计算机概述计算机概述微型电脑组装系统台式电脑...
  2. IDEA无法启动Tomcat显示[localhost-startStop-1] org.apache.catalina.startup.HostConfig.deployDirector
  3. java实现.费诺编码_使用递归算法编写的费诺编码
  4. 14 最小二乘估计原理推导和线性回归的外推等
  5. MybatisPlus入门学习
  6. YMIR 里程碑1.0发布:让人人成为AI开发者更近一步
  7. 教你如何在腾讯云阿里云薅羊毛
  8. 如何查看别人通过百度云盘分享的文件
  9. 五大移动GPU厂商论剑
  10. 【VOLTE】SIP leg