暗影 隐藏的文字 
说明
在页面上添加非可见文本,供屏幕阅读器和其他辅助技术使用.
安装
npm install @bbc/psammead-visually-hidden-text
道具
| 参数 | 类型 | 需求 | 默认 | 示例 |
|---|---|---|---|---|
| 没有道具. |
使用量
import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text';
const WrappingComponent = () => (
<VisuallyHiddenText>Some offscreen text</VisuallyHiddenText>
);
请记住,如果CSS被禁用,任何 children 将显示内含。 测试组件的用法应包括禁用页面样式.
何时使用此组件
视觉隐藏的文本应当与任何依赖视觉辅助或造型来传播其目的的组件一起使用,因为这些辅助工具可能不用于依赖辅助技术的用户.
例如,如果在一页上看到图像,图像上的源/拷贝右上方可能似乎在目的上显而易见,但当在图像的替代文字之后立即说出来时,这种组件的内容可能令人费解或困惑。 因此,它利用这一组成部分在读取其正文内容之前提供额外上下文.
不使用此组件时
避免使用带有会造成不必要的重复的文本的这个组件。 例如,不需要在“图像”旁边添加视觉隐藏文字 img 标记,因为辅助技术已经明确告知图像的存在,而这很可能只会证明给用户带来混乱或刺激.
类似地,在添加将通过一篇文章局部出现的隐藏文本时,避免使用可能暗示主体已完结的短语. 突然听到"在[subject]上多读"这样的短语可能会向用户暗示他们已经完成了文章. 为了缓解这种情况,您不妨将内容包装为 aside ARIA 地标 或包括a "斯基普链接",给予用户在辅助技术读取插管的全部内容之前跳出回主体的选择.
捐款
Psammead完全开源. 我们感谢任何贡献,无论是新的组件、错误修正还是总体改进。 请参看我们的主要贡献指南,可查阅: psammead 仓库的根。 。 。 .
行为守则
我们欢迎对这项工作的反馈和帮助。 通过参与这个项目,你同意遵守 行为守则请稍候再读一下.
许可证
萨姆米德 Apache 2.0 许可。 。 。 .