可访问性和 WordPress 的终极指南
所以您想制作一个可访问的 WordPress 网站?恭喜-您的网站将面向最广泛的受众开放！
不确定可访问性为何有价值? 可访问性网站的优势包括更快的加载速度、更好的 SEO 和有利于公关.另外，制作一个可访问的网站是正确的做法.
全球 15% 的人口有残疾.因此，考虑可访问性不仅仅是网站管理员的责任.从网站所有者到数字项目经理、设计师、编辑、内容编写者以及与网站相关的任何其他人，每个人都应该考虑网络可访问性.
在创建可访问的网站时需要解决的一些常见问题包括使文本屏幕阅读器友好，包括图像的适当替代文本、确保最佳颜色对比度、为视频添加字幕以及确保您的网站可通过键盘导航.
当您继续阅读时，请记住，WordPress 可访问性比合规性更重要 ，以下提示将有助于确保您一切顺利.
网站无障碍
"数字可访问性是全球残疾人的公民权利和人权."
Lainey Feingold，残疾权利律师和作者
每天，越来越多的人被驱使去工作、购物、使用服务和在线查找信息.
然而，很大一部分人口有残疾(例如失去四肢、视力障碍等)、可访问性有限(例如他们没有电脑，只有手机，反之亦然)或其他障碍难以访问、导航或阅读您网站上的内容.
事实上，全世界有超过 10 亿人受到残疾的影响.我们中的大多数人认为我们可以打开笔记本电脑或拿出智能手机，享受无限制地获取信息、通信、商业和娱乐这一事实，而数字世界中的残疾人会经历许多挑战、限制和障碍.
即使在编写本指南时，数字世界的大部分人仍然没有意识到可访问性问题.
例如，您是否知道我们最近庆祝了 第十届全球无障碍意识日?
或者说，犹他州立大学残疾人中心的 WebAIM 计划每年都会对排名前 100 万的网站的主页进行评估，并根据其 2021 年 WebAIM Million Report，其中 97% 的页面失败了 Web 内容可访问性指南，平均每个错误 51.4页面?
人权法旨在保护数字环境中的人类多样性.这就是网络对无障碍法律、标准和准则的遵守发挥作用的地方.
例如:
WCAG 合规性 – 网页内容可访问性指南 (WCAG) 2.0，AA 级为残疾人社区提供了最广泛接受的网络可访问性和无障碍体验技术要求.
ADA 合规性 – 美国残疾人法案 (ADA)禁止歧视美国残疾人.尽管它主要针对公共企业 和 缺少根据明确的无障碍指南，ADA 第三条要求提供公共住宿和商业设施的场所必须可供残疾人使用，包括基于网络的应用和移动应用.
我的网站是否必须符合 WCAG/ADA 标准?
"网站无障碍诉讼和威胁索赔已成为大生意……越来越多的律师事务所提起诉讼或发送要求信，指控残疾人因网站无法访问而无法访问企业的商品和服务."
一句话……是的！
尽管 WCAG 和 ADA 合规性的具体标准有些含糊，但所有网站至少应在 WCAG 合规性三个级别(初级、中级或高级)中的一个或多个级别上符合 WCAG.
所有网站都必须符合 ADA 标准吗?
这就是事情变得有点棘手的地方.
地方和州政府网站必须可根据 ADA 第二章和康复法案第 508 条访问.由于美国残疾人法案 (ADA) 第三章涉及公共企业，并没有专门针对网站，但是，从技术上讲，可以(并且确实)发生的是，可以对网站无法访问的企业提起 ADA 民事诉讼，然后法院有决定是否要求商家提供可访问的网站.
此决定可能因提起诉讼的地点以及网站是否:
- 被视为"公共场所"(如果是，则该网站必须可访问)，并且
- 属于一家同时拥有为公众服务的实体店的企业.
当谈到面向公众的网站时，ADA 合规性如此灰暗的原因是，在 1990 年 ADA 创建时，网站的使用并不像今天这样普遍，因此立法没有解决这些问题.
尽管该法案多年来一直在更新，但其语言仍然没有专门针对网络可访问性.因此，是否所有网站都必须符合 ADA 的不确定性.
不符合 Web 可访问性的后果
遵守 ADA 和 WCAG 的成本可能从数百美元到数万美元不等.
然而，如果不遵守无障碍法律和法规，您最终可能会花费更多……从数万美元到数十万美元不等.
WCAG 是美国《残疾人法案》第 508 条和美国残疾人法案均遵循的事实上的国际标准.
然而，正如 移动和网络相关 ADA 诉讼的数量增加.
残障人士不仅是sue_bigblanks/" target="a像 Domino's、床、浴室和除了家得宝、雅诗兰黛等数十家网站无法访问之外，许多网站还对网站所有者违反 ADA 提起诉讼.
底线:如果您的网站向公众提供服务或销售产品，则您可能违反 ADA，因此请确保您学习并尽一切努力 WordPress 网站可访问.
有关 WCAG、ADA、网络可访问性、网络标准合规性和其他相关主题的其他信息的链接，请参阅下面的资源部分.
WordPress 和辅助功能
本网站开发人员指南涵盖了使您的 WordPress 网站易于访问的许多要点，包括最好的 WordPress 可访问性插件和主题.我们还建议您阅读我们关于如何向客户传达网站可访问性的重要性的文章.
此外，请查看本指南，了解如何满足内容无障碍指南.
如果您是网站所有者，请与您的网站开发人员讨论实施网络可访问性审计.
可访问性就绪的 WordPress 主题
WordPress 主题目录是可访问性就绪 WordPress 主题的最佳起点在 wordpress.org 上.
WordPress 主题目录 (WordPress.org)WordPress 主题目录提供了一个功能过滤器，允许用户在其免费主题数据库中搜索可访问性就绪的主题.
使用 WordPress 主题目录的功能过滤器来查找可访问性就绪的主题.在 WordPress 主题目录中搜索"可访问性就绪"主题会显示数十个可访问性就绪的主题.您还可以使用功能过滤器搜索按布局、功能或主题排序的"无障碍功能就绪"主题，并使用其他过滤器参数进一步细化和缩小搜索范围，或在搜索栏中输入关键字，例如"WCAG".
WordPress 主题目录结果可访问性就绪 WordPress 主题.对于要包含在具有"无障碍就绪"标签的主题目录中的 WordPress 主题，主题必须符合 WordPress 主题审核团队.
主题必须满足 WordPress 主题目录可访问性要求才能使用可访问性标签.必需和推荐的无障碍指南包括键盘导航、控件、跳过链接、内容链接、表单、标题、对比、图像、媒体和屏幕阅读器文本(下文进一步讨论).
WordPress 主题手册可访问性要求.
不符合主题审核团队标准的主题不会在 WordPress 主题目录中添加"可访问性就绪"标签.
如果您选择使用免费增值、高级或付费 WordPress 主题，请确保您的主题具有内置的辅助功能.如果您决定为您的企业或组织构建自定义网站，请先咨询 Web 开发人员，以确保在开始项目之前讨论和审查任何可访问性问题.如果您正在构建自己的主题，一个很好的起点是 Underscores 入门主题，它遵循网络标准并具有许多内置无障碍功能.
请务必注意，虽然主题标记为在 WordPress.org 上准备好可访问性 不仅满足了通常的主题审查指南，还通过了额外的可访问性检查，例如以 Web 内容无障碍指南 2.0 (WCAG 2.0) AA 级，使用无障碍主题并不免除您使您的内容、网站导航和网站其他区域无障碍的责任.
WordPress 主题审核团队的无障碍通知.正如主题审核团队在 辅助功能部分，
"标记为可访问性就绪的主题已满足此处列出的必要准则，不应被解释为满足任何级别的正式无障碍要求."
WordPress 主题辅助功能清单
那么一个好的可访问性就绪的 WordPress 主题应该具有哪些功能?
这是我们要介绍的所有内容.单击链接可转到该特定部分.
图像的适当替换文字
键盘可访问链接和菜单
可见焦点样式
颜色对比
按钮和链接的原生 HTML
跳过链接
语义 HTML 标题
屏幕阅读器文本
无自动播放媒体
显式表单标签
ARIA Landmark 角色
清除排版
无障碍主题中不允许的内容
正 Tabindex 值
访问键
有用的资源和无障碍测试工具
图片的适当替代文字
屏幕阅读器需要替代文字来帮助视障者或有学习障碍的用户理解内容中包含的图像.
您的主题中包含的任何内嵌图片都应该有替代文字.这包括特色图片.然而，即使存在显示 alt 属性的代码，仍需要为这些图像输入适当制作的替代文本.
背景图片不需要 alt 属性.应通过 CSS 添加纯装饰性图像，如背景图像和其他非文本内容，以便辅助技术可以忽略它.
替代文字:是
默认的 WordPress 主题带有内置的无障碍功能.
例如，在 二十十九 主题中，当您指定一个页面时作为您网站的主页，WordPress 会使用页面标题自动创建替代文本.
WordPress 主题 2019 突出显示了特色图片 alt 标签.在 27主题，标题图片替代文字与网站标题相匹配.
特色图片替代文字是用户输入的任何内容.
如果没有替代文本，替代文本默认为 alt ="".这其实很合理，因为一个空白的 alt 属性比不相关的 alt 文本要好.
要了解有关使用 alt 标签进行辅助功能的更多信息，请查看我们的综合指南，了解如何在 WordPress 中为可访问性创建完美的图片 alt 标签.. >
键盘可访问链接和菜单——尤其是下拉菜单
某些行动不便的用户无法使用鼠标.他们依靠键盘(或类似键盘的设备)来导航页面的交互功能.Tab 键用于在元素中向前移动.Shift+Tab 用于返回.
您应该能够通过浏览页面来访问以下内容:
- 链接
- 菜单
- 按钮
- 表单字段
通常对于菜单，顶级菜单项可以通过键盘访问，但下拉子菜单不能！
示例:可访问的下拉菜单
Gently 主题以可访问的方式实现下拉菜单，因为它们也可以通过键盘访问作为鼠标.
如果创建自己的主题，Underscores 内置了可通过键盘访问的下拉菜单，或者您可以尝试本教程:创建可访问的下拉菜单.
可见焦点样式(焦点指示器)
键盘用户需要一些视觉效果来显示他们在浏览时在页面上的位置.如果没有 焦点样式，他们很难说出他们在与什么互动.
尝试使用键盘切换您访问的下一个网页.
你能说出哪个链接是哪个吗?
主题通常会重置默认的焦点样式.你会经常在 style.css 文件中看到这个:
加载要点 raewrites/9a28c8448e0b3a26707fe239a
不幸的是，此代码降低了可访问性，开发人员通常不会考虑设置自己的焦点样式.
焦点样式可能包括彩色背景——但它也必须符合颜色对比准则.
可见焦点样式:是
企鹅 主题以不同方式实现焦点样式，但很容易分辨哪个链接是现在的.
足够的色彩对比度
有视力障碍的人可能难以阅读低对比度背景.对于没有视力问题的人来说，即使在明亮的阳光下在笔记本电脑上阅读也很棘手.
推荐同WCAG 2.0 AA级 :普通文本的对比度为 4.5:1，大文本的对比度为 3:1(定义为 14 磅(通常为 18.66 像素)和粗体或更大，或 18 磅(通常为 24 像素)或更大)，对比度为 at图形和用户界面组件(例如表单输入边框)至少为 3:1.AAA 级要求普通文本的对比度至少为 7:1，大文本的对比度至少为 4.5:1.
颜色对比:无
WAVE WebAIM 网页无障碍工具表明 ZBlackbeard 主题有许多低色区域对比.
按钮和链接的本机 HTML(或与本机控件行为相同的标记)
不正确的标记将禁止您的用户使用自定义控件.例如，用户可能无法使用 Tab 键或按下自定义按钮.
如果你想让一个按钮表现得像一个按钮，最简单的方法就是使用 <button> 元素！所有辅助技术都可以理解.
这是一个关于使用按钮元素提高网络可访问性的视频:
跳过链接
跳过链接让屏幕阅读器用户或键盘用户免于仔细阅读一长串重复的链接.
可以通过 CSS 使视力正常的用户不可见跳过链接.只有当用户通过标签页浏览页面或使用屏幕阅读器时，它们才会可见.
跳过链接:是
26 使用"跳至内容"链接，允许用户绕过导航直接进入页面内容.
一些无障碍主题也有跳转到侧边栏的链接.
语义 HTML 标题
好的标题结构对每个人都有好处.视力正常的用户可以轻松浏览页面以查看重要内容.屏幕阅读器用户可以按标题级别导航到他们想要的部分.
标题:是
像二十七岁这样的主题以逻辑顺序标记标题，如使用 VoiceOver 所见.
标题:否
在不同的主题上查看相同的内容表明实现的可访问性较低.
在"H1 Hello world!"和"H3 One think on"Hello world"之间有两个 H1 标题和一个缺失的标题级别.视障人士可能想知道标题 2 去哪儿了！
"阅读更多"链接的屏幕阅读器文本
屏幕阅读器用户查看上下文之外的链接，例如在带有摘录的博客页面上可能会遇到许多"阅读更多"链接.如果没有屏幕阅读器文本，链接目的地将不明显.
屏幕阅读器文本对于 图标字体，不能有替代文字.
屏幕阅读器文本:否
Illdy 主题有很多"阅读更多"链接.快速浏览链接的用户只会听到"阅读更多"，而不会知道每个链接指向哪个帖子.
屏幕阅读器文本:是
Splinter 主题为其 Font Awesome 社交图标实现屏幕阅读器文本.Facebook 图标的屏幕阅读器文本显示为"前往 Facebook".
有关实施此技术和所需 CSS 的详细信息，请阅读 使用 WordPress Core 为屏幕阅读器隐藏文本.
无自动播放媒体，例如旋转木马
自动播放媒体对有认知障碍的人不利-如果用户无法控制它，它可能会令人困惑或痛苦.如果媒体包含音频，屏幕阅读器用户也会受到影响.它会干扰页面的阅读.
最好在插件中包含媒体元素.
主题用于演示，插件用于功能.
显式表单标签
没有明确标签的表单可能会给屏幕阅读器用户带来问题.他们可能无法分辨每个字段需要哪些信息.
表单域中的占位符文本是不够的！
表单标签:是
Milky Way 主题标记表单文本字段和文本区域，因此毫无疑问关于他们做什么.必填字段已明确标记.
表单标签:否
在 Inspirez 主题中，如果 VoiceOver 用户打开 Rotor 到表单控件菜单，他们可以听到评论表单字段的描述.
但是，使用 Tab 键访问这些字段并不会透露其用途.此外，一旦选择该字段，占位符文本就会消失.
用户可能会想:"我在这里填写什么?姓名或电子邮件?"，然后输入错误的内容，这带来了所有的挫败感.
ARIA 地标角色
与标题一样，ARIA 标志性角色 帮助屏幕阅读器用户导航到页面的特定部分.
要使用的角色是:
- 横幅
- 主要
- 补充
- 内容信息
- 搜索
- 导航
ARIA 角色:是
Some 主题在整个页面结构中实现 ARIA 角色.VoiceOver 用户可以切换到标有角色的不同区域.
主要角色对应主要内容区域.
清晰排版
花哨的字体看起来很酷，但会让所有用户更难阅读您的网站.Nielsen Norman Group 指出内容易读性是可用性的关键指标. >
这不是可访问性就绪主题的要求，但建议这样做.
指导:
- 正文至少使用 16 像素的字体大小.
- 选择 serif 或 sans serif 字体，而不是草书或幻想字体.
- 避免大写大写文本.
排版:否
Germaine 主题使用 Great Vibes 字体作为标题.很漂亮，但这种脚本字体不如 serif 或 sans-serif 字体清晰.
不应在无障碍主题中的内容
在没有警告的情况下在新窗口/标签页中打开的链接
如果链接在新窗口或标签中意外打开，一些用户会感到困惑，因为他们无法使用"返回"按钮返回到原来的位置.
注意链接中的 target="_blank".
最好完全避免在新窗口中打开链接，但如果必须，请提供警告.
最简单和最好的方法是通过文本.在链接文本后添加(在新窗口中打开).
链接:无
Dream Spa 主题在定制器中有一个按钮，用于向滑块添加幻灯片.这会在一个新窗口中打开，但没有什么可以事先让用户知道的.
链接:是的
Tiny Framework 结合使用 Font Awesome 外部链接图标和屏幕阅读器文本来指示链接在新窗口中打开.
正 Tabindex 值
1 或以上的 Tabindex 值会扰乱自然的 Tab 键顺序并混淆仅使用键盘的用户的期望.
Adrian Roselli 在他的文章中说明了为什么你不应该这样做:不要使用大于 0 的 Tabindex.
访问键
Accesskeys 原则上是个好主意，但跨网站的实现是不一致的.使用某些相同的键盘快捷键的辅助技术也存在问题.
有用的资源和可访问性测试工具
资源:
工具:
- Chrome 开发者工具
- 屏幕阅读器-免费的有 NVDA for Windows 和 VoiceOver for Mac
- 键盘 – 使用 Tab 键导航
- HeadingsMap Chrome 扩展程序，用于检查标题级别
- WebAIM WAVE Tool Chrome 扩展程序
- ColorSafe – 易于使用的颜色组合
- 对比度-检查颜色对比度
结论
使用无障碍主题对于拥有无障碍网站至关重要，但这并不能保证无障碍，因为这要求网站和流程(例如向网站添加内容)所涉及的每个人都符合无障碍标准.
>
可访问性最终由用户决定，而不是主题作者.只有在网站完成后才能根据正式的可访问标准(例如 WCAG 2.0 AA)进行测试.
打个比方，您可以设计一栋交通便利的办公楼，但在装修方面选择不当会毁了它，例如使用难以辨认的标牌、松散的地毯、不舒服的家具、办公桌之间的间距不足以及其他职业健康问题危险.
同样，如果您选择添加无法访问的内容，例如:
- 不给文章添加标题
- 添加"点击此处"链接
- 在句子中使用行话
- 添加没有控件的自动播放视频
因此，重要的是不仅要构建一个可访问性就绪的网站，还要始终将可访问性放在您的脑海中，尤其是在创建网络内容或培训负责更新您网站内容的任何人时.
实现可访问性是一个持续的过程.尽早开始考虑可访问性，您将走上正确的道路，为用户提供真正包容的网站.
网络可访问性-有用的参考
有关更多信息，请查看以下链接:
编者注:为了准确和相关性，这篇文章已经更新.[最初发表时间:2017 年 4 月/修订时间:2021 年 8 月]
标签:
