设计无障碍页面

无障碍的页面人人都能使用：使用读屏软件的人、视力不佳的人、不喜欢屏幕动效的人，或者只是在阳光下看手机的人。LinkHarbor 会自动处理很多事情，有些则取决于你。本文告诉你需要注意什么。

#LinkHarbor 自动完成的工作

• 如果访客在系统中开启了“减弱动态效果”（Reduce motion），背景视频不会播放，滚动和视差效果以及悬停动画也会关闭
• “标题”模块会输出为真正的标题，读屏软件会用它来定位
• “图片”和“图库”模块中的图片会以你的替代文本作为描述
• 如果你没有为按钮选择文字颜色，LinkHarbor 会选择一个与按钮颜色相配的颜色

#图片的替代文本

替代文本描述图片中能看到的内容。读屏软件会朗读它，图片加载失败时也会显示它。

“图片”模块

模块编辑器中的“替代文本”字段。

“图库”模块

每张图片一个“替代文本”，最多 200 个字符。

• 描述内容，而不是文件：写“木桌上带拉花的卡布奇诺”，而不是“IMG_2041”
• 如果图片中有文字，替代文本中应包含这些文字
• 保持简短，通常一句话就够了

这些字段在哪里，请参阅免费模块详解和内容模块。

#用标题组织结构

较长的页面请用“标题”模块分隔，而不是用大号文字。读屏软件用户会从一个标题跳到下一个标题，从而快速找到想要的内容，例如“营业时间”或“联系方式”。

#清晰的链接标题

• 每个链接单独看也应该能理解：写“PDF 菜单”，而不是“点击这里”
• 不同目标不要使用相同的标题
• 标题开头的表情符号会被朗读出来，请适度使用

关于链接的更多内容，请参阅添加链接并设置样式。

#对比度和可读性

• 确保文字和背景之间有足够的对比度，尤其是使用浅色马卡龙色时
• 如果文字位于背景图片或视频上，请使用主题中的“遮罩不透明度”，让文字保持可读
• 不要只把重要文字放在图片里，使用读屏软件的访客无法读取
• 为文字模块选择易读的字体，字号不要太小

颜色、背景和字体在主题中设置，参见设计。

#谨慎使用自定义 CSS

用自定义 CSS 几乎可以修改任何东西，包括对无障碍很重要的部分。不要隐藏焦点轮廓，不要把文字缩得太小，修改后也要用键盘测试一下页面。参见自定义 CSS。

#亲自测试

1. 在手机上开启读屏功能（iPhone 上的 VoiceOver，Android 上的 TalkBack），听一听你的页面
2. 在系统设置中调大文字，检查所有内容是否仍然可读
3. 在强光下和深色模式下查看页面