WordPress 主题可访问性完全指南

发布于 作者:

为残障人士提供无障碍访问体验，是每个 WordPress 主题开发者都应承担的责任。本文基于 WordPress 官方主题团队的要求，系统讲解如何构建符合可访问性标准的经典主题。从色彩对比、语义化 HTML，到键盘导航支持与 ARIA 辅助技术，文章涵盖了主题开发中所有关键的 accessibility-ready 实践。无论你准备提交主题到官方目录，还是希望打造更具包容性的产品，这份指南都能为你提供清晰的技术路径与代码示例。

为什么可访问性如此重要

互联网属于每一个人。作为主题开发者，你需要确保自己生成的页面，既能让视力正常者用鼠标流畅操作，也能让视障用户借助屏幕阅读器顺畅浏览，让行动不便者仅通过键盘完成全部交互。

这不仅仅是道德层面的要求——WordPress 官方主题目录对可访问性有明确的硬性规定。任何提交到 .org 的主题都必须满足基础可访问性标准，若想使用 accessibility-ready 标签，则需要通过更严格的审核。

将可访问性纳入项目初期的规格说明，远比在开发末期临时修补更、更经济，产出的质量也更高。

网页可访问性的四大原则

Web Content Accessibility Guidelines（WCAG）将可访问性归纳为四个核心原则。理解它们，你就掌握了主题开发的指路明灯：

1. 可感知（Perceivable）

信息与界面组件必须以用户能够感知的方式呈现。这意味着内容不应依赖单一的感官或设备——不能假设所有人都能看见颜色、听见声音。

开发要点： 为图片提供替代文本，为音视频提供字幕或文字稿，确保色彩对比度足够。

2. 可操作（Operable）

用户必须能够有效操作界面。无论是键盘、鼠标、触摸屏，还是开关控制器、语音指令，所有功能都应可用。

开发要点： 确保所有交互均可通过键盘完成，提供充足的响应时间，避免引发癫痫的闪烁内容。

3. 可理解（Understandable）

信息和操作方式必须清晰易懂。用户应能理解页面结构、导航逻辑和表单填写要求。

开发要点： 使用一致的导航模式，为表单控件提供明确的标签，错误提示要具体且有帮助。

4. 健壮性（Robust）

内容必须能够被各种用户代理（浏览器、辅助技术）正确解析。随着技术演进，代码应保持兼容性。

开发要点： 编写语义化的 HTML，合理使用 ARIA 属性，确保 JavaScript 失效时核心功能依然可用。

可感知与可理解：色彩与对比度

色彩对比度要求

文字与背景的色彩对比度直接影响可读性。普通正文文本的对比度至少应达到 4.5:1（WCAG AA 级标准）。

text

/* 不推荐：对比度不足 */
.body-text {
    color: #999999;  /* 浅灰色 */
    background: #ffffff;
}

/* 推荐：对比度充足 */
.body-text {
    color: #333333;  /* 深灰色 */
    background: #ffffff; /* 对比度约 12.6:1 */
}

链接识别规则

切勿仅用颜色区分链接与普通文本。 色盲用户无法依赖颜色判断。

  • 正文中的链接必须添加下划线或其他非颜色标识
  • 导航菜单中的链接，因上下文明确，可以不额外加下划线
  • 链接获得焦点时（如键盘 tab 到该链接），必须有清晰的视觉反馈

text

/* 链接状态样式 */
a {
    color: #0066cc;
    text-decoration: underline; /* 正文链接必须下划线 */
}

a:hover,
a:focus {
    color: #004499;
    text-decoration: underline;
    outline: 2px solid #0066cc; /* 焦点状态必须可见 */
}

/* 导航菜单链接可以例外 */
.nav-menu a {
    text-decoration: none;
}

.nav-menu a:hover,
.nav-menu a:focus {
    text-decoration: underline; /* 但悬停/焦点时仍可标识 */
}

文本缩放与响应式

用户可以在浏览器中将页面缩放至 200%，所有内容和功能必须保持可用，且不触发水平滚动条。

实践建议：

  • 使用相对单位（em、rem、%）而非固定像素值
  • 设置 max-width: 100% 防止图片溢出
  • 使用 overflow-wrap: break-word 处理长单词或 URL

text

/* 推荐：使用相对单位 */
body {
    font-size: 16px; /* 基础字号用 px，方便浏览器缩放 */
}

h1 {
    font-size: 2rem; /* 相对单位 */
    line-height: 1.3;
}

