分类： 网页设计最佳实践

简介

在本课中，我们将讨论如何测试您的内容以确保其可访问性。如果您已经观看过本主题的第一课，那么您已经熟悉“可访问性”这一术语，并了解其重要性。让我们回顾一下。数字可访问性是一个广义术语，旨在确保尽可能多的人能够使用网络，无论是操作在线服务还是消费在线内容。虽然可访问性具有法律和商业意义，但重要的是要记住，这些指南旨在为所有人提供更好的浏览体验。确保您的网站可访问的最简单方法是考虑在设计开发阶段就着手。然而，基于区块的主题提供了极大的灵活性，能力越大，责任越大。幸运的是，许多技术性的可访问性问题通常可以通过自动化工具轻松检测和修复。例如，正确的标题层级、颜色对比度、有意义的替代文本、链接文本等。讽刺的是，这些正是网络上最常见的可访问性失败点。在本教程中，我们将重点扭转这一局面，向您展示如何在发布前测试您创建的内容，确保您的文章和页面是可用的。

WordPress 内置辅助工具

WordPress 在编辑器中包含两个内置的可访问性辅助工具。第一点：语义结构。点击“文档概览”，然后选择“大纲”，检查您的标题顺序是否正确。从 H2 开始，按降序依次排列到 H6，中间不能跳过。WordPress 会用浅橙色标记错误的标题级别，并在您使用了不正确的标题级别时通知您。第二点：颜色对比度。如果您选择的文本和背景颜色组合未能提供足够的对比度，WordPress 会提醒您，表明这种颜色组合可能让用户阅读困难。尝试为背景和文本使用对比色，以增强可访问性。修复这些问题后，您的网站就已经比互联网上大多数大型网站做得更好了。要修复颜色对比度，请选择相关区块（在本例中为“按钮”区块），然后打开右侧边栏设置中的“样式”。接着，在“颜色”下方，我们可以更改背景颜色和文本颜色，以确保颜色对比度良好。

插件

接下来，让我们探索一些可访问性插件。WP Tota11y、Sa11y 和 Editoria11y 是彼此的不同变体。

WP Tota11y

WordPress Tota11y 是一个轻量级插件，可检查前端和编辑器中的常见可访问性合规性，通知您任何不正确的标题级别、颜色对比度、不良链接文本、表单元素中缺失的标签以及图像中缺失的替代文本。该工具具有一个简洁的实验性功能，称为“屏幕阅读器魔杖”，可以像屏幕阅读器一样查看元素。您可以在每个类别中浏览警报，并查看建议的修复方法，但建议在前端进行操作，因为在编辑器中它可能会检查整个浏览器窗口，导致混淆。

Sa11y

第二点：Sa11y 在前端提供了一套全面的检查功能。您可以在“设置”中切换一些额外的检查项，例如可读性、高级链接、颜色对比度和表单标签，您还可以在那里找到颜色滤镜，用于测试您的页面在几种色盲类型用户眼中的显示效果。虽然错误被清晰标记，但描述较为笼统，修复方法也不够直接。Sa11y 使管理员能够在其高级设置管理页面上定义和控制各种功能。

Editoria11y

Editoria11y 专注于内容和结构。不会检查颜色对比度等设计元素。启用后，它会在前端和编辑器中显示警报，通知您有关文档大纲、标题级别、链接文本和目标（即“在新标签页中打开”）以及图像中缺失的替代文本。其目标是帮助作者和编辑发现常见问题，并用通俗易懂的语言描述失败点，建议修复方法，并允许用户在警报无关时隐藏或忽略它。Editoria11y 还会生成报告，并使管理员能够排除警报、跳过某些测试或根据 CSS 选择器包含元素。

Accessibility Checker

另外，还有流行的 Accessibility Checker，它在文章或页面编辑器窗口中添加了一个新部分，并在前端添加了一个悬浮按钮。它会显示错误摘要、详细说明（包括相关代码片段）、可能的修复方法，以及忽略单个警报的选项。

操作系统应用和浏览器扩展

