bootstrap class sr-only 什么意思？
bootstrap class sr-only 什么意思？
在看 bootstrap 内联表单时，label 有一个 class 是 sr-only。
sr-only 是给屏幕阅读器用的，是给视力不方便的用户在使用屏幕阅读器时方便查看的。
解释如下1：
全称是 screen reader only，意为：（仅供）屏幕阅读器，这个 class 主要用于增强 accessbility（可访问性）。
有时候 UI 上会出现一些仅供视觉识别的元素，比如说“汉堡包菜单按钮”，只有视力正常的人才能清楚辨识这些元素的作用。而残障人士，比如弱势或盲人是不可能知道这些视觉识别元素是什么的。他们上网使用的是屏幕阅读器，也就是 screen reader（sr），屏幕阅读器需要找到能辨识的文本说明然后“读”出来给用户听。问题是图形元素怎么可能“读出来”呢？因此我们还要写上这些元素的文本说明，但是又不需要展示给普通用户看到，于是加上 sr-only 的意义就在于能保证屏幕阅读器正确读取且不会影响 UI 的视觉呈现。
bootstrap class sr-only 什么意思？的更多相关文章
- 利用Bootstrap快速搭建个人响应式主页（附演示+源码）
1.前言 我们每个程序员都渴望搭建自己的技术博客平台与他人进行交流分享,但使用别人的博客模板没有创意.做网站后台的开发人员可能了解前端,可是自己写一个不错的前端还是很费事的.幸好我们有Bootstra ...
- Knockout.js, Asp.Net MVC and Bootstrap 前端设计
原文地址:http://ddmvc4.codeplex.com/ 原文名称:Design and Develop a website using ASP.NET MVC 4, EF, Knockout ...
- java +bootstrap table 完整例子
需求:现在常用的table 插件很多, 比如 jquey datatables ,不过操作挺 麻烦, 看到推荐的bootstrap 自带的 table,就用到项目来,先看效果:
- Bootstrap 使用
bootstrap模板为使IE6.7.8版本(IE9以下版本)浏览器兼容html5新增的标签,引入下面代码文件即可. <script src="https://oss.maxcdn.c ...
- ASP.NET MVC+Bootstrap 实现短信验证
短信验证大家都已经非常熟悉了,基本上每天都在接触手机短信的验证码,比方某宝,某东购物.站点注冊,网上银行等等,都要验证我们的手机号码真实性.这样做有什么优点呢. 曾经咱们在做站点的时候.为了提高用户注 ...
- Bootstrap的使用。。。
概览 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属 ...
- bootstrap基础学习十篇
bootstrap字体图标(Glyphicons) a.什么是字体图标 字体图标是在 Web 项目中使用的图标字体.虽然,Glyphicons Halflings 需要商业许可,但是您可以通过基于项目 ...
- 旺财速啃H5框架之Bootstrap（五）
在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...
- 旺财速啃H5框架之Bootstrap（四）
上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...
随机推荐
- Vue学习笔记之表单绑定输入
vue的核心:声明式的指令和数据的双向绑定. 那么声明式的指令,已经给大家介绍完了.接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V ...
- TrueCrypt简介及TrueCrypt 7.1a Source.zip源码在VS2008下的编译过程
转载:http://blog.csdn.net/cncrypt/article/details/51565493 转载:http://www.cnblogs.com/shenjieblog/p/521 ...
- ubuntu16.04下安装TensorFlow(GPU加速)----详细图文教程【转】
本文转载自:https://blog.csdn.net/zhaoyu106/article/details/52793183 le/details/52793183 写在前面 一些废话 接触深度学习已 ...
- Tensorflow1.5.0+cuda9.0+cudnn7.0+gtx1080+ubuntu16.04
目录 Tensorflow1.5.0+cuda9.0+cudnn7.0+gtx1080+ubuntu16.04 0. 前记 1. 环境说明 2. 安装GTX1080显卡驱动 3. CUDA 9.0安装 ...
- HDU 4745 Two Rabbits（最长回文子序列）
http://acm.hdu.edu.cn/showproblem.php?pid=4745 题意: 有一个环,现在有两只兔子各从一个点开始起跳,一个沿顺时针,另一个沿逆时针,只能在一圈之内跳,并且每 ...
- POJ 1006 Biorhythnms（中国剩余定理）
http://poj.org/problem?id=1006 题意: (n+d) % 23 = p ;(n+d) % 28 = e ;(n+d) % 33 = i ; 求最小的n. 思路: 这道题就是 ...
- 在 php 中使用 strace、gdb、tcpdump 调试工具
转自:http://www.syyong.com/php/Using-strace-GDB-and-tcpdump-debugging-tools-in-PHP.html 在 php 中我们最常使用调 ...
- json.dump()和json.load()
import json,time # save data to json file def store(data): with open('data.json', 'w') as fw: # 将字典转 ...
- rspec-rails中的一些匹配器只有在特定的类型才能使用。
请求测试 ) expect(response).not_to have_http_status(:created) Model Specs描述模型的行为,一般基于数据库. Request Spec 主 ...
- rails5.2新特性--ActiveStorage， 使用80percent／rails-template
看guide,看ruby-China的好贴,看最新版的书上案例. 以下摘自https://ruby-china.org/topics/36666 作者lyfi2003 用户对上传文件的要求体验: 上传 ...