在前端开发中，许多常见的设计模式需要使用无障碍标记和语义化标记。其中一个常见设计模式是“visually hidden”技术，也就是在页面上隐藏元素，但仍然使其可见和可以被屏幕阅读器等辅助工具访问。这种技术可以提高页面可访问性（accessibility）并改善用户体验（user experience）。
在本文中，我们将介绍如何使用 npm 包 @bolt/utilities-visuallyhidden 来实现“visually hidden”技术。
什么是 @bolt/utilities-visuallyhidden？
@bolt/utilities-visuallyhidden 是一个 npm 包，提供了一种快速、简便的方式来对元素进行“visually hidden”处理。这个包适用于在构建 Bolt 网页项目时使用。
这个包提供了一组 CSS 类，可以轻松地将一个元素隐藏起来，但仍让其可访问。这些类在页面开发过程中很常用，尤其是在构建访问性强的网站时。
如何安装 @bolt/utilities-visuallyhidden？
如果你已经使用了 npm，你可以在你的项目目录下使用以下命令来安装 @bolt/utilities-visuallyhidden：
npm install @bolt/utilities-visuallyhidden --save
然后，你可以在你的代码中导入这个包：
@import '@bolt/utilities-visuallyhidden/utilities-visuallyhidden.scss';
如何使用 @bolt/utilities-visuallyhidden？
使用 @bolt/utilities-visuallyhidden 只需要添加 CSS 类，在元素上添加以下类：
.bolt-utilities-visually-hidden
这个类会将元素隐藏，并使其无法被鼠标等设备访问。但是，这个元素仍然可以在屏幕阅读器上访问，从而为无障碍用户提供可访问性。
请注意，该类仅隐藏元素，而不影响其 layout（布局）和渲染（rendering）。
下面是一个简单的例子，演示如何使用 @bolt/utilities-visuallyhidden 来处理两个连接按钮：
<div> <a href="#">Link 1</a> <a href="#">Link 2</a> <span class="bolt-utilities-visually-hidden">Hidden text</span> </div>
在这个例子中，我们将第三个元素隐藏，但这个元素仍然可以被屏幕阅读器等设备访问，并将文本“Hidden text”读取给用户。
总结
@bolt/utilities-visuallyhidden 是一个非常有用的 npm 包，你可以使用它来实现“visually hidden”技术，从而提高页面可访问性和用户体验。使用这个包非常简单，只需要在元素上添加一个类，就可以将元素隐藏起来，并在屏幕阅读器上提供可访问性。我们希望这篇文章能够帮助你使用这个包，改进你的网站，并提供更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaa4fb5cbfe1ea0610420