视觉上隐藏
当一个元素需要对辅助技术可用(例如，屏幕阅读器)，但需要隐藏时使用。
总是为页面的主要部分提供一个标题，比如一张卡片。在极少数情况下，标题在视觉上是多余的，意思是由上下文传达的。与其省略标题，不如将标题包裹在视觉上隐藏的组件中。
进口｛卡，VisuallyHidden，标题，FormLayout，文本框，}从“@shopify /北极星”；进口反应从“反应”；函数VisuallyHiddenExample（）｛返回（<卡分段><VisuallyHidden><标题>标题和描述</标题></VisuallyHidden><FormLayout><文本字段标签＝“标题”价值＝“手工木勺”onChange＝｛（）= >｛}}自动完成＝“关闭”/><文本字段标签＝“描述”多行onChange＝｛（）= >｛}}自动完成＝“关闭”/></FormLayout></卡>）；}道具
想让这个功能变得更好吗?请分享你的反馈．
接口
VisuallyHiddenProps
- 孩子们？ 反应．ReactNode
-
要可视化隐藏的内容。
最佳实践
视觉隐藏应该:
- 如果语义标记可以使使用辅助技术的人理解内容，则不使用
- 当语义标记不够时，用于提供额外的上下文
- 用于通常出现但被省略的任何内容
- 与屏幕阅读器一起使用时，在上下文中有意义
可访问性
视觉上隐藏的组件对文本进行样式设置，使其不可见，但它可用于屏幕阅读器等辅助技术和其他语音程序的文本。
组件不应该被用来隐藏交互式内容。