博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
bootstrap中sr-only是什么属性?用途是什么?
阅读量:6266 次
发布时间:2019-06-22

本文共 455 字,大约阅读时间需要 1 分钟。

开发中经常发现bootStrap中有sr-only类,如下图

图片描述

但是,好像在浏览器中并没有显现出什么效果。你作为正常用户觉得没效果就对了。

作用

这是专门为残障人士浏览网页设计的。

在前端开发中,有些时候设计图上面会出现仅供正常视觉用户看的元素。比如:导航栏菜单当前页面选中高亮状态,这些状态只有视力正常的人才能正常使用。

而残障人士,弱势或盲人是很难或者根本看不出导航菜单高亮的。他们上网可能借助的是屏幕阅读器,也就是 screen reader(sr),屏幕阅读器需要找到能辨识的文本说明然后“读”出来给用户听。

问题是:一些元素,比如选中高亮状态无法读出。因此我们还要写上这些元素的文本说明,但是又不需要展示给普通用户看到,于是加上 sr-only 的意义就在于能保证屏幕阅读器正确读取且不会影响正常人的使用。

比如:导航栏首页链接被选中高亮,我们可以这样表示。

  • 首页 (current)
  • 这样正常人看起来只有首页两个字,而屏幕阅读器却可以读首页 current

    推荐:

    星空幻颖,严颖

    个人主页:

    图片描述

    转载地址:http://uikpa.baihongyu.com/

    你可能感兴趣的文章
    [解决]小程序要求的 TLS 版本必须大于等于 1.2
    查看>>
    jQuery箭头切换图片 - 学习笔记
    查看>>
    第七周编程总结
    查看>>
    济南-1031试题解题报告
    查看>>
    最短路径(迪杰斯特拉算法)- 数据结构和算法64
    查看>>
    WCF或webservice跨域 这可能是由于试图以跨域方式访问服务而又没有正确的跨域策略...
    查看>>
    链表例题
    查看>>
    网站设置中的各个功能
    查看>>
    微软职位内部推荐-SW Engineer II for Skype
    查看>>
    python中的关键字符
    查看>>
    微软职位内部推荐-Senior Engineering Lead
    查看>>
    docker探索-CentOS7中配置Docker的yum源并升级安装docker1.13(十)
    查看>>
    开始学习WPF,发一款简陋的图片浏览工具 wpfimage-0.0.3
    查看>>
    Zookeeper 学习笔记之 Leader Election
    查看>>
    windws本地策略编辑器
    查看>>
    Ubuntu12.04下Linux内核模块动态加载
    查看>>
    yii2出现的400错误
    查看>>
    PYTHON1.day09
    查看>>
    复制、移动和删除:cp, rm, mv
    查看>>
    Return View()
    查看>>