Bootstrap 中sr-only-focusable/visualy-hidden-focusable类的用途是什么？

sqyvllje 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(3)|浏览(134)

很明显，关于sr-only-focusable（最近的Bootstrap称为visually-hidden-focusable）的文档或文章并不多。官方文档在http：//getbootstrap.com/css/#helper-classes-screen-readers，看起来并不那么容易理解。有人能帮我吗？

twitter-bootstrap

来源：https://stackoverflow.com/questions/34175774/what-is-the-use-of-sr-only-focusable-visually-hidden-focusable-class-in-bootstra

3条答案

按热度按时间

d4so4syb1#

在理解sr-only-focusable之前，必须先理解sr-only。
有时屏幕设计对于视力正常的用户来说是完全可以理解的。但是需要屏幕阅读器的用户可能无法在没有附加信息的情况下理解给定元素的上下文/用途。为视力正常的用户将这些信息添加到页面中可能会使屏幕混乱。添加具有sr-only类的元素会导致该元素在视觉上脱离屏幕，但屏幕阅读器仍然可以阅读。这样的元素是放置使用屏幕阅读器的用户所需的上下文信息的好地方。
但如果sr-only元素是input或其他能够接收焦点的元素，则会出现问题。如果用户通过键盘导航页面，但不使用屏幕阅读器，则当sr-only元素获得焦点时，用户将不知道什么具有焦点，或者该做什么。
sr-only-focusable类使sr-only元素在元素获得焦点时变为可见，并在元素失去焦点时再次隐藏它。这仅在sr-only元素通过键盘获得焦点时发生。只要用户通过鼠标导航，sr-only元素就永远不会获得焦点，并保持隐藏状态。
当一个可获得焦点的元素被赋予sr-only类时，它也应该被赋予sr-only-focusable类。如果隐藏的元素不能获得焦点，那么sr-only就是所需要的全部。

赞(0）回复(0）举报 2022-12-07

yyhrrdl82#

sr-only-focusable允许只使用键盘的视力正常的用户看到"跳到联系人“链接。一种使用方法如下：
HTML格式：

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

CSS：

// bootstrap
:focus.sr-only {
  // undo the hiding
  width: auto;
  height: auto;
  margin: 0;
  overflow: auto;
  clip: auto;
}

html页面，其中您的主要内容是：

<div class="container" id="content">

赞(0）回复(0）举报 2022-12-07

u7up0aaq3#

.sr-only类对除屏幕阅读器之外的所有设备隐藏一个元素。.sr-only-focusable类非常有用，特别是对于skip-nav链接。例如：
提供跳过链接并确保它在聚焦时可见。这为用户提供了额外的控制。
[2.4.1旁路模块][1]
跳转链接可用于提供对页面或视图的主要内容的快速访问。这允许用户轻松绕过全局重复的内容，如网站的主导航或持久搜索小部件。
下面是我使用的CSS：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.sr-only-focusable:focus {
    position: relative;
    width: auto;
    height: auto;
    clip: initial;
    margin: inherit;
    padding: inherit;
    border: initial;
}

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 中sr-only-focusable/visualy-hidden-focusable类的用途是什么？

3条答案

相关问题

热门标签

最新问答