用Divi 5测试可访问性属性

现在，可访问性属性与Divi 5完全兼容，为您提供了一种无编码的方法来添加咏叹调角色，标签和其他屏幕读取器的助手。如果您正在使用Divi 5，则是在不更改工作流程或设计的情况下构建网站可访问性的最简单方法。

随着欧洲可及性法案于6月28日生效，Google越来越喜欢可访问性的最佳实践，现在是时候取得成功了。以下是可访问性属性的工作方式及其如何帮助您的网站达到现代可访问性标准的方式！

Divi 5的可访问性属性

可访问性属性是一个Divi插件，可让您可以直接从Divi Builder中添加ARIA角色，标签和其他可访问性帮助者，而无需编写任何代码。 ARIA（可访问的Internet应用程序）属性可帮助您为无法自行提供足够上下文的元素添加含义，尤其是在Divi 5中构建自定义布局时。

例如，如果您使用文本模块在视觉上样式设计标题或按钮模块来创建召唤，则屏幕读取器将不会自动理解其角色。 ARIA角色和标签使您可以定义每个元素是什么以及辅助技术应如何解释它，而无需更改视觉设计。这有助于确保您的Divi 5站点既可以访问又灵活。

安装插件后，它会自动将自定义输入字段添加到您的各个部分，行，模块和其他Divi元素中。 （要访问ARIA字段，请单击任何元素，然后转到其高级选项卡。）

现在，您可以直接从Divi Builder中定义角色，添加ARIA标签并改善屏幕阅读器的支持。可访问性属性非常适合您的Divi工作流程，每年的费用仅为19美元。它为您提供了一种简单，负担得起的构建可访问网站的方式。

获取可访问性属性

为什么可访问性不再可选

可访问性曾经是您可以推迟的东西，但不再是。现在，它会影响您的法律安全，搜索性能以及用户的信任。

如果您的网站无法访问，那么您不仅仅是落后 - 您处于危险之中。为什么：

• 法律诉讼正在上升：从2025年6月28日起，将执行《欧洲可及性法》。如果您的网站无法访问，并且欧盟的人们使用它，则可以面临罚款或其他罚款。该法律适用于大多数员工超过10名员工，每年赚取超过200万欧元的企业，但也鼓励较小的企业遵循它，因为……
• 可访问性可能会影响您的排名：虽然可访问性不是排名因素，但许多可访问功能可能间接影响您的SEO。诸如Alt文本，正确的标题结构和描述性标签之类的东西使您的网站更容易供用户和搜索引擎理解。因此，如果您的网站很难导航，则可以在搜索结果中悄悄地落后。
• 无法访问的网站将用户驱逐出境：如果您的网站无法访问，则残疾人可能无法使用它。当他们迅速离开时，它可能会表明搜索引擎并损害您排名的用户体验差。更改诸如清晰的结构，可读字体和简单的键盘导航使您的网站可供所有人使用。

很容易假设可访问性仅对大型企业很重要，但是即使您是一个较小的品牌，忽略它仍然会伤害您。

在Divi 5中设置可访问性属性

本节将带您通过Divi 5网站中的可访问性属性中的安装和访问工具。

安装插件

购买可访问性属性后，您将收到插件的zip文件。将其上传到您的WordPress插件>添加插件>上传插件。

现在，添加ZIP文件，然后单击立即安装。

最后，激活它。

激活后，您会注意到在每个元素的高级选项卡中添加了额外的ARIA字段。

现在，您可以直接从Divi Builder轻松地将这些可访问性属性添加到页面上的每个元素。我们将在短短一分钟内介绍一下。在此之前，让我们快速查看您在可访问性属性仪表板中可用的所有选项。

可访问性属性演练

插件在您的Divi站点上处于活动状态后，将添加到WordPress侧边栏中的可访问性选项卡。单击它以访问您的仪表板，其中包含四个选项卡：管理员，模块，元素和产品。

让我们查看每个选项卡的选项：

“管理”选项卡