如果您想更进一步，测试更多技术方面，可以执行以下操作。第一点，尝试仅用键盘浏览您的网站。不要使用鼠标。使用 Tab 键在链接、按钮和表单字段之间导航，按 Enter 或空格键激活这些页面上的交互元素。记录下需要修复的无功能元素和缺失的视觉指示器。第二点，您可以更改设备的配色方案，以确保在深色或高对比度模式下内容显示正常且功能正常。

结论

总之，创建或维护内容的作者和内容管理者可以直接控制关键方面，如标题层级、文本大小、颜色对比度、链接、图片替代文本等。换句话说，你无需接触代码就能避免生成难以访问的内容。只需保持用心和同理心即可。

引言

创建包容性网站的无障碍指南。在本课中，我们将讨论如何设计网站，让每个人都能使用和享受，无论他们的能力如何。让我们从基础开始。网络无障碍是指设计适用于所有人的网站，包括那些有视觉、听觉、运动或认知障碍的人。但当我们为无障碍设计时，实际上是在改善所有用户的体验。你不仅在做正确的事，还能提升网站的搜索引擎优化和整体可用性。此外，在许多国家，这也是法律要求。

WordPress 与无障碍

WordPress 在无障碍方面取得了巨大进步。许多主题和插件正朝着无障碍的方向努力，平台本身也旨在达到 Web 内容无障碍指南 2.2 的 AA 级别。作为设计师，我们可以利用这些功能并加以提升。那么，我们该怎么做呢？

关键原则

让我们将其分解为一些关键原则。首先是颜色对比度。你需要确保文本和背景颜色之间有足够的对比度。一个名为 WebAIM 对比度检查器的便捷工具可以帮助你解决这个问题。接下来是排版。选择易于阅读的字体，并将基础字号设为至少 16 像素。请注意，这仅仅是最佳实践指南。使用至少 1.5 的行高以获得最佳可读性，避免全大写和小型大写字母，并仅将下划线用于链接。此外，不应使用两端对齐的文本。默认情况下，WordPress 不允许两端对齐的文本，因为它会因间距不规则而降低可读性。现在来看结构和布局。将你的网站想象成一本组织良好的书。你需要一个清晰、一致的布局，并具有逻辑阅读顺序。使用正确的标题层级，这就像为你的网站创建目录。导航是网站的另一个关键部分。设计菜单时要使其既便于鼠标操作，也便于键盘操作。别忘了表单。清晰标记所有内容。每个表单输入都应有相应的标签，并与字段正确关联，所有表单元素都应可通过键盘操作。按钮也应包含描述其操作的有意义文本。最后，始终为图像提供描述性的替代文本。替代文本是对图像的简短描述，用于改善无障碍性并帮助搜索引擎理解图像。
此外，应始终提供视频字幕和音频转录。所有这些步骤都有助于为你的视觉内容赋予声音。

WordPress 特定技巧

现在，让我们进入一些 WordPress 特定的技巧。在选择主题时，寻找 WordPress 仓库中标有“无障碍就绪”的主题。这将帮助你抢先一步实现无障碍。接下来，测试插件呢？某些类型的 WordPress 插件如果没有按照最佳实践设计，可能会导致无障碍问题。一个好的方法是检查插件的可用性，仅依靠键盘导航而不使用鼠标。此外，你可以使用像 WebAIM 的 WAVE 这样的工具来检查插件的无障碍问题。还有一些很棒的无障碍插件，提供检查和改善内容无障碍性的工具。在下一课中，我们将进一步探讨这一点。测试至关重要。把它想象成校对，但针对的是包容性。在设计网站时，始终完成无障碍审计。不要将其视为事后考虑。记住，为无障碍设计是一个持续的过程。通过在 WordPress 设计中优先考虑无障碍性，你不仅是在遵循最佳实践，更是在为每个人创造一个更具包容性的网络。

引言

在本课中，我们将探讨为何使用站点编辑器进行设计和原型制作是一个好主意。课程成果包括识别使用站点编辑器的优势、使用站点编辑器预览样式选择以及强调与网页相关的设计原则。站点编辑器是WordPress的视觉设计工具，可让您自定义从页眉和页脚到整个页面布局的所有内容。

