基础原则
HTML本身具备强大的无障碍特性。
您可以亲自尝试：打开代码编辑器创建一个符合规范的HTML页面——正确使用地标、标题、文本、按钮、链接、表单等元素。如果愿意，可以直接使用下方代码示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My website</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a>
<li><a href="#about">About</a>
<li><a href="#services">Services</a>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article id="home">
<h2>Home</h2>
<p>This is the home section where introductory content can be found.</p>
<form name="Just a button">
<button type="button">Click Me!</button>
</form>
</article>
<article id="about">
<h2>About</h2>
<p>This section contains information about the website or the person/company behind it.<p><a href="https://example.com">Visit their full profile</a></p>
</article>
<article id="services">
<h2>Services</h2>
<p>Details about the services offered can be found here.</p>
</article>
<article id="contact">
<h2>Contact</h2>
<form action="#" method="post" name="contact" autocomplete="on">
<fieldset>
<legend>Let's chat</legend>
<div><label for="name">Name:</label></div>
<div><input type="text" id="name"></div>
<div><label for="email">Email:</label></div>
<div><input type="email" id="email"></div>
<div><label for="message">Message:</label></div>
<div><textarea id="message" rows="4" cols="50" spellcheck="true"></textarea></div>
<div><input type="submit" value="Submit"></div>
</fieldset>
</form>
</article>
</main>
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>然后通过Web Accessibility Checker等在线无障碍检测工具运行代码，您会发现它检测不到任何无障碍问题。
问题通常出现在后期添加样式、脚本或媒体资源时。作为现代WordPress主题开发者，您将主要处理这些技术——基于React的区块、PHP注入的模板模式，以及从theme.json编译的CSS。
关键在于编码和设计时始终保持无障碍意识。
语义化HTML
与其用<div>包裹所有内容，不如充分利用HTML的语义化元素。这能避免重复造轮子的尴尬。
地标元素
地标元素用于定义页面结构，帮助屏幕阅读器更轻松地导航内容。
例如，与其定义一堆带class的div：
<div class="header">
<h1>Welcome to My Website</h1>
</div>
<div class="nav">
<ul>
<li><a href="#home">Home</a>
<li><a href="#about">About</a>
<li><a href="#services">Services</a>
<li><a href="#contact">Contact</a></li>
</ul>
</div>您可以为相关区块使用地标元素。
<div class="header">
<h1>Welcome to My Website</h1>
</div>
<div class="nav">
<ul>
<li><a href="#home">Home</a>
<li><a href="#about">About</a>
<li><a href="#services">Services</a>
<li><a href="#contact">Contact</a></li>
</ul>
</div>如果在站点编辑器中设计主题，也可以直接设置地标：选中区块后，在区块设置的”高级”选项中，根据功能将HTML元素设为header/main/section/article/aside/footer。
标题层级
添加模板标题时，请始终从H2开始按降序使用标题层级。在站点编辑器中可通过”文档概览>大纲”检查层级是否连贯。
按钮与链接
设计用户操作时请注意：
- 需要触发操作时使用button元素
- 需要跳转页面时使用a标签
- 若链接需要按钮样式（如着陆页的号召性用语），通过CSS实现
表单设计
设计表单时请遵循：
- 始终用form元素包裹
- 为input设置正确的type和匹配属性（如tel类型会在移动端显示数字键盘）
- 不要依赖占位文本说明，必须提供可访问标签
- 搜索表单使用search元素
- 登录表单可使用autocomplete属性帮助密码管理器自动填充
<input type="tel" name="phone" id="phone" required>浏览器默认会为获得焦点的元素显示焦点环。如需修改样式，请使用:focus-visible伪类，切勿完全移除焦点环。
色彩与排版
色彩对比
必须创建具有足够对比度的无障碍配色方案。编辑模板时，WordPress会提示不符合要求的文字/背景色组合。
不要仅靠颜色传递信息。例如链接应有颜色之外的标识，焦点状态同理。不确定时，参考默认HTML链接和焦点样式。
排版规范
- 使用rem等相对单位设置字体大小，避免px
- 将内容宽度限制在50-70个字符（推荐使用ch单位）
- 根据字体大小设置合适的行间距
尊重用户偏好
媒体查询是响应式设计的基石。其中prefers-color-scheme和prefers-reduced-motion等类型专门针对无障碍优化，而pointer/hover/scripting等查询则根据用户设备调整组件行为。
ARIA解决方案
ARIA（无障碍富互联网应用框架）常被视为快速提升屏幕阅读器兼容性的方案。但其核心原则是：仅在绝对必要时使用。理想情况下应优先使用HTML原生语义。
误用的ARIA属性反而会降低可访问性。除非无法控制HTML或需要处理动态内容，否则应避免使用。更多信息请参考MDN的WAI-ARIA基础知识章节。
总结与延伸阅读
无障碍优化永无止境。即使微小改进也能显著提升访客体验，且绝无负面影响。
推荐访问W3C网络无障碍倡议(WAI)教程章节深入学习。