WordPress主题应该生成每个人都可以使用的页面，包括那些看不到或使用鼠标的页面。默认WordPress主题以相当方便的方式生成内容，但作为主题开发人员，您需要在自己的主题中维护这些可访问性标准。虽然网页可访问性可能是一个复杂的问题，但它只归结为四个原则 - 内容必须是： - 感觉到 内容必须适用于所有人 - 无论使用什么用户代理或用户感觉不到。 - 可操作 用户必须能够有效地移动和操作最终的站点，而不管他们是否使用鼠标。 - 可以理解 内容应以支持理解的方式呈现，包括支持为屏幕阅读器用户构建网站的心理模型。同样地，网站的操作（导航菜单，链接，表单等）应该很容易理解。构建一个包含已知用户行为（如主要内容区域中的下划线链接）的主题有助于此方面。 - 强大的 在广泛的用户代理中，内容必须同样可用。禁用的用户可以使用一系列硬件和软件解决方案（通常称为“辅助技术”）来允许他们访问网络，包括屏幕阅读和语音识别软件;盲文阅读器和开关（单输入设备）。 考虑到这四个原则设计的主题应有助于创建一个可访问的网站。 ## 标题 这不应该需要说明，但标题不仅仅是大而大胆的文字。它们是将内容分解为逻辑子部分的重要方式，并可能被屏幕阅读器用户依赖。 JAWS屏幕阅读器（例如）可以自动创建任何给定页面的标题列表。这允许其用户以类似的方式“扫描”页面内容，使得目标人员可以快速向下滚动页面。 因此，重要的是，标题标签在逻辑上使用，而不是用于任何表示或搜索引擎优化（SEO）效果。包含二十个H1标题的页面可能会产生良好的，理论上的SEO，但它几乎破坏了标题标签的实际使用 - 将复杂的页面分解成子部分。 显然，使用标题标记会因模板而异，但是在构建主题文件时，请尽量保持标题的预期用途。检查您的标题结构的一种方法是使用Firefox的Web Developer工具栏的“信息”菜单下的“查看文档大纲”工具来检查页面。 ## 图片 如果可能，应使用CSS包含装饰图像。 将图像添加到模板标记中的位置，确保它们包含适当的alt属性。 主题中的装饰图像可能包括： - 与标题文字一起使用的横幅或标题图像 - 伴随导航文字链接的图像 主题中的非装饰性图像可能包括： - 替换标题文字的横幅或标题图片 - 用于代替导航文本的图像 - Alt文字 - 装饰图像（null alt） - 非装饰图像（适当的alt - 至少有1个示例） 要测试您的模板标记中的图像是信息丰富的还是纯粹的装饰，请使用简单的替代文本决策树来检查图像是否正确使用alt属性。 ## 跳过链接 跳过链接提供了一种机制，使用户可以在输入任何给定的页面时直接导航到内容或导航。 例如，当生成的页面标记中的内容是最上面的，菜单标记低于页面时，跳过链接可能允许用户“跳到导航”。 在主导航菜单在页面标记中最上方的情况下，将使用“跳到内容”链接。 在具有多个菜单和内容区域的设计中，可以使用多个跳过链接 - 例如： - 跳到主导航栏 - 跳到二级导航 - 跳到页脚 这些链接可能最初使用适当的CSS技术放置在屏幕之外，但应保持屏幕阅读器用户可用，并可在视线键盘导航仪的焦点上可见。 # Links ##链接文本 链接文本应描述它链接到的资源 - 即使文本从上下文中读出。 一些辅助软件扫描页面以获取链接，并将其作为简单列表呈现给用户。 在这些情况下，所有链接都将从上下文中读出。 所以链接中使用的文本很重要。 不应该将链接用作链接。 避免重复的非上下文文本字符串，如多个“阅读更多”链接。 使用像： ``` <?php the_content( the_title('', '', false) . __('Continue reading', 'theme_text_domain') ); ?> ``` 或者，如果您在the_content（）之外生成链接，请尝试以下操作： ``` <?php printf( __('%1$s%2$s%3$s - read more', 'theme_text_domain'), '<span>', get_the_title(), '</span>');?> ``` >[danger] 请注意，在每种情况下，链接的唯一部分（即帖子标题）正在呈现。 这将进一步增强在链接被读取的情况下的可访问性。 然而，只要隐藏方法将文本提供给屏幕阅读器（例如使用绝对定位或CSS文本缩进属性）将其移离屏幕，则可以将文章标题隐藏在“阅读更多”链接中 。 事实上，这种方法可能会对其他用户群体带来积极的好处，通过减少可见的屏幕杂乱。 ## 链接突出显示 除Opera之外，大多数现代浏览器中的默认焦点都显得非常无用。 这意味着一旦看到的键盘导航器就可以快速地变成“丢失”，因为它们不能很容易地区分哪个链接具有当前焦点。 提供良好：重点和：主动链接突出显示（在导航菜单和其他地方）是一个非常简单的解决方案。 在“投资回报率”方面，它极大地提高了视力键盘导航，而您的努力却极少。 这也很容易测试。 只需将鼠标放在一边，然后尝试挑选主题中的页面。 如果你容易迷路，别人也会迷路。 尝试复制您当前的：hover造型，看看是否有帮助。 ## Link 下划线 一般来说，如果链接在导航菜单之外，应该加下划线。 单独使用颜色来区分链接是不够的，因为每个人都不能察觉颜色。 下划线链接意味着用户不必“鼠标擦洗”一页或播放“猜测哪个文本是链接”。 还要考虑删除下划线作为您的悬停/主动/聚焦造型的一部分，以确保您不依赖于颜色。 ## Form 标记 一旦遇到`<form>`标签，屏幕阅读器软件就可以自动地从读取模式切换到交互式的表单模式。在这种形式模式中，软件可能不会渲染与表单控件没有明确关联的文本，因此任何使用普通的`<p> </ p>`标签的文本都可能会被忽略。为了提取所有重要信息，屏幕阅读器用户可能需要在表单中进行两次通过，以提取所有视觉信息 - 一次在表单模式中，然后再次以阅读模式。这是一个重要的可及性障碍。 因此，所有形式（包括主题的注释格式）都应确保`<form> </ form>`标签中的所有内容都通过`<label>`标签，其属性和id属性在相关的输入标签内。避免在表单块中使用纯文本（例如.inside`<p> </ p>`标签）。 到目前为止，在将多个标签与单个表单控件相关联时，没有报告任何问题，因此，如果需要，可以使用“多标签”方法。 ## 表格提交 提交后的回复（包括任何错误消息）应始终是可察觉的。 如果可能，应在提交后页面的顶部生成错误消息，以便用户立即意识到任何问题。 读取上下文时，错误消息也应该是有意义的。 ## 单输入表单 仅具有单个输入（例如标准搜索表单）的表单可以将关联的输入标签放置在屏幕之外，以确保标签文本可用于屏幕阅读器用户。 ## 标题属性 不要依靠title属性来传达信息。 该属性可能不适用于所有用户（例如，语音识别（VR）软件用户）。 如果信息足够重要，可以添加为清晰的文本，以便每个人都可以看到它。 ## 可读性 有时，您可以做的最简单的事情是创建一个更易读的页面。 从屏幕读取比阅读打印页面要困难得多。 拥挤的文字，大量的图片和太多的信息使得页面很难阅读。 一些通用的设计技巧包括： - 白色空间是你的朋友。 将其用作减少分心的工具。 - CSS line-height属性可以增加段落文本的可读性。 - CSS letter-spacing属性可以增加标题和较大文本的可读性。 - 将导航元素定位在逻辑位置，并且不允许它们侵入页面的主要内容区域。 - 确保所有字体都足够大，以便可读取。 - 如果您使用自定义字体，请将其嵌入到主题中，这样您就不会依赖第三方网站进行字体传送。 如果您真的需要第三方网站的字体，请检查文本是否仍然可读，如果字体不可用。 ## 颜色 全频谱色盲模拟大约有10％的互联网用户在看到颜色，特别是那些患有色盲症的患者中有问题。 最常见的色盲形式影响红/绿光谱。 受影响的用户可以将红色，橙色，黄色和绿色感知为单色，其余颜色被感知为蓝色，逐渐变为紫色。 在罕见形式的条件下，蓝色和粉红色可能占主导地位，或者患者可能无法察觉任何颜色 - 所有颜色都减少到灰色阴影。 只要有可能，使用色盲模拟器检查您的设计调色板，避免单独使用颜色来区分重要元素。 ## 对比 具有视力障碍的游客可能喜欢较高的对比度页面，而阅读困难者可能需要较低的对比度。 尽量达到合理平衡，避免极端。 请记住，当它们包含文本或用于代替文本时，对比度级别也适用于图像。 只要有可能，使用颜色对比工具来查看您的主题中的前景/背景对比度。 您应该达到的最小对比度是4.5:1。 但是，请尽量避免对比度很高，因为这些可能会对使用屏幕放大镜的人造成像素化问题。 ## jQuery & JavaScript 您仍然可以在可访问的主题中使用jQuery。 只是不要依赖它来做任何主要的功能。 通过浏览主题的输出进行测试，同时在浏览器中禁用JavaScript。 网站是否仍然有效？ 在实现jQuery幻灯片等时，请检查它们是否可以由键盘单独导航。 使用ARIA确实在未来的发展方面提供了一些好处，但是再次不应该依赖于当前时间。 还注意到，使用ARIA属性将导致标记验证失败，但使用ARIA比瞄准100％验证更有价值。 在所有与脚本相关的事情中，旨在逐步增强和优雅的退化。 ## 验证 验证你的主题的标记和CSS。 验证仍然是确保您的主题页面在整个Web软件范围内显示出最佳优势的最佳方式。 大多数人会通过一个网站来描述“作者 - >查看器”的通信，但实际上它实际上是“作者 - >机器（服务器） - >机器（浏览器） - >查看器”。 由于其核心是机器机器通信，所以遵循相关规范（尽可能地）最大化有效的通信是有意义的 - 无论使用最终用户代理来查看站点。 也就是说，验证解析器只是那个愚蠢的软件。 例如，ARIA将导致验证失败，但仍然是创建可访问主题的最佳方式。 总是用最好的判断力，如有疑问，请问... ## 辅助功能测试工具 这里的一个警告字。 与使用严格二进制“右/错”方法运行的标记和CSS验证器不同，可访问性验证器必须尝试并审核复杂场景。 因此，他们的报告可能包括假阳性和/或阴性。 再次，不要害怕在这些情况下使用你最好的判断或问问。 有很多与辅助功能相关的资源（包括论坛）可以帮助。 ## 跨浏览器测试 一切手段，在您首选的浏览器中开发您的主题，但请记住检查其在当前版本的Internet Explorer，Firefox，Chrome，Opera和Safari中的输出。那些使用Mac内置屏幕阅读器VoiceOver的人可能没有选择使用除Safari以外的任何东西。语音识别软件Dragon Naturally Speaking的用户可能会依靠Internet Explorer来有效地浏览网页。由于其众多内置的辅助功能，Opera是残疾人用户中受欢迎的浏览器选择。 在大多数情况下，残疾用户完全有能力优化他们的硬件和软件以满足他们的具体需求。您的工作 - 作为主题开发人员，是确保在一系列现代网络浏览器上查看时，页面内容不会被加扰，隐藏或丢失。显然，并不是所有的浏览器都会以完全相同的方式显示一个给定的页面，但很少有一个可访问性的问题。然而，大多数现代浏览器可以以有效和令人愉快的方式显示有效的页面。不要瞄准像素完美。这样疯狂！相反的目的是在每个测试浏览器中有吸引力，有效，可导航的网站。 ## 产生新的Windows或Tabs 产生新的窗口打破浏览器的“后退”按钮，留下一些瞄准的键盘导航员搁浅，没有任何返回原始页面的方法。 因此，请避免链接和其他打开新窗口或选项卡的元素。 如果真的，真的，必须产生一个新的窗口或选项卡，以明文形式发出警告（最好是链接或控件文本的一部分），以便用户做出明智的选择。 ## 自动播放和动画 如果有可能，避免使用动画内容。 1997年，日本电视上的卡通将700多名儿童带到医院，其中包括约500人缉获（引证）。未经用户明确许可，不得播放任何声音。 自动播放适用于： - 声音 - 为屏幕阅读器用户创造问题，他们可能会发现其软件的输出被网站的音频淹没。 - 动画（Flash或.gif图像） - 可能会在某些情况下触发癫痫发作。 - 幻灯片 - 可能会为屏幕阅读器用户（谁呈现不断变化的内容）和瞄准的键盘导航器（谁可能无法移动通过幻灯片）创建问题。 - 其他特殊效果 - 已知会引起癫痫发作的坠雪等影响。 如果您绝对必须具有（1）自动启动的移动或音频内容，（2）持续超过5秒，并且（3）与其他内容并行呈现，请确保有一个易于操作的机制可暂停，停止，或隐藏它。还要确保视觉动画在任何一秒钟内不会闪烁三次以上。 ## Tabindexing 在任何情况下，都应避免tabindex属性（在特定情况下除负号tabindex之外）。 作为主题开发者，您不是确定任何一个人想要移动到下一个网站的最佳人选。 只有用户可以做出决定，所以不要试图劫持他们的浏览器。 只要一个页面内的自然标签顺序是合乎逻辑的，并且可以很容易地感知到，大多数用户完全有能力整理自己的导航需求 - 非常感谢。 ## 访问键 再次 - 理论上的一个好主意 - 但实际上，实施时往往是一个完整的灾难。 除了用户没有关于哪些快捷方式在网站上做什么的信息外，使用除数字键之外的任何东西都可能会在用户自己的浏览软件中劫持快捷键。 ## 使WordPress可访问 使WordPress可访问是WordPress无障碍组的官方博客，致力于改进核心WordPress和相关项目的可访问性。 我们的目标是为WordPress核心，主题和插件开发人员提供可访问性建议，反馈和帮助。 任何人都可以加入讨论。 您还可以通过电子邮件或通过订阅Feed发表帖子和评论来关注讨论。 如果您在更正式的基础上加入我们，我们也会非常高兴。 # 资源 ## General - W3C Web Accessibility Initiative ‘How To Meet WCAG2.0’ Quick Reference - Make WordPress Accessible - Accessites.org — general articles on web accessible design. - Accessify Forum - Evaluation, Repair, and Transformation Tools for Web Content Accessibility ## 对比度和颜色测试 - Vischeck — Online color blindness simulator - Contrast Analyser for Windows and Mac — free desktop tool with color blindness simulators. - Sim Daltonism — a color blindness simulator for Mac OS X. - Alternative Color Contrast Analyzer — provides a warning for high contrasts. ## Toolbars - WAVE — Firefox accessibility evaluation tool. - Firefox Accessibility Extension — check the use of structural markup in a page. - Web Developer Toolbar for Firefox — adds various web developer tools to the browser.