bootstrap class sr-only 什么意思？

在看 bootstrap 内联表单时，label 有一个 class 是 sr-only。

sr-only 是给屏幕阅读器用的，是给视力不方便的用户在使用屏幕阅读器时方便查看的。

解释如下1：

全称是 screen reader only，意为：（仅供）屏幕阅读器，这个 class 主要用于增强 accessbility（可访问性）。

有时候 UI 上会出现一些仅供视觉识别的元素，比如说“汉堡包菜单按钮”，只有视力正常的人才能清楚辨识这些元素的作用。而残障人士，比如弱势或盲人是不可能知道这些视觉识别元素是什么的。他们上网使用的是屏幕阅读器，也就是 screen reader（sr），屏幕阅读器需要找到能辨识的文本说明然后“读”出来给用户听。问题是图形元素怎么可能“读出来”呢？因此我们还要写上这些元素的文本说明，但是又不需要展示给普通用户看到，于是加上 sr-only 的意义就在于能保证屏幕阅读器正确读取且不会影响 UI 的视觉呈现。

  1. https://segmentfault.com/q/1010000003007829↩

bootstrap class sr-only 什么意思？的更多相关文章

  1. 利用Bootstrap快速搭建个人响应式主页（附演示+源码）

    1.前言 我们每个程序员都渴望搭建自己的技术博客平台与他人进行交流分享,但使用别人的博客模板没有创意.做网站后台的开发人员可能了解前端,可是自己写一个不错的前端还是很费事的.幸好我们有Bootstra ...

  2. Knockout.js, Asp.Net MVC and Bootstrap 前端设计

    原文地址:http://ddmvc4.codeplex.com/ 原文名称:Design and Develop a website using ASP.NET MVC 4, EF, Knockout ...

  3. java +bootstrap table 完整例子

    需求:现在常用的table 插件很多, 比如 jquey datatables ,不过操作挺 麻烦, 看到推荐的bootstrap 自带的 table,就用到项目来,先看效果:

  4. Bootstrap 使用

    bootstrap模板为使IE6.7.8版本(IE9以下版本)浏览器兼容html5新增的标签,引入下面代码文件即可. <script src="https://oss.maxcdn.c ...

  5. ASP.NET MVC+Bootstrap 实现短信验证

    短信验证大家都已经非常熟悉了,基本上每天都在接触手机短信的验证码,比方某宝,某东购物.站点注冊,网上银行等等,都要验证我们的手机号码真实性.这样做有什么优点呢. 曾经咱们在做站点的时候.为了提高用户注 ...

  6. Bootstrap的使用。。。

    概览 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属 ...

  7. bootstrap基础学习十篇

    bootstrap字体图标(Glyphicons) a.什么是字体图标 字体图标是在 Web 项目中使用的图标字体.虽然,Glyphicons Halflings 需要商业许可,但是您可以通过基于项目 ...

  8. 旺财速啃H5框架之Bootstrap（五）

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  9. 旺财速啃H5框架之Bootstrap（四）

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

随机推荐

  1. java第八天

    p41~p45: 1.区别前缀式与后缀式. public class Test { public static void main(String[] args) { int i = 1; System ...

  2. luogu p1219 八皇后

    https://www.luogu.org/problem/show?pid=1219 经典问题,搜索一遍过. 重点是判断皇后能否在map[x][y]放下的条件 因为是dfs的时候过程中 x 是递增的 ...

  3. Bitmap 位图

    转自: http://dongxicheng.org/structure/bitmap/ 1.  概述 位图(bitmap)是一种非常常用的结构,在索引,数据压缩等方面有广泛应用.本文介绍了位图的实现 ...

  4. CSU 1968 Permutation Descent Counts

    http://acm.csu.edu.cn/csuoj/problemset/problem?pid=1968 题意:对于任一种N的排列A,定义它的E值为序列中满足A[i]>A[i+1]的数的个 ...

  5. Gym 101243E Cupcakes

    http://codeforces.com/gym/101243/attachments 题意: 有n个人,桌子上有k的蛋糕,每个人都有一个值val,表示每次轮到他吃蛋糕时,他可以吃1~val的蛋糕量 ...

  6. Codeforces Round #390 (Div. 2) D. Fedor and coupons（区间最大交集+优先队列）

    http://codeforces.com/contest/754/problem/D 题意: 给定几组区间,找k组区间,使得它们的公共交集最大. 思路: 在k组区间中,它们的公共交集=k组区间中右端 ...

  7. HDU 3435 A new Graph Game（最小费用流：有向环权值最小覆盖）

    http://acm.hdu.edu.cn/showproblem.php?pid=3435 题意:有n个点和m条边,你可以删去任意条边,使得所有点在一个哈密顿路径上,路径的权值得最小. 思路: 费用 ...

  8. UVa 10791 最小公倍数的最小和（唯一分解定理）

    https://vjudge.net/problem/UVA-10791 题意: 输入整数n,求至少两个正整数,使得它们的最小公倍数为n,且这些整数的和最小. 思路: 首先对n进行质因数分解,举个例子 ...

  9. Android -- service 利用广播调用服务的方法

    1. 实现原理,在Service里面注册一个广播接收者, 想要调用的时候app发送出广播, 后台的service里面的广播接收者接收到广播,并调用service里面的方法. 2. 示例代码 MainA ...

  10. IE8 JSON is not defined

    问题原因: 昨天遇到了一个问题.就是用ajax从后台查询数据时,返回信息无法显示,经过提示发现是IE控制台提示: JSON is not defined 错误. 而且这个问题在本人自己的电脑上是不存在 ...