官方文档地址

https://getbootstrap.com/docs/4.4/utilities/screen-readers/

其他文档地址

http://bs4.vx.link
- http://bs4.vx.link/index.html?tmpui_page=/pages/utilities
https://v4.bootcss.com
- https://v4.bootcss.com/docs/4.3/utilities/screen-readers/

sr-only

通过 .sr-only 将一个元素对所有设备隐藏，除了屏幕阅读器。
也就是只有屏幕阅读器可以读取到 .sr-only 中的内容。

<div class="container"><h1><code>.sr-only</code></h1><p class="lead">通过 <code>.sr-only</code> 将一个元素对所有设备隐藏，除了屏幕阅读器。也就是只有屏幕阅读器可以读取到 <code>.sr-only</code> 中的内容。</p><p><a class="sr-only" href="#content">Skip to main content</a></p></div>

sr-only-focusable

将 .sr-only 和 .sr-only-focusable 结合使用，以便在其被 focused 时再次显示该元素（例如通过键盘使用）

<div class="container"><h1><code>.sr-only-focusable</code></h1><p class="lead">将 <code>.sr-only</code> 和 <code>.sr-only-focusable</code> 结合使用，以便在其被 <code>focused</code> 时再次显示该元素（例如通过键盘使用）</p><p><a class="sr-only sr-only-focusable" href="#content">Skip to main content</a></p></div>

整体代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"/><title>07屏幕阅读器</title><!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">--><!-- 新 Bootstrap4 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body><div class="container"><h1><code>.sr-only</code></h1><p class="lead">通过 <code>.sr-only</code> 将一个元素对所有设备隐藏，除了屏幕阅读器。也就是只有屏幕阅读器可以读取到 <code>.sr-only</code> 中的内容。</p><p><a class="sr-only" href="#content">Skip to main content</a></p></div><div class="container"><h1><code>.sr-only-focusable</code></h1><p class="lead">将 <code>.sr-only</code> 和 <code>.sr-only-focusable</code> 结合使用，以便在其被 <code>focused</code> 时再次显示该元素（例如通过键盘使用）</p><p><a class="sr-only sr-only-focusable" href="#content">Skip to main content</a></p></div><!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

BootStrap4工具类之屏幕阅读器相关推荐

WAI-ARIA和屏幕阅读器
最近看到一个面试题上面有一个问题是:请解释ARIA和屏幕阅读器是什么?以及如何使用网站实现无障碍访问? 然后在看bootstrap的时候也有很多属性不知道是什么意思,就搜了一下,下面总结: WAI-A ...
Bootstrap3 屏幕阅读器和键盘导航
屏幕阅读器和键盘导航 Bootstrap3 中,.sr-only类可以对屏幕阅读器以外的设备隐藏内容..sr-only和.sr-only-focusable联合使用,可以让元素在获得焦点的时候再次显示 ...
屏幕阅读器安全吗_如何为屏幕阅读器设计网站布局
屏幕阅读器安全吗 It's easy to think about a layout as being a primarily visual concern. The header goes up t ...
html 文本阅读器,在HTML中,我如何才能获得仅供屏幕阅读器(即盲人)访问的文本？...
至于alt文本,你是正确的,只适用于图像..但你可以使用aria-label代替非图像元素的alt属性,如下所示: 有效的解决方案 ARIA标签★★★★★★ aria-label(不用aria-lab ...
html阅读器怎么关闭,HTML – 屏幕阅读器如何处理显示flex？
我正在编写一个 HTML表单,其中某些字段的必要性取决于其他字段的值,因此会动态更改.我想通过在每个必填字段之前的标签上添加星号来呈现该必要性的视觉提示.由于它是纯粹的可视化,并且相应标签中的必需属性 ...
BootStrap4工具类之阴影效果
目录官方文档地址其他文档地址说明 shadow-none shadow-sm shadow shadow-lg 整体代码官方文档地址 https://getbootstrap.com/docs ...
java工具类源码阅读,java学习日记第二天（实用的工具类和源码解析一Arrays）
本帖最后由三木猿于 2020-9-18 11:17 编辑每日名言学者须先立志.今日所以悠悠者,只是把学问不曾做一件事看,遇事则且胡乱恁地打过了,此只是志不立. --朱熹工作中经常会用到一些工 ...
工具系列-福昕阅读器-多个窗口打开多个文档
此系列为工具系列,主要包括办公软件.代码编辑器等软件(平台)使用过程中的相关要点. 我们在使用福昕阅读器查看文档时,默认设置是当前只能阅读一个文档窗口,多个文件多个标签. 如果有时候想对比阅读文档,要 ...
BootStrap4工具类之Stretched-link
目录官方文档地址介绍应用于组件Card 应用于媒体组件Media 应用于row 与 col 包含块整体代码官方文档地址 https://getbootstrap.com/docs/4.4/u ...

BootStrap4工具类之屏幕阅读器

目录