可访问性远远超出了网站的代码和配色方案。可访问性适用于网站的各个方面,包括最重要的部分之一:内容。使用可访问性最佳实践可以从多方面改善您的网站。例如,它将消除访问者的障碍并提高您的 SEO 排名。
如果您对无障碍功能还不熟悉,请查看什么是 Web 无障碍功能?
借助这些有用的提示,创建新内容或编辑现有内容以使其可访问将变得不再那么困难。
1. 标题和标题
页面标题应有意义且独特。使用标题划分 挪威手机号码数据库 内容部分。
页面标题应有意义且独特:
页面标题应该是页面的主要主题。
不同的页面不应该共享相同的标题。
使用清晰且描述性的页面标题:
页面标题应该描述页面的目的。
页面标题有助于引导网站访问者。
页面标题显示在站点地图和搜索结果中。页面标题应帮助访问者快速找到他们正在寻找的内容。
用标题划分内容部分:
标题样式有六种:H1、H2、H3、H4、H5 和 H6。
标题是分层次的,并按重要性排序:H1 是最重要的标题,而 H6 是最不重要的。
每个页面都必须有一个标题(H1)。
每页只能有一个 H1,但每页其他标题没有限制。
按适当的顺序使用标题:
不要根据标题的大小来选择标题;要根据标题在内容中的级别来使用标题。
不要从上往下跳过标题等级。例如,H4 不应直接跟在 H2 后面。
标题标签永远不应为空。
按适当的顺序使用标题。
按重要性而不是风格顺序使用标题。
2. 文本
使用清晰简洁的语言:
为一个只受过九年教育的人写一篇文章。
使用一般读者能够理解的清晰、简单的语言来写作。
避免使用行话和行业特定语言。
当需要行业特定语言时,通过添加定义来解释术语以提供上下文。
解释缩写。
相同的缩写在不同语境中可能有不同的含义。为了帮助访客理解缩写的语境,请添加解释其含义的定义。
提供明确的指示:
许多游客难以辨别颜色;例如,视力不佳的人通常色觉受限。
除了单独使用颜色之外,还可以使用其他方式来传达信息。
添加下划线、图标和/或粗体将有助于区分链接和纯文本。
避免使用仅依赖颜色的指令,例如“单击蓝色链接”。
使用其他方式来传达信息,而不仅仅是颜色。例如,如果没有文字标签,色盲人士可能难以理解带有彩色线条的图表。
示例折线图显示了使用除颜色以外的其他方式传达信息的重要性。
通过形状、颜色和文本标签传达信息的图表将减少障碍。
感官特征:
有些游客有残疾,无法感知形状、大小,或无法使用有关空间位置或方向的信息。
避免使用仅依赖感官特征的指令,例如“单击左侧的圆形按钮”。
3. 链接
链接文本应该是唯一的,并描述链接的目的:
避免模糊的链接。
避免使用“阅读更多”或“了解更多”之类的链接文字。相反,请描述链接的目的。例如,“阅读更多有关我们的服务”可以阐明链接的目的。
共享链接文本的链接必须指向同一目标。例如,两个带有“关于我们”文本的链接必须链接到同一页面。
链接不应在新窗口或选项卡中打开:
如果链接必须在新窗口中打开,请提前通知访问者点击链接将打开新窗口。例如,在链接文本中添加“(在新窗口中打开)”将有助于满足此要求。
4. 图像
替代文本(也称为 alt 文本):
WordPress 替代文本字段的屏幕截图。
WordPress 提供了一个字段,可以为媒体库中的每个图像添加替代文本。
替代文本应为一到两句准确描述图像的句子。
不要包含“图片”或“图像”。
使用正确的语法。
限制使用关键词。关键词不是必需的。
替代文本不应提供与图像附近的文本相同的信息。
屏幕阅读器将向访问者读出替代文本,以便他们能够看到图像。
提供替代文本来描述非文本内容:
撰写替代文本时,请考虑图像周围的文本。
装饰图像不需要替代文字。
装饰图像纯粹是为了美观目的,不会给内容添加信息,也没有功能。
如果您不确定图像是否具有装饰性,请添加替代文本。
不要忘记向 SVG 添加替代文本。
图片标题:
不要在图像上使用标题属性。
使用替代文本时,图像标题是不必要的和多余的。
图片说明:
图片标题添加了额外的内容。
可能需要支持信息并且需要标题的图像示例有信息图表、地图、图形和图表。
没有文本图像:
不要将文本用作图像的一部分。
访问者可以调整纯文本以使其更易读,但当文本是图像的一部分时则无法提高易读性。
如果文本是图像的一部分,屏幕阅读器就无法向访问者读出文本。
一些例外包括徽标、信息图表、屏幕截图、地图、图形和图表。
信息图显示了图像和文本的错误和正确使用方式。
避免将文本用作图像的一部分。徽标、信息图、屏幕截图、图表和图形除外。
链接图片:
链接图像有一个动作并且需要替代文本。
在替代文本中描述链接的用途。
颜色对比:
传达信息的图像(例如信息图、图形、图表和链接图标)的对比度应至少为 3:1。例如,如果图标的颜色与背景颜色太相似,访问者可能会忽略社交媒体图标。
Webaim 颜色对比度检查器是一个方便的工具,可以评估前景色与背景色的对比度是否至少为 3:1。
5. 视频
图片说明:
对于带有音频的视频,字幕是必需的。
某些服务会为视频添加隐藏字幕,例如 YouTube 和 Vimeo,但可能需要您的团队手动编辑。自动字幕通常会跳过单词或添加错误的单词。
成绩单:
成绩单本质上是视频的脚本。
对于因任何原因无法观看视频的访客,文字记录提供了替代文本。
文字记录为视障游客提供了不带音频的视频背景。
如果周围内容是视频的替代文本,则不需要抄本。
描述:
描述以听觉方式解释视频中出现的视觉信息。
描述有助于为有视觉或认知障碍的游客提供背景信息。
背景音频:
背景音频不应干扰演讲内容。当人们讲话时,请降低音量或消除背景音频。
手语:
为了让您的视频更易于访问,请考虑添加手语。
6. 表格
表格需要适当的ARIA 属性才能访问,这可能需要 Web 开发人员的帮助。
使用屏幕阅读器时,必须按逻辑顺序读取表格单元格,这可能很难实现,可能需要 Web 开发人员的帮助。
视觉外观必须灵活以适应所有屏幕尺寸,这可能需要 Web 开发人员进行额外的样式设计。
避免或简化复杂的表格。
有些屏幕阅读器不支持复杂的表格。
表格单元格永远不应为空