此选项卡为您提供帐户级控件，例如管理订阅（可以支持） ，检查插件状态，选择是否删除卸载上的数据以及将所有设置重置为默认设置。

“模块”选项卡

它使您可以决定在Divi模块中启用哪些ARIA属性。只有选定的选项出现在“高级”选项卡上。您可能需要让它们全部打开。

并非每个模块都需要可访问性属性。例如，您可以安全地跳过没有字幕或链接的图库，例如分隔线，动画图像或图像库，因为它们不会为屏幕阅读器添加有意义的内容。

要排除模块，请在“兼容性”部分中输入模块slug（例如et_pb_image）。这告诉插件在添加ARIA字段时跳过它，并仅专注于实际需要可访问性支持的模块。

元素选项卡

网站的某些部分不是由Divi模块构建的。它们可能来自您的主题，其他插件或普通的HTML。 “元素”选项卡可让您使用CSS选择器将ARIA属性添加到网站的那些部分。您可能需要包括菜单，图标，按钮和表单字段等全局元素，而不是在Divi Builder内部创建的字段。

• ARIA MAIN：告诉屏幕读取器您的主内容从哪里开始，以便他们可以跳过菜单或侧边栏。
• ARIA隐藏：隐藏装饰元素，因此辅助技术不会大声读出它们。
• ARIA链接：标记不是实际链接作为链接的可单击元素。这有助于屏幕读取器正确识别它们。
• ARIA按钮：将按钮角色添加到切换图标或类似按钮的样式文本链接中。
• 必需的ARIA：即使HTML不这样说，也会根据需要标记自定义表单字段。
• TAB索引：使用TAB键使重要元素可以达到，这有助于仅键盘导航。

每个设置允许您使用CSS选择器添加或删除这些角色。如果您不确定从哪里开始，ARIA MAIN和ARIA按钮是很好的第一选择，通常会错过且易于设置。

产品选项卡具有来自同一创作者的其他产品。

使用Divi 5中的可访问性属性

设置后，真正的工作发生在构建器内部。每个咏叹调领域都有目的。让我们看看它的作用，何时使用它以及它如何在真实布局中有助于可访问性。

1。将角色分配给具有ARIA角色的元素

ARIA角色字段使您可以将目的分配给代码中可能不明显的元素。例如，如果您使用Blurb模块来创建呼叫声，则屏幕读取器不会自动将其识别为按钮。您需要为其分配角色按钮，以使其功能清晰，以使用户使用语音命令或键盘快捷键导航。

像下面的这种情况下一样，此字体包括一个按钮。

要添加ARIA角色，请在选项上切换并分配以下值：

• ARIA角色类型作为小部件角色（这是按钮和滑块等交互元素的类别。）
• ARIA角色价值作为按钮
• ARIA角色选择器为.ET_PB_BUTTON （这是Divi的类用于按钮模块。）

2。添加带有ARIA标签的屏幕阅读器的清晰标签

虽然ARIA角色告诉辅助技术是什么元素，但​​ARIA标签解释了它的作用。当元素没有可见的文本，例如图标，定制风格的按钮或任何旨在互动互动但没有大声说出来的内容时，这一点尤其有用。让我们使用同一示例将其分解。

我们已经添加了角色，但是按钮文字说“现在捐款”。对于视觉用户来说，这很好，但是使用屏幕读取器的人可能需要更多的上下文，因为该按钮多次出现。

要将标签分配给此按钮，只需在ARIA标签上切换并添加一个简短的标签即可。

现在，该按钮仍将在屏幕上说“立即捐赠”，但是屏幕阅读器将阅读完整的标签，以帮助用户准确了解按钮的功能以及其领导地点。

3。提供额外的背景和ARIA描述

ARIA描述使屏幕读取器对元素的详细信息比标签可以解释的要多。虽然标签讲述了什么是什么，但描述说明了为什么它很重要。

