隐藏内容

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

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

04/10/2025, by Ivan

隐藏内容对可访问性非常有用。我们可以在视觉上隐藏某些内容，只让屏幕阅读器用户看到；我们也可以从屏幕阅读器中隐藏内容，仅让视觉用户看到；或者我们可以对两者都隐藏。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 隐藏内容页面。

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

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

Menu