可访问性和 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
不幸的是,此代码降低了可访问性,开发人员通常不会考虑设置自己的焦点样式.
焦点样式可能包括彩色背景——但它也必须符合颜色对比准则.
可见焦点样式:是
企鹅 主题以不同方式实现焦点样式,但很容易分辨哪个链接是现在的.