p {
    font-size: 1rem;
    line-height: 1.6;
}

可感知：图像处理规范

非装饰性图片

承载信息或功能的图片（如用图片替代文字制作的 Logo、图片形式的导航链接）必须包含 alt 属性，且描述图片内容或功能。

text

<!-- 正确：logo 图片描述品牌名称 -->
<img src="logo.png" alt="晨光科技">

<!-- 正确：图片链接描述目标页面 -->
<a href="/products">
    <img src="product-icon.png" alt="产品列表">
</a>

装饰性图片

纯装饰图片（如背景纹理、与文本同时出现的点缀图标）应从辅助技术中隐藏。

text

<!-- 方法一：空 alt -->
<img src="divider.png" alt="">

<!-- 方法二：aria-hidden（推荐用于与文本共存的图标） -->
<span aria-hidden="true">
    <img src="icon-star.png" alt="">
</span>
<span>热门推荐</span>

特色图像（Featured Image）

  • 若特色图未添加链接，alt 描述图片本身的内容
  • 若特色图链接到文章，alt 应使用文章标题

text

// 在主题的模板文件中
<?php if ( has_post_thumbnail() ) : ?>
    <a href="<?php the_permalink(); ?>">
        <?php the_post_thumbnail( 'large', array(
            'alt' => get_the_title() // 链接到文章时用标题
        ) ); ?>
    </a>
<?php endif; ?>

可操作：键盘导航

控件键盘支持

所有交互控件——菜单按钮、模态框关闭按钮、选项卡切换等——必须能通过键盘完全操作。

  • 使用 Tab 键正向移动焦点，Shift+Tab 反向移动
  • 使用 Enter 键激活按钮或链接，Space 键适用于复选框、单选按钮
  • 焦点顺序必须与视觉顺序一致

text

<!-- 可访问的按钮 -->
<button type="button" class="menu-toggle" aria-expanded="false">
    菜单
</button>

<script>
// JavaScript 切换菜单时更新 aria-expanded
document.querySelector('.menu-toggle').addEventListener('click', function() {
    const isOpen = this.getAttribute('aria-expanded') === 'true';
    this.setAttribute('aria-expanded', !isOpen);
});
</script>

标题结构（Headings）

标题是页面内容的骨架。屏幕阅读器用户可以通过标题快速导航，因此必须遵循层级逻辑。

  • h1 通常用于页面主标题，每个页面只有一个
  • 按 h1 → h2 → h3 顺序嵌套，不应跳级（如 h2 直接到 h4）
  • 切勿为了字体大小而滥用标题标签——应使用 CSS 控制样式

text

<!-- 正确的层级结构 -->
<h1>网站名称</h1>
    <h2>新文章</h2>
        <h3>文章标题一</h3>
        <h3>文章标题二</h3>
    <h2>关于我们</h2>

<!-- 错误：跳级且滥用 -->
<h1>网站名称</h1>
    <h4>为了大号字而用 h4</h4> <!-- 不应跳级 -->

链接文本规范

链接文字应脱离上下文也能独立表意。屏幕阅读器有“链接列表”功能，会将页面所有链接提取出来供用户浏览。

text

<!-- 错误：脱离上下文不知所云 -->
<a href="post-1">点击这里</a>
<a href="post-2">阅读更多</a>

<!-- 正确：链接本身具有描述性 -->
<a href="post-1">了解 WordPress 主题开发</a>
<a href="post-2">查看完整价格方案</a>

<!-- 若必须使用“阅读更多”，应配合上下文 -->
<a href="post-1" aria-label="阅读更多：WordPress 主题开发指南">
    阅读更多
</a>

跳转链接（Skip Links）

跳转链接为键盘用户提供“跳过重复区域”的快捷通道，避免每次都要 Tab 穿过整个导航栏才能到达正文。

在经典主题中，通常在 header.php 的 <body> 之后放置：

text

<!-- header.php -->
<body <?php body_class(); ?>>
    <a class="skip-link screen-reader-text" href="#primary">
        跳转到主要内容
    </a>
    
    <?php if ( has_nav_menu( 'primary' ) ) : ?>
        <a class="skip-link screen-reader-text" href="#site-navigation">
            跳转到主导航
        </a>
    <?php endif; ?>

CSS 实现： 默认隐藏，焦点时显示

text

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
}

.skip-link:focus {
    left: 10px;
    top: 10px;
    padding: 10px 20px;
    background: #fff;
    border: 2px solid #0066cc;
    /* 焦点时可见 */
}

