提升 WordPress 项目无障碍访问性能的一种方法是使用 ARIA 角色，这些是添加到 HTML 元素中的属性，用于提供语义含义并改善辅助技术用户的使用体验。ARIA 角色定义了元素的目的或功能，使屏幕阅读器和其他工具能够以符合用户期望的方式呈现和支持网页内容的交互。
在本文中，我们将介绍在 WordPress 主题和插件中实现 ARIA 角色的详细方法，并涵盖您可以立即开始使用的实用技术，使您的网站对所有人更具包容性和用户友好性
了解 ARIA 角色
ARIA 角色是 Web 无障碍倡议组织的无障碍富互联网应用 (WAI-ARIA) 规范的关键组成部分。这些角色为内容提供语义含义，使辅助技术更容易解释和向残障用户呈现信息。
从本质上讲，ARIA 角色是您可以添加到 HTML 元素上的属性，用于明确定义其目的。当默认的 HTML 语义无法准确描述元素的功能时，这特别有用。例如，您可能为了样式目的使用 <div>，但希望屏幕阅读器将其识别为按钮。
在 WordPress 开发中，ARIA 角色在创建超出基本 HTML 结构的复杂布局或交互元素时变得特别有价值。它们有助于弥合视觉设计与无障碍功能之间的差距，确保所有用户都能有效地导航和与您的 WordPress 网站交互。
下面是一个 ARIA 角色的简单示例：
<div role="button" tabindex="0" onclick="submitForm()">
Submit
</div>
在这种情况下，我们将一个 <div> 变成了辅助技术可以识别的功能按钮。
ARIA 角色可以广泛分为几种类型：
- 地标角色： 这些定义页面的区域（例如
banner、navigation、main）。 - 小部件角色： 这些描述交互元素（例如
button、tablist、menu）。 - 文档结构角色： 这些描述内容的结构（例如
article、list、table）。
ARIA 角色很强大，但应该谨慎使用。第一条规则是，如果原生 HTML 元素可以提供您需要的语义和行为，就不要使用 ARIA。始终优先考虑语义 HTML，并使用 ARIA 角色来增强而不是取代结构良好的标记的固有无障碍性能。
WordPress 中常用的 ARIA 角色
在开发 WordPress 主题和插件时，某些 ARIA 角色特别有用且经常被实现。让我们来看看您会遇到的一些最常见角色，以及它们如何应用于典型的 WordPress 结构。
banner 角色通常用于网站头部，其中通常包含网站标题、徽标和主导航。在 WordPress 中，这通常对应于主题 header.php 文件中的 <header> 元素：
<header role="banner">
<?php get_template_part( 'template-parts/header/site-header' ); ?>
</header>
navigation 角色用于主要导航块。在 WordPress 中，您通常将其用于主菜单：
<nav role="navigation" aria-label="Primary Menu">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
</nav>
main 角色表示您 WordPress 网站的主要内容区域。这通常用于主题的 index.php、single.php 或 page.php 文件：
<main role="main">
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
get_template_part( 'template-parts/content/content', get_post_type() );
}
}
?>
</main>
complementary 角色非常适合用于补充主要内容的侧边栏内容，但其本身也具有独立的语义。在 WordPress 中，这通常适用于小工具区域：
<aside role="complementary">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>
contentinfo 角色通常用于网站页脚，其中通常包含版权信息、辅助链接和其他全站信息：
<footer role="contentinfo">
<?php get_template_part( 'template-parts/footer/site-info' ); ?>
</footer>
在 WordPress 主题中实现 ARIA 角色
开发 WordPress 主题时，加入 ARIA 角色可以帮助增强无障碍访问功能。
为模板文件添加角色
要为 WordPress 主题添加 ARIA 角色，需要修改模板文件。以下是实现角色的一些常见位置：
在 header.php 中：
<header role="banner">
<!-- Header content -->
</header>
<nav role="navigation">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_id' => 'primary-menu',
) );
?>
</nav>
<main role="main">
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
get_template_part( 'template-parts/content', get_post_type() );
endwhile;
endif;
?>
</main>
在 sidebar.php 中：
<aside role="complementary">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>
在 footer.php 中：
<footer role="contentinfo">
<!-- Footer content -->
</footer>
在主题开发中使用 ARIA 角色的最佳实践
正如之前提到的，请确保将语义化 HTML 元素作为结构的基础。ARIA 角色应该用于补充这一基础，在必要时提供额外的上下文，而不是取代正确的 HTML 语义。一致性是关键，因此请在所有模板中对类似元素统一应用角色。
在使用 ARIA 角色时请保持克制。只在语义化 HTML 无法传达额外上下文的情况下才添加它们。
为了确保实现的有效性，使用屏幕阅读器测试主题至关重要。这种做法有助于验证角色是否被正确解释，并真正增强了依赖辅助技术的用户的使用体验。
考虑加入地标来定义页面区域，例如 main、navigation 和 footer。此外，确保按钮和链接等交互元素具有清晰的描述性文本或标签。最后，使用 ARIA 状态和属性来传达动态内容的变化，例如手风琴或菜单的展开/折叠状态。
WordPress 插件中的 ARIA 角色
在开发插件时，加入 ARIA 角色可能更为重要，因为插件通常会向网站添加动态内容和交互元素，使无障碍访问的考虑变得更加重要。
插件开发者的注意事项
- 内容注入： 当插件向页面注入内容时，请确保包含适当的 ARIA 角色。这对于可能是初始页面加载一部分的动态生成内容尤为重要。
- 交互元素： 如果插件添加了模态框、手风琴或标签界面等交互元素，ARIA 角色对于使其具有无障碍访问性至关重要。
- 状态管理： 使用 ARIA 状态和属性向辅助技术传达动态元素的当前状态。
在动态内容中实现角色
以下是一个示例，展示如何为插件创建的自定义小工具添加 ARIA 角色：
function my_custom_widget_output() {
$output = '<div role="complementary">';
$output .= '<h2>Widget Title</h2>';
$output .= '<ul role="list">';
// Add list items here
$output .= '</ul>';
$output .= '</div>';
echo $output;
}
对于更复杂的交互元素，您可以使用 JavaScript 来管理 ARIA 状态：
function toggleAccordion(element) {
var expanded = element.getAttribute('aria-expanded') === 'true' || false;
element.setAttribute('aria-expanded', !expanded);
var panel = document.getElementById(element.getAttribute('aria-controls'));
panel.hidden = expanded;
}
WordPress 高级 ARIA 技术
随着您对基本 ARIA 实现的日益熟悉，您可以探索高级技术，这些技术可以显著增强 WordPress 网站的可访问性，特别是对于复杂的交互元素。
使用 ARIA 标签和描述
ARIA 标签和描述为元素提供额外的上下文，使辅助技术用户更容易理解。
aria-label：当元素没有可见的文本标签时使用此属性。
<button aria-label="Close modal">X</button>
aria-labelledby：使用此属性将元素与 DOM 中其他位置的可见文本标签关联起来。
<h2>Latest Posts</h2>
<div aria-labelledby="section-title">
<!-- Content here -->
</div>
aria-describedby：使用此属性为元素提供额外的描述性信息。
function custom_form_field() {
$output = '<label for="username">Username</label>';
$output .= '<input type="text" aria-describedby="username-hint">';
$output .= '<p>Must be at least 5 characters long</p>';
return $output;
}
使用 ARIA 管理焦点
适当的焦点管理对于键盘导航至关重要。以下是一些技术：
设置初始焦点：当新部分加载时，使用 JavaScript 将焦点设置在最相关的元素上。
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('main-content').focus();
});
在模态框中捕获焦点：确保焦点在模态框打开时停留在模态框内。
function trapFocus(element) {
var focusableEls = element.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
var firstFocusableEl = focusableEls;
var lastFocusableEl = focusableEls[focusableEls.length - 1];
element.addEventListener('keydown', function(e) {
var isTabPressed = (e.key === 'Tab' || e.keyCode === 9);
if (!isTabPressed) {
return;
}
if (e.shiftKey) {
if (document.activeElement === firstFocusableEl) {
lastFocusableEl.focus();
e.preventDefault();
}
} else {
if (document.activeElement === lastFocusableEl) {
firstFocusableEl.focus();
e.preventDefault();
}
}
});
}
管理动态内容的焦点：当内容动态更改时，使用 aria-live 区域来宣布更改并适当管理焦点。
function dynamic_content_area() {
return '<div aria-live="polite"></div>';
}
add_shortcode('live_region', 'dynamic_content_area');
实现复杂小部件
像标签页和手风琴这样的复杂小部件需要仔细实施 ARIA 才能实现可访问性。
标签页
下面的代码示例创建了一个包含两个标签页及其相应内容面板的标签页界面。带有 role="tablist" 的外部 <div> 用作标签页按钮的容器。每个标签页按钮被赋予 role="tab" 属性，并使用 aria-controls 与其内容面板关联。aria-selected 属性指示当前激活的标签页。内容面板标记有 role="tabpanel" 属性，并使用 aria-labelledby 链接回相应的标签页。这种结构允许屏幕阅读器理解标签页与其内容之间的关系。
function accessible_tabs() {
$output = '<div role="tablist">';
$output .= '<button role="tab" aria-selected="true" aria-controls="panel1">Tab 1</button>';
$output .= '<button role="tab" aria-selected="false" aria-controls="panel2">Tab 2</button>';
$output .= '</div>';
$output .= '<div role="tabpanel" aria-labelledby="tab1">Content 1</div>';
$output .= '<div role="tabpanel" aria-labelledby="tab2" hidden>Content 2</div>';
return $output;
}
add_shortcode('accessible_tabs', 'accessible_tabs');
手风琴：
下面的示例展示了一个单独的可展开部分。手风琴标题包裹在 <h3> 标签中，其中包含一个用于切换手风琴的按钮。此按钮使用 aria-expanded 来指示其当前状态，并使用 aria-controls 将其与内容面板关联。内容面板本身被赋予 role="region" 并通过 aria-labelledby 链接回其标题。hidden 属性用于初始隐藏内容。这种结构使屏幕阅读器能够理解手风琴的功能和当前状态，从而提高可展开内容的无障碍性。
function accessible_accordion() {
$output = '<div>';
$output .= '<h3>';
$output .= '<button aria-expanded="false" aria-controls="sect1">';
$output .= '<span>Section 1</span>';
$output .= '<span></span>';
$output .= '</button>';
$output .= '</h3>';
$output .= '<div role="region" aria-labelledby="accordion1id" hidden="">';
$output .= '<div>';
$output .= '<!-- Panel content -->';
$output .= '</div>';
$output .= '</div>';
$output .= '</div>';
return $output;
}
add_shortcode('accessible_accordion', 'accessible_accordion');
在WordPress中测试ARIA角色
实现ARIA角色只是成功了一半。彻底的测试至关重要。
无障碍测试工具
有一些插件可以运行自动化无障碍测试，其中一些我们之前已经讨论过过。
除了插件之外，屏幕阅读器对于测试ARIA角色如何被辅助技术解释也是必不可少的。macOS的VoiceOver、Windows的NVDA和JAWS是流行的选择。通过使用这些屏幕阅读器，您可以像用户一样体验您的网站，并发现ARIA实现中的任何问题。
最后，不要忽视浏览器开发者工具的力量。现代浏览器包含内置的无障碍审计功能，可以帮助识别与ARIA相关的问题。
常见陷阱及如何避免
尽管可能重复，但我们还是要说，ARIA实现中最常见的错误之一就是过度使用。为每个元素添加ARIA角色很诱人，但这实际上会损害无障碍性。请尽可能使用原生HTML元素，只在绝对必要时才添加ARIA角色。
ARIA属性的格式不正确是另一个常见问题。请确保您的ARIA属性遵循正确的语法，避免在属性值中嵌入标记或特殊字符。例如，aria-label 属性应该包含纯文本，而不是HTML。
错误使用 aria-hidden 可能会对无障碍性造成严重后果。在向屏幕阅读器隐藏内容时要谨慎，并仔细评估元素是否真的应该对辅助技术隐藏。
动态内容有其自身的挑战。不要忘记在UI更改时更新ARIA状态（如 aria-expanded）。使用JavaScript在用户与网站交互时动态更新这些状态和属性。
请记住，ARIA角色本身不会为元素添加功能。确保具有ARIA角色的元素也具有处理交互和键盘事件的必要JavaScript。
总结
无论您采用何种无障碍方法，重要的是牢记最终目标：创造包容性的用户体验。实现 ARIA 角色不是目标，而是一个帮助您达成目标的工具。
无障碍不应该是附加功能或事后考虑——它是网页开发的一个基本方面，惠及所有用户。
最好将无障碍视为一段旅程，而不是一个目标。网页标准和最佳实践不断演进，我们对待无障碍的方法也应与时俱进。关注最新的 WCAG 指南、WordPress 无障碍标准，以及有助于使您的网站更具包容性的新兴技术。
