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. React 根据 state 修改className

    className={ this.state.isLike ? 'active iconfont icon-xihuan' : 'iconfont icon-xihuan1' }

  2. 结合grabcut和inpaint，实现人像去除

    在OpenCV提供更多函数中,grabcut能够实现抠图,inpaint能够实现修补.那么把两者结合起来,就能够实现简单的“人像去除”功能,也就是框选一个人后,使用周围的景象对人像进行修补.虽然效果比 ...

  3. linux及安全第六周总结——20135227黄晓妍

    总结部分: 操作系统内核三大功能: 进程管理,内存管理,文件系统 最核心的是进程管理 为了管理,首先要对每一个进程进行描述.进程描述符提供了所有内核需要了解的信息. 进程控制模块:task_struc ...

  4. 20145219《网络对抗》Web基础

    20145219<网络对抗>Web基础 基础问题回答 什么是表单? HTML表单用于收集用户输入,用<form>元素定义,包含不同类型的 input元素.复选框.单选按钮.提交 ...

  5. 20145325张梓靖 《Java程序设计》第16周课程总结

    20145325张梓靖 <Java程序设计>第16周课程总结 实验报告链接汇总 实验一 "Java开发环境的熟悉" 实验二 "Java面向对象程序设计&quo ...

  6. Cooperation.GTST团队第二周项目总结

    项目进展 这周我们把工作主要放在了UI界面的实现上,为了让整款APP看上去能够更加高大上,我们决定采用Android 5.0开始推出的一个Material Design风格的导航控件Toolbar. ...

  7. SwitchyOmega 设置修改代理

    在开发过程中,web.config中很多配置都是生产的域名,但是在本地开发时并不能用这些生产的地址,就想在打开该域名时跳转到本地ip地址. 修改方式: 1.hosts文件修改 这种方式是在整个电脑上面 ...

  8. UVa 557 汉堡

    https://vjudge.net/problem/UVA-557 题意: 有n个牛肉堡和n个鸡肉堡给2n个孩子吃.每个孩子在吃之前都要抛硬币,正面吃牛肉堡,反面吃鸡肉堡.如果剩下的所有汉堡都一样, ...

  9. redis缓存穿透、缓存击穿、缓存雪崩

    缓存穿透 缓存穿透是指查询一个一定不存在的数据,由于缓存是不命中时需要从数据库查询,查不到数据则不写入缓存,这将导致这个不存在的数据每次请求都要到数据库去查询,造成缓存穿透. 解决办法: 预校验 在控 ...

  10. Java IO流-字符流

    2017-11-05 18:34:39 Java中的IO流按数据类型分类分为两种,一是字节流,二是字符流.字符流的出现是为了简化文本数据的读入和写出操作. 如果操作的文件是文本文件,那么使用字符流会大 ...