Bootstrap3 屏幕阅读器和键盘导航

屏幕阅读器和键盘导航

Bootstrap3 中，.sr-only类可以对屏幕阅读器以外的设备隐藏内容。.sr-only和.sr-only-focusable联合使用，可以让元素在获得焦点的时候再次显示出来（如，使用键盘导航的用户）。如：

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

这个类也可以作为 mixin 使用。如：

// 作为 mixin 使用
.skip-navigation {
.sr-only();
.sr-only-focusable();
}

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

Bootstrap3 屏幕阅读器和键盘导航相关推荐

WAI-ARIA和屏幕阅读器
最近看到一个面试题上面有一个问题是:请解释ARIA和屏幕阅读器是什么?以及如何使用网站实现无障碍访问? 然后在看bootstrap的时候也有很多属性不知道是什么意思,就搜了一下,下面总结: WAI-A ...
屏幕阅读器安全吗_如何为屏幕阅读器设计网站布局
屏幕阅读器安全吗 It's easy to think about a layout as being a primarily visual concern. The header goes up t ...
BootStrap4工具类之屏幕阅读器
目录官方文档地址其他文档地址 sr-only sr-only-focusable 整体代码官方文档地址 https://getbootstrap.com/docs/4.4/utilities/s ...
html 文本阅读器,在HTML中,我如何才能获得仅供屏幕阅读器(即盲人)访问的文本？...
至于alt文本,你是正确的,只适用于图像..但你可以使用aria-label代替非图像元素的alt属性,如下所示: 有效的解决方案 ARIA标签★★★★★★ aria-label(不用aria-lab ...
html阅读器怎么关闭,HTML – 屏幕阅读器如何处理显示flex？
我正在编写一个 HTML表单,其中某些字段的必要性取决于其他字段的值,因此会动态更改.我想通过在每个必填字段之前的标签上添加星号来呈现该必要性的视觉提示.由于它是纯粹的可视化,并且相应标签中的必需属性 ...
关于屏幕阅读器和 sr-only
.sr-only = screen reader only 用于读屏器识别使用. 转载于:https://www.cnblogs.com/osimly/p/5830198.html
解决警告: PowerShell 检测到你可能正在使用屏幕阅读器，并且已出于兼容性目的禁用 PSReadLine。如果要重新启用它，请运行 “Import-Module PSReadLine“。
参考两个地方: PowerShell 提示出于兼容性目的已禁用PSReadLine问题 | 烟雨平生 (hduzn.cn) (209条消息) vsCode打开终端,提示 "无法加载文件C:\ ...
打造全键盘操作的PDF阅读器
其实我只想要一个非常简单的PDF阅读器,不要很花哨的功能,只要能够: 速度够快,不要翻一页等半天: 全键盘操作,不想在鼠标和键盘之间来回倒腾: 可以改变背景色,深夜的白光好刺眼: 自由旋转页面,有些P ...
C#入门学习-----图书阅读器(WPF 用户控件技术)
欢迎大家提出意见,一起讨论! 转载请标明是引用于 http://blog.csdn.net/chenyujing1234 需要源码请与我联系. 编译平台:VS2008 + .Net Framework ...

Bootstrap3 屏幕阅读器和键盘导航

屏幕阅读器和键盘导航

Bootstrap3 屏幕阅读器和键盘导航相关推荐

最新文章

热门文章