可操作与可理解：表单设计

标签与说明

  • 每个输入字段必须有对应的 <label> 标签
  • 占位符（placeholder）不能替代标签——它只是辅助提示
  • 使用 <fieldset> 和 <legend> 对相关控件（如性别单选框、兴趣复选框）进行分组

text

<!-- 正确的表单结构 -->
<form>
    <p>
        <label for="user-name">姓名</label>
        <input type="text" id="user-name" name="username" required>
    </p>
    
    <fieldset>
        <legend>联系方式</legend>
        <p>
            <label for="user-email">邮箱</label>
            <input type="email" id="user-email" name="email">
        </p>
        <p>
            <label for="user-phone">电话</label>
            <input type="tel" id="user-phone" name="phone">
        </p>
    </fieldset>
    
    <fieldset>
        <legend>兴趣领域</legend>
        <p>
            <input type="checkbox" id="interest-dev" name="interests[]" value="dev">
            <label for="interest-dev">开发</label>
        </p>
        <p>
            <input type="checkbox" id="interest-design" name="interests[]" value="design">
            <label for="interest-design">设计</label>
        </p>
    </fieldset>
    
    <p>
        <button type="submit">提交</button>
    </p>
</form>

焦点可见性

输入框获得焦点时必须有清晰的视觉反馈。不要移除默认的 outline 样式，除非你提供了更明显的替代方案。

text

/* 错误：移除焦点样式 */
input:focus {
    outline: none;
}

/* 正确：增强焦点样式 */
input:focus,
textarea:focus,
select:focus {
    outline: 3px solid #0066cc;
    outline-offset: 2px;
    border-color: #004499;
}

提交反馈

表单提交后，成功或错误信息必须让所有用户都能感知。错误信息应出现在表单顶部，并使用描述性文字说明具体问题。

text

<?php
// 主题中处理表单反馈
if ( isset( $_POST['submit'] ) ) {
    $errors = validate_form( $_POST );
    
    if ( ! empty( $errors ) ) {
        echo '<div class="form-errors" role="alert">';
        echo '<p>请修正以下问题：</p>';
        echo '<ul>';
        foreach ( $errors as $error ) {
            echo '<li>' . esc_html( $error ) . '</li>';
        }
        echo '</ul></div>';
    }
}
?>

健壮性：语义化 HTML

选择正确的元素

  • 按钮（<button>）：用于触发表单提交、打开弹窗、切换状态等页面内操作
  • 链接（<a>）：用于导航到另一个页面或页面内锚点

text

<!-- 正确：链接用于导航 -->
<a href="/about">关于我们</a>

<!-- 正确：按钮用于操作 -->
<button type="button" data-modal="contact">联系表单</button>
<button type="submit">提交订单</button>

<!-- 错误：用 div 模拟按钮 -->
<div class="fake-button" onclick="submitForm()">提交</div>

JavaScript 与 CSS 降级

主题的核心内容和导航功能，应在 JavaScript 和 CSS 被禁用时依然可用。

  • 菜单应使用 <ul> + <li> 结构，CSS 控制显示/隐藏
  • 依赖 JavaScript 的交互（如平滑滚动、动态加载）应提供降级方案

text

// 渐进增强示例
// 菜单在无 JS 时全部展开，有 JS 时折叠
document.addEventListener('DOMContentLoaded', function() {
    const menu = document.getElementById('primary-menu');
    if (menu) {
        menu.setAttribute('aria-hidden', 'true');
        // 进一步添加折叠功能...
    }
});

浏览器支持

明确主题支持的浏览器版本，并在这些浏览器上测试不同屏幕尺寸下的显示效果。

总结

构建可访问的 WordPress 经典主题，核心在于将四大原则融入开发流程的每个环节：

  1. 可感知：保证色彩对比度达标，为所有图片提供合适的 alt 描述
  2. 可操作：实现完整的键盘支持，建立合理的标题层级，添加跳转链接
  3. 可理解：表单标签完整，错误提示清晰，链接文字脱离上下文依然可读
  4. 健壮性：使用语义化 HTML，确保 JS/CSS 降级可用

将可访问性作为项目启动时的基本需求而非事后补充，这不仅能提升用户体验，也是提交 WordPress 官方主题目录的必经之路。

WordPress 官方提供了丰富的辅助资源，Make WordPress Accessible 博客汇集了大量讨论与实践经验。通过持续学习与测试，你完全可以构建出兼具美观与包容性的优秀主题。