logo

额外区块类型 (EBT) - 全新的布局构建器体验❗

额外区块类型 (EBT) - 样式化、可定制的区块类型：幻灯片、标签页、卡片、手风琴等更多类型。内置背景、DOM Box、JavaScript 插件的设置。立即体验布局构建的未来。

演示 EBT 模块 下载 EBT 模块

❗额外段落类型 (EPT) - 全新的 Paragraphs 体验

额外段落类型 (EPT) - 类似的基于 Paragraph 的模块集合。

演示 EPT 模块 滚动

滚动
  1. 首页
  2. Drupal 文档
  3. 无障碍功能

隐藏内容

04/10/2025, by Ivan

Menu

隐藏内容对可访问性非常有用。我们可以在视觉上隐藏某些内容，只让屏幕阅读器用户看到；我们也可以从屏幕阅读器中隐藏内容，仅让视觉用户看到；或者我们可以对两者都隐藏。Drupal 自带了一些内置的 CSS 类，可以帮助确保你的意图明确。我们不建议使用 { display:none; }，因为它经常被误用。

技术     视觉上              隐藏     屏幕阅读器隐藏 附加信息

CSS: 

<div class="visually-hidden"></div>

             是                    否

这是 Drupal 8 内置的。在 Drupal 7 中，它是 class="element-invisible"。

CSS: 

<div class="hidden"></div>

             是                     是

这是 Drupal 8 内置的。在 Drupal 7 中，它是 class="element-invisible"。

HTML5 属性: 

<div hidden></div>

             是                     是

在支持的浏览器中，这等同于 CSS { display:none; }

ARIA 属性: 

<div aria-hidden="true"></div>

             否                     是 内置于现代浏览器中。与 HTML5 的 hidden 属性非常相似

CSS: 

<div class="visually-hidden focusable"></div>

             是                     是 这是 Drupal 8 内置的。在 Drupal 7 中，它是 class="element-invisible element-focusable"

 

此表格格式来自 18F 隐藏内容页面。