使用站点编辑器的优势

编辑器具有以下几个优势：

• 当您掌握区块后，由于整个站点完全由区块构建，您可以轻松管理站点上的所有内容。区块取代了所有先前的方法，包括短代码、小工具、嵌入和自定义HTML，从而简化了您的内容创建过程。
• 通过在WordPress内部直接设计，您可以简化从概念到实施的流程，便于更轻松的更新和维护。这种方法还减少了设计师与开发者之间传统的交接挑战。
• 编辑器提供设计的实时交互预览，使您能够立即进行测试和优化。
• 此外，通过使用WordPress的原生工具进行设计，您可以确保与平台的兼容性，并减少通常与外部设计软件相关的学习曲线。

在站点编辑器中设计

接下来，让我们探索在站点编辑器中进行设计。开始时，请确保安装并激活一个基于区块的主题，例如Twenty Twenty-Five，然后打开站点编辑器。接着，我们可以进入样式，然后选择“缩小”选项。然后我们就可以开始样式设计了。首先，我将更新文本的排版，然后是标题。接着，我将进入颜色并更新我的调色板。我将更改背景颜色，以及对比色和强调色。一旦我更新了调色板，我会确保增强交互元素，例如按钮。所以，让我们继续选择我们的按钮区块，并将文本外观改为半粗体。

接下来，我们可以继续修改页眉和页脚模板部分。因此，我将打开我的页面模板，因为模板当然提供了页面的结构，然后我将在列表视图中选择我的页眉。然后我们有一系列模式可供选择。当您找到所需的模式后，您可以修改它以符合您的设计需求。然后继续处理您的页脚模板部分。一旦您对页眉和页脚满意，您可以自定义您的模板。例如，所有存档模板、单篇文章模板，甚至搜索结果模板。对于这个例子，让我们修改404模板，该模板在未找到页面时显示。当然，您可以完全更改此模板，但我只是要调整和修改内容的布局。一旦我们编辑了模板，我们就可以开始选择模式和部分，并根据我们的设计愿景进行修改。

提醒一下，区块优先设计意味着将您的网站分解为更小的、可重用的组件，这些组件可以混合搭配以创建多样化的布局。在第一个例子中，我们可以复制主题自带的一个模式，将其保存为同步或非同步模式，然后进入“我的模式”，并相应地修改模式或可重用组件。然后您还可以选择从头构建一个同步或非同步模式。当您返回模式时，可以点击“添加新模式”，适当命名，选择一个类别，然后选择是否同步。然后您可以构建您的模式或可重用组件。然后您会注意到此模式也出现在“我的模式”下方。

与网页相关的设计原则

最后，让我们探索一些关键的网页设计原则，这些原则将帮助指导您的旅程，也称为格式塔原则，即接近性、相似性、连续性和闭合性。

1. 接近性：将相关元素分组在一起，以营造组织感和结构感。在上面的例子中，您会注意到没有使用足够的间距来将相关部分分组在一起。
2. 相似性：对相关元素使用一致的样式以表明它们的联系。在这个例子中，类别之间的相似性帮助用户快速找到他们需要的内容。让我们从不同角度看待相似性。在下面的例子中，行动号召按钮使用不同的颜色来显示不同的操作，但它们相似的尺寸和形状使它们感觉相互关联。通过在您的网站上对类似功能或内容类型使用一致的样式（如颜色、形状或尺寸），您可以帮助用户快速识别并理解不同元素的用途。
3. 连续性：对齐元素以创建眼睛可以跟随的自然流动。
4. 闭合性：让用户的大脑完成形状或模式，减少视觉杂乱。这一原则常用于标志设计和图标中，以创建简单而令人难忘的视觉效果。如果我们看WWF的标志，您会注意到我们填补了空白以完成熊猫的图像。通过掌握站点编辑器并理解这些基本的网页设计原则，您已经具备了在WordPress内部直接创建功能网站的能力。

结论

通过掌握站点编辑器并理解这些基本的网页设计原则，您将能够轻松创建视觉上引人注目且功能强大的 WordPress 设计。