例如，假设您在一页上有多个“立即捐赠”按钮，每个按钮都置于沿海清理，海洋教育或栖息地修复等不同原因之下。屏幕阅读器用户可能会直接降落在按钮上，并错过附近的内容。这是ARIA描述有帮助的地方。

让我们拿第一张卡：沿海清理。为了添加更多上下文，您可以添加一个描述，例如“此捐赠支持海洋清理和野生动植物保护”，作为ARIA描述文本。

对其他按钮做同样的事情，使他们都在视觉上说“现在捐赠”，屏幕读者也会宣布每个按钮的描述不同。这为用户提供了完整的上下文，而无需更改他们在屏幕上看到的内容。

4。屏幕读取器隐藏装饰元素

当您想在视觉上显示某些内容，例如图标或背景图像，但不希望屏幕读取器宣布它时，Aria隐藏了。这使体验更加专注于依靠辅助技术的用户。

例如，拍摄广告系列的预览图像，例如海鸥的照片。它支持设计，但并未添加超出标题或描述中已经存在的任何新信息。在这里，您可以使用隐藏的ARIA将其隐藏在屏幕读取器中。

5。链接到其他信息，链条详细信息

ARIA详细信息使您可以将一个元素连接到另一个元素，从而提供额外的信息。例如，您可以将按钮链接到附近的段落，以说明该按钮的内容。当您希望辅助技术读取更多不直接属于点击元素的上下文时，这很有用。

让我们参加海洋教育部分。假设您希望段落文本描述“立即捐赠”按钮。您可以使用ARIA详细信息将按钮链接到段落。

首先，在段落中添加一个唯一的ID。单击包含描述的文本模块，然后转到高级> CSS ID和类。在CSS ID字段中输入您的唯一ID。让我们进入海洋 - 埃杜。

现在，此文本模块具有一个ID，屏幕读取器可以参考。

接下来，我们将ARIA详细信息属于该按钮。单击按钮模块，然后转到其高级> ARIA详细信息。在ID字段中输入Marine-Edu。

这告诉辅助技术，该按钮与ID“ Marine-Edu”的段落中的更多信息连接在一起。当您在不同地方使用相同的按钮文本时，这也很有帮助，但是每个按钮都意味着不同的东西。

您可能已经注意到，ARIA标签，ARIA描述和ARIA详细信息都以不同的方式添加了额外的上下文，因此最好不要将它们一起使用在同一元素中，因为它会使屏幕读取器混淆。如果您已经在页面上解释了某些内容，请考虑使用ARIA详细信息链接到该文本，而不是编写新标签或描述。

您只是看到可访问性属性如何使Divi Builder直接添加ARIA角色，标签和其他关键可访问性功能变得容易。它使您的网站无需编码即可访问。

获取可访问性属性

Divi 5

可访问性属性会照顾可访问性的技术方面。它还带有附加组件（在可访问性捆绑包中），可为您提供诸如键盘导航和视觉控件之类的额外功能，以提供更完整的包含解决方案。

1。可访问性侧边栏

可访问性侧栏添加了一个浮动工具栏，该工具栏使用户可以自定义其浏览体验。具有移动性障碍的访问者可以调整字体大小，切换到高对比度模式，启用灰度和使用键盘导航。您还可以自定义它以匹配您网站的设计。

2。可访问性调整

可访问性调整添加了实用功能，可帮助用户更轻松地浏览您的网站。其中包括用于更好导航的Skip链接，重点概要以帮助键盘用户查看其位置以及其他可用的可用性的微妙增强，而无需更改网站的布局。

查看可访问性捆绑包

立即使您的Divi 5网站访问

可访问性属性为您提供了一种简单的视觉方式，使您的Divi站点更具包容性。没有编码，没有解决方法 - 只是直接构建在构建器中的正确工具。

它与Divi 5完全兼容，积极支持，现在享受50％的折扣，直到6月28日。只要报价运行，您就可以以每年36美元的价格获得完整的可访问性捆绑包，包括侧栏和调整。如果您准备为所有人提供更好的网站，这是最简单的开始方式。

获得50％的可访问性